Beauty Diagram

Was ist Beauty Diagram?

Beauty Diagram ist ein Online-Editor, der Mermaid- und PlantUML-Quellcode übernimmt (und bestimmte draw.io-Workflows importieren kann), um Diagramme mit einem sauberen, präsentierten Layout und Styling zu rendern. Sein Kernzweck ist es, das zu „verschönern“, was diese Diagramm-Sprachen erzeugen – durch Neuanordnung, Neulayout und exportfertige Ausgabe –, ohne dass Nutzer ihre Diagramme manuell neu zeichnen müssen.

Es unterstützt Live-Vorschau, Ein-Klick-Verschönerung und Export in SVG oder PNG für Dokumentation, Präsentationen und Reviews. Die Seite beschreibt zudem präsentationsfokussierte Typografie und Themen, plus eine „animierte SVG“-Vorschau für Sequenz-Bewegungsanzeigen.

Wichtige Funktionen

• Mermaid-Editor mit Live-Vorschau und Ein-Klick-Verschönerung: Mermaid-Quellcode einfügen, Ergebnis sofort ansehen und Formatierungen anwenden, ohne den Code umzuschreiben.
• PlantUML-Editor mit Verschönerungs-Workflow: Zu PlantUML wechseln, Aktivitätsquellcode einfügen und einen Formatter anwenden, der Abstände und Diagramm-Elemente neu ausrichtet.
• draw.io-Import (Pro): Eine .drawio-Datei oder einen XML-Export importieren (die Seite weist darauf hin, dass dies in Pro verfügbar ist). Der Editor parst den Workflow in Mermaid-Quellcode zur Verschönerung.
• Neulayout mit orthogonaler Routing für Flussdiagramme/Aktivitätsdiagramme: Diagramme auf einem Gitter neuabständigen und mit orthogonalen Verbindungen routen (um diagonale Pfeile zu vermeiden, die Knoten durchschneiden).
• Themenwechsel für konsistentes Styling: Zwischen Themen wechseln (modern, atlas, obsidian, atelier), ohne den Diagrammquellcode zu bearbeiten.
• Präsentations-Typografie und Styling: Die Seite hebt Geist bei 14px / 500, OpenType-Ligaturen, baseline-ausgerichtete Labels und weiche Schatten statt harter 1px-Striche hervor.
• Animierte SVG-Vorschauen (gleicher Quellcode, unterschiedliche Bewegungsüberlagerungen): Subtile Bewegungen (Beispiele: charge, laser, pulse) auf Mermaid-Ausgabe legen, um Sequenzen/Richtungen zu verdeutlichen.
• Exports für Docs und Decks: Als SVG und PNG exportieren. Die Seite erwähnt 4× PNG-Export in Pro und dass SVG für Bildschirmansicht geeignet ist, während PNG für Ziele ohne SVG-Unterstützung genutzt werden kann.
• Knoten-/Linien-Anpassungen über Toolbar (Quellcode unverändert): Die Seite beschreibt, Knoten/Linien anzuklicken, um eine schwimmende Toolbar zu öffnen, um Hintergrund, Rahmen, Linienfarbe/Breite und Textfarbe anzupassen; Anpassungen können mit dem Diagramm gespeichert und per Link geteilt werden.

So verwenden Sie Beauty Diagram

1. Den Online-Editor öffnen und den Diagrammtyp wählen (Mermaid oder PlantUML; draw.io-Import als Pro erwähnt).
2. Ihren vorhandenen Mermaid- oder PlantUML-Quellcode in den Editor einfügen.
3. Beautify nutzen, um den Formatter anzuwenden: Er legt das Diagramm neu aus und wendet das gewählte Theme/Styling an.
4. Die Live-Vorschau prüfen, optional Farben über die Knoten-/Linien-Toolbar anpassen und bei Bedarf Themen wechseln.
5. Als SVG oder PNG für den Zielworkflow exportieren (Docs/Decks/Reviews wie auf der Seite beschrieben).

Anwendungsfälle

• Mermaid-Flussdiagramm in slide-fähiges Graphic umwandeln: Mermaid-Code einfügen, verschönern für orthogonales Gitter-Routing und Präsentations-Palette/Typografie, dann SVG für Einbettung oder Zoom exportieren.
• Eingeklemmte PlantUML-Aktivitätsdiagramme korrigieren: Zum PlantUML-Tab wechseln, Aktivitätsdiagramm einfügen, verschönern für normalisierte Abstände und Swimlane-/Layout-Details.
• Ein Diagrammquellcode für verschiedene Präsentationskontexte beibehalten: Themenwechsel (modern/atlas/obsidian/atelier) nutzen, um denselben Mermaid-Inhalt für Decks, Doku-Seiten oder Dark-Mode-READMEs zu rendern.
• Diagramme lesbarer machen durch Reduzierung visueller Unordnung: Ein-Akzent-Palette anwenden, bei der Entscheidungsdiamanten/Verzweigungen vor Graustufen-Inhalt hervorstechen.
• draw.io-Workflows in Mermaid-Formatierungspipeline überführen (Pro): .drawio-Datei oder XML-Export importieren, in Mermaid-Quellcode parsen und im Mermaid-Workflow weiter bearbeiten/verschönern.

FAQ

Wie verbessere ich ein Mermaid-Flussdiagramm?
Fügen Sie Ihren Mermaid-Quellcode in den Editor ein, klicken Sie auf Beautify und nutzen Sie die Live-Vorschau, um die Änderungen bei Layout und Styling zu prüfen. Die Seite weist darauf hin, dass der Originalcode unverändert bleibt; nur das Rendering ändert sich.

Kann ich ein PlantUML-Aktivitätsdiagramm genauso verbessern?
Ja. Die Seite beschreibt, zum PlantUML-Tab zu wechseln, den Aktivitätsquellcode einzufügen und auf Beautify zu klicken, um Swimlanes neu auszurichten und enge Standardabstände zu normalisieren.

Was bedeutet SVG vs. PNG für Exports?
Die Seite gibt an, dass SVG für Bildschirmansichten (Dokumente/Websites/Figma-Einbettungen) besser geeignet ist, da es bei jedem Zoom scharf bleibt, während PNG für Decks nützlich ist, die als PDF exportiert oder gedruckt werden, oder wenn das Zieltool kein SVG unterstützt. Es wird auch 4× PNG-Export bei Pro erwähnt.

Kann Beauty Diagram eine draw.io-Datei importieren?
Ja, aber es ist als Pro gekennzeichnet: Sie können eine .drawio-Datei oder einen XML-Export in den Editor ziehen. Die Seite sagt, es parst das Flussdiagramm/Sequenzdiagramm in Mermaid-Quellcode für die anschließende Verbesserung.

Ist das nur ein Klon des Mermaid Live Editors?
Die Seite kontrastiert das explizit mit Mermaid Live, indem sie angibt, dass Beauty Diagram das Mermaid-Output nachbearbeitet – mit Neu-Layout, Abständen, Typografie und Farbpalettenänderungen – statt nur das Standard-Mermaid-Rendering darzustellen.

Alternativen

• Mermaid Live Editor (oder andere Mermaid-Renderer): Nützlich für Live-Rendering von Mermaid-Syntax, aber die Quelle deutet an, dass Beauty Diagram sich auf die Nachbearbeitung des Standard-Renderers für Präsentationsqualität-Layout und Styling konzentriert.
• Diagrammerstellungs-/Whiteboard-Tools (z. B. Flussdiagramm-Design-Tools): Sie können Foliengraphiken erstellen, erfordern aber oft manuelles Neuzeichnen statt Verbesserung bestehenden Mermaid/PlantUML-Quellcodes.
• Generische Diagrammierungstools mit Export-Unterstützung: Diese erzeugen SVG/PNG-Ausgaben, sind aber typischerweise auf das Zeichnen ausgerichtet statt auf Formatierung/Neu-Layout von Mermaid/PlantUML-Code.
• draw.io-eigene Export-Workflows: Wenn Ihre Diagramme bereits in draw.io sind, können Sie auf integrierte Exports setzen; der Wert von Beauty Diagram liegt speziell in der Konvertierung/Import in einen Mermaid-Workflow mit anschließender Anwendung von Verbesserungsregeln.