Mermaid Editor: Diagramme in Markdown live zeichnen

Mit Mermaid wird aus ein paar Zeilen Text ein Diagramm. Der Markdown Preview Editor arbeitet als Mermaid Editor mit Live-Vorschau: Sie tippen den Diagrammcode in ein Markdown-Dokument, und die Vorschau zeichnet ihn mit. Anders als in einem eigenständigen Diagramm-Tool steht das Diagramm zusammen mit dem Text drumherum in einer Datei – ob Designdokument, README oder Unterrichtsentwurf.

Was ist ein Mermaid-Diagramm?

Ein Mermaid-Diagramm ist eine Grafik, die in reinem Text beschrieben wird. Sie ziehen keine Kästen und Pfeile – Sie schreiben Zeilen wie A --> B, und Mermaid ordnet das Bild für Sie an. Unterstützt werden Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme, Zustands- und Klassendiagramme, Kreisdiagramme, Mindmaps und mehr.

Als Text ist ein Diagramm leicht zu ändern, liegt in der Versionsverwaltung und erscheint in Diffs. GitHub, GitLab, Obsidian und viele Dokumentationswerkzeuge stellen Mermaid dar – derselbe Code funktioniert also überall.

So zeichnen Sie ein Diagramm

1. Editor öffnen. Rufen Sie den Online-Editor auf.
2. Mermaid-Block einfügen. Tippen Sie drei Backticks gefolgt von mermaid oder fügen Sie mit der Schaltfläche Mermaid-Diagramm in der Leiste Erweiterter Editor eine Vorlage ein.
3. Diagramm schreiben. Die Vorschau rechts zeichnet es beim Tippen neu. Ein fehlender Pfeil oder eine fehlende Klammer fällt so sofort auf.
4. Speichern oder weitergeben. Speichern Sie das Dokument als .md, exportieren Sie es als HTML oder drucken Sie es als PDF – die Diagramme sind dabei.

Hier ein erstes Flussdiagramm:

markdown```mermaid
flowchart LR
  A[Idee] --> B{Lohnt es sich?}
  B -- ja --> C[Umsetzen]
  B -- nein --> D[Zurückstellen]
```

Diagrammtypen

Die vollständige Syntax jedes Typs mit Beispielen zum Kopieren finden Sie in unserer Anleitung zu Mermaid-Diagrammen in Markdown.

Warum dieser Editor

• Live-Vorschau. Das Diagramm aktualisiert sich beim Tippen; Syntaxfehler sehen Sie sofort.
• Text und Diagramme zusammen. Erklärung, Formeln und Flussdiagramm stehen in einer Markdown-Datei.
• Privat. Diagramme werden in Ihrem Browser gezeichnet. Ihr Code wird an keinen Server gesendet.
• Kostenlos und Open Source. Kein Konto, keine Begrenzung der Zahl der Diagramme.

Einschränkungen

• Einen separaten PNG- oder SVG-Download für ein einzelnes Diagramm gibt es nicht. Diagramme werden als Teil des Dokuments exportiert – im HTML-Export und im PDF. Ein einzelnes Bild können Sie mit den offiziellen Mermaid-Tools exportieren.
• Eigene Themes und Stile für einzelne Knoten sind nur begrenzt möglich: Diagramme haben ein schlichtes Standard-Aussehen, das zum hellen oder dunklen Design passt.
• Diagramme werden als Code geschrieben; visuelles Bearbeiten per Drag & Drop gibt es nicht.

Sie möchten eine vorhandene Markdown-Datei mit Diagrammen ansehen? Nutzen Sie den Markdown Viewer oder gehen Sie zurück zur Startseite des Markdown-Editors.