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.
Wie man es verwendet
- Schreibe Mermaid Syntax im Editor (mit Zeilennummern und Klammerpaarung) oder klicke auf eine Vorlagen-Schaltfläche, um einen Ausgangspunkt zu laden
- Die Vorschau aktualisiert sich während des Schreibens mit einer kurzen Verzögerung
- Ziehe den Trenner zwischen Editor und Vorschau, um die Panelgröße anzupassen
- Klicke und ziehe in der Vorschau zum Scrollen, scrolle zum Zoomen
- Wähle ein Diagrammthema aus dem Dropdown-Menü (Default, Dark, Forest, Neutral)
- Exportiere mit den SVG/PNG Download-Schaltflächen oder verwende PNG Kopieren zum Einfügen in andere Anwendungen
- 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.