Mermaid Live Editor online

Ein Mermaid-Editor, eingebaut in einen Markdown-Editor

Mermaid macht aus ein paar Zeilen Text ein Diagramm, und so lassen sich Diagramme leicht vergleichen, prüfen und neben der Dokumentation aufbewahren, die sie erklären. Der Editor auf dieser Seite ist ein geteilter Markdown-Editor mit eingebauter Mermaid-Unterstützung: Schreibe das Diagramm dorthin, wo es im Dokument hingehört, und die Vorschau zeichnet es einen Moment nach dem Tippen neu. Diagramme, die du nicht geändert hast, kommen aus einem Cache zurück, sodass das Bearbeiten des Textes drumherum schnell bleibt; die Engine selbst wird geladen, sobald ein Dokument zum ersten Mal ein Diagramm enthält, was einen Moment dauern kann.

Beginne mit diesem Block im Editor:

```mermaid
flowchart LR
  Idea --> Draft --> Review
  Review -->|changes| Draft
  Review -->|approved| Publish
```

und das Flussdiagramm erscheint rechts. Ändere LR (von links nach rechts) in TD (von oben nach unten), füge einen Knoten hinzu oder benenne eine Kante um, und das Bild folgt.

Diagrammtypen, die du zeichnen kannst

Jedes der folgenden Diagramme wird in der Vorschau gerendert. Schreibe das Diagramm-Schlüsselwort in die erste Zeile innerhalb des Zauns:

• Flussdiagramm (flowchart TD) – Abläufe, Entscheidungen, Architekturskizzen.
• Sequenzdiagramm (sequenceDiagram) – Aufrufe zwischen Diensten oder Personen im Zeitverlauf.
• Klassendiagramm (classDiagram) und Zustandsdiagramm (stateDiagram-v2).
• Entity-Relationship-Diagramm (erDiagram) – Datenbankschemata.
• Gantt-Diagramm (gantt), Zeitleiste (timeline) und User Journey (journey).
• Kreisdiagramm (pie), Quadrantendiagramm (quadrantChart) und Mindmap (mindmap).
• Git-Graph (gitGraph), Requirement-Diagramm (requirementDiagram) und C4 (C4Context).
• Neuere Typen wie Sankey (sankey-beta), XY-Chart (xychart-beta), Block (block-beta), Packet, Kanban und Architektur (architecture-beta).

Die Syntax von Beta-Diagrammtypen kann sich zwischen Mermaid-Versionen ändern, prüfe die genauen Schlüsselwörter also in der offiziellen Mermaid-Dokumentation; dieser Editor führt die Version aus, die mit der Seite mitgeliefert wird.

Ein Diagramm debuggen

Kann Mermaid den Code nicht parsen, wird der Diagrammblock zu einem Fehlerkasten mit der Meldung des Parsers – Zeilennummer, die Stelle, an der er gescheitert ist, und was er erwartet hat. Korrigiere die Zeile, und das Diagramm ersetzt den Fehler. Nutze die geteilte Ansicht, um beides gleichzeitig zu sehen; die Vorschau scrollt mit der Zeile mit, die du bearbeitest. Diagramme werden im strikten Sicherheitsmodus von Mermaid gerendert, sodass Klick-Callbacks und Skripte in Diagrammdefinitionen deaktiviert sind, und Inline-HTML im übrigen Dokument wird bereinigt.

Speichern, teilen und exportieren

Das Dokument wird automatisch in deinem Browser gespeichert. Exportieren → .md herunterladen liefert dir die Markdown-Datei zum Einchecken neben deinem Code. Teilen erzeugt einen Link, der das ganze Dokument enthält, sodass eine Kollegin oder ein Kollege es mit bereits gezeichnetem Diagramm öffnet. .html herunterladen exportiert eine eigenständige Seite mit den Diagrammen als SVG, und Drucken / Als PDF speichern erzeugt ein PDF, in dem die Diagramme bei jeder Vergrößerung scharf bleiben. Die Diagrammfarben folgen dem hellen oder dunklen Theme, das du wählst.

Wann dieser Editor passt und wann ein spezialisiertes Werkzeug

Willst du nur an einem einzelnen Diagramm feilen, mit Konfigurationsfeld und Bild-Download, ist ein spezialisiertes Werkzeug wie mermaid.live genau dafür gebaut. Gehört das Diagramm in ein Dokument – eine README, eine Entwurfsnotiz, den Plan eines Agenten, eine Projektdokumentation –, ist ein Markdown-Editor, der Mermaid rendert, der kürzere Weg, weil du das Diagramm im Zusammenhang siehst und das ganze Dokument herunterladen kannst. Neu bei der Syntax drumherum? Sieh dir den Markdown-Spickzettel an oder öffne direkt den Markdown-Editor.