Mermaid Diagramm Editor

Mermaid Diagramm Editor: Erstelle Diagramme als Code

Mermaid ist eine Diagrammerstellungssprache, die Textdefinitionen in SVG Diagramme umwandelt. Schreibe ein Flussdiagramm, Sequenzdiagramm oder ER Diagramm als Klartext und sieh das Ergebnis in Echtzeit gerendert. Dieser Editor analysiert deine Mermaid Syntax clientseitig mit der offiziellen Mermaid.js Bibliothek und zeigt sie als scrollbare und zoombare SVG Vorschau an.

Was ist Mermaid?

Mermaid ist ein JavaScript-basiertes Diagramm- und Charting-Werkzeug, das textbasierte Definitionen zur Erstellung von Diagrammen verwendet. Anstatt Diagramme manuell in einem GUI-Werkzeug zu zeichnen, schreibst du eine einfache Textbeschreibung und Mermaid rendert sie als SVG-Bild. Es wurde von Knut Sveidqvist erstellt und wird jetzt von der Open-Source-Community gepflegt. Mermaid wird广泛 in Dokumentation (GitHub, GitLab, Notion), README-Dateien und technischer Dokumentation verwendet. Es unterstützt Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Entity-Relationship-Diagramme, Gantt-Diagramme und viele andere Diagrammtypen. Die Syntax ist absichtlich einfach gehalten, damit auch nicht-technische Interessengruppen die Diagrammdefinitionen ohne besonderes Training lesen und verstehen können.

Wie man es verwendet

1. Schreibe Mermaid Syntax im Editor (mit Zeilennummern und Klammerpaarung) oder klicke auf eine Vorlagen-Schaltfläche, um einen Ausgangspunkt zu laden
2. Die Vorschau aktualisiert sich während des Schreibens mit einer kurzen Verzögerung
3. Ziehe den Trenner zwischen Editor und Vorschau, um die Panelgröße anzupassen
4. Klicke und ziehe in der Vorschau zum Scrollen, scrolle zum Zoomen
5. Wähle ein Diagrammthema aus dem Dropdown-Menü (Default, Dark, Forest, Neutral)
6. Exportiere mit den SVG/PNG Download-Schaltflächen oder verwende PNG Kopieren zum Einfügen in andere Anwendungen
7. Klicke auf Teilen, um einen Link zu erstellen, der dein Diagramm und Thema im Hash kodiert

Unterstützte Diagrammtypen

Flussdiagramme

Der häufigste Mermaid Diagrammtyp. Definiere die Richtung mit TD (oben nach unten), LR (links nach rechts), RL oder BT. Knoten verwenden Klammern für Formen: [rechteck], (abgerundet), {raute}, ([stadion]). Verbinde Knoten mit Pfeilen: -->, -.->, ==>.

Sequenzdiagramme

Modelliere Interaktionen zwischen Teilnehmern über die Zeit. Pfeile zeigen synchrone (->>) und asynchrone (-->>) Nachrichten. Füge activate/deactivate Blöcke, alt/else Bedingungen und loop Abschnitte hinzu, um komplexe Abläufe darzustellen.

Entity-Relationship-Diagramme

Definiere Datenbankschemata mit Entitäten und Beziehungen. Verwende die Standard Kardinalitätsnotation: ||--o{ (eins zu viele), }|--|{ (viele zu viele). Füge Attributtypen und PK/FK Markierungen hinzu.

Klassendiagramme

Dokumentiere objektorientierte Strukturen mit Klassen, Attributen, Methoden und Beziehungen (Vererbung, Komposition, Abhängigkeit). Verwende Stereotype für Interfaces und Enums.

Gantt-Diagramme

Zeige Projektzeitpläne mit Aufgaben, die gegen eine Zeitachse aufgetragen sind. Definiere Abhängigkeiten mit after, um kritische Pfade zu modellieren. Markiere Aufgaben als done, active oder crit.

Git Graphen

Visualisiere Branching Strategien mit Commits, Branches und Merges. Nützlich für Dokumentation des Git Workflows und CI/CD Pipeline Diagramme.

Zustandsdiagramme

Modelliere zustandsbehaftete Systeme mit Zuständen und Übergängen. Zeige Start-/Endzustände, zusammengesetzte Zustände und Parallelität.

Brauchst du Hilfe bei der Datenmodellierung? Sieh dir den ER Diagramm Generator an. Arbeiten an Projektschemata? Verwende den Gantt Diagramm Generator.