In diesem Artikel
Warum Mermaid das Diagramm-Werkzeug für Entwickler ist
Technische Dokumentationen setzen häufig auf Diagramme, um Systemarchitekturen, Abläufe und Datenflüsse zu erklären. Herkömmliche Diagramm-Werkzeuge erfordern das Ziehen von Formen auf einer Zeichenfläche und den Export von Bildern, die sich nur schwer versionieren lassen. Mermaid verfolgt einen anderen Ansatz — Sie beschreiben Ihr Diagramm in einer einfachen Textsyntax, und der Renderer erzeugt ein sauberes SVG, das gemeinsam mit Ihrem Code in Markdown-Dateien, Wikis und Pull Requests leben kann.
Da Mermaid-Diagramme reiner Text sind, lassen sie sich leicht in Diffs prüfen, in Git speichern und automatisch neu erzeugen. Das macht sie ideal für Dokumentationen, die sich mit der Codebasis weiterentwickeln müssen. Ein Live-Vorschau-Tool erlaubt es, die Diagrammsyntax in Echtzeit zu bearbeiten und die gerenderte Ausgabe beim Tippen zu sehen, statt auf einen Build-Schritt oder eine separate Anwendung zu warten.
So verwenden Sie das Mermaid-Vorschau-Tool
Die Mermaid-Vorschau von CheckTown rendert Ihren Diagrammcode sofort, sodass Sie Diagramme entwerfen und debuggen können, ohne den Browser zu verlassen.
- Geben Sie Ihre Mermaid-Syntax in den Editor ein oder fügen Sie sie ein — die Vorschau aktualisiert sich in Echtzeit, während Sie den Code ändern
- Das Tool unterstützt Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, Entity-Relationship-Diagramme, Gantt-Diagramme, Kreisdiagramme und mehr
- Syntaxfehler werden mit klaren Meldungen hervorgehoben, sodass Sie Probleme sofort eingrenzen und beheben können, statt zu raten, was schiefgelaufen ist
- Exportieren Sie das gerenderte Diagramm als SVG oder PNG zur Verwendung in Präsentationen, Dokumentationen oder Issue-Trackern
Kostenlos testen – keine Registrierung erforderlich
Mermaid-Vorschau öffnen →Bewährte Vorgehensweisen für Mermaid-Diagramme
Ein paar Konventionen halten Ihre Mermaid-Diagramme lesbar und wartbar, auch wenn sie an Komplexität zunehmen.
- Geben Sie Knoten aussagekräftige IDs und Beschriftungen — verwenden Sie sinnvolle Namen wie userService und authDB statt generischer A und B, damit sich der Quellcode wie eine Dokumentation liest
- Konzentrieren Sie jedes Diagramm auf ein einziges Konzept — teilen Sie ein komplexes System in mehrere kleinere Diagramme auf, statt alles in ein unleserliches Chart zu zwängen
- Nutzen Sie Subgraphen, um zusammengehörige Knoten zu gruppieren — das verleiht dem Diagramm optische Struktur und macht große Diagramme auf einen Blick leichter navigierbar
Häufig gestellte Fragen
Welche Mermaid-Diagrammtypen werden unterstützt?
Die Vorschau unterstützt alle wichtigen Mermaid-Diagrammtypen, darunter Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, Entity-Relationship-Diagramme, Gantt-Diagramme, Kreisdiagramme, Journey Maps und Anforderungsdiagramme. Der Renderer bleibt mit den neuesten Mermaid.js-Versionen auf dem aktuellen Stand.
Kann ich das erzeugte Diagramm in GitHub oder GitLab einbetten?
Ja. GitHub und GitLab rendern Mermaid-Codeblöcke beide nativ in Markdown-Dateien. Sie können die Syntax aus dem Editor direkt in einen abgegrenzten Codeblock in Ihrer README oder Wiki-Seite kopieren. Das Vorschau-Tool ist nützlich, um die Syntax zu verfeinern, bevor Sie sie in Ihr Repository committen.
Gibt es eine Größenbeschränkung für Diagramme?
Es gibt keine feste Zeichenbegrenzung. Allerdings können extrem große Diagramme mit Hunderten von Knoten im Browser langsam rendern. Wenn Ihr Diagramm unübersichtlich wird, sollten Sie es in kleinere, fokussierte Diagramme aufteilen, die jeweils einen Teil des Systems beschreiben.