Syntax-Feature
Mermaid-Diagramme in Markdown
Mermaid macht Diagramme direkt im Markdown möglich. Du beschreibst die Logik in Mermaid-Syntax, der Renderer erzeugt SVG. GitLab unterstützt es voll, GitHub nur in Issues und auf github.com/README.md, Obsidian out-of-the-box.
Was ist das?
Mermaid ist eine JavaScript-Library, die Text-basierte Diagramm-Beschreibungen in SVG-Diagramme rendert. Eingebettet in Markdown via Code-Block mit `mermaid` als Sprache.
Beispiele
Flowchart
```mermaid
graph TD;
A[Start] --> B{Bedingung?};
B -- Ja --> C[Aktion 1];
B -- Nein --> D[Aktion 2];
```Sequence-Diagramm
```mermaid
sequenceDiagram
User->>Server: Request
Server->>DB: Query
DB-->>Server: Daten
Server-->>User: Response
```Gantt-Chart
```mermaid
gantt
title Projekt-Plan
section Sprint 1
Foundation :2026-05-29, 7d
section Sprint 2
Editor :2026-06-05, 7d
```Unterstützt von
NICHT unterstützt von
Praxis-Tipps
- GitHub unterstützt Mermaid in Issue-Bodies, PR-Beschreibungen und auf github.com gerenderten README.md-Dateien (seit 2022).
- Mermaid-Syntax ist eigenes Mini-Format. Dokumentation auf mermaid.js.org.
- Pandoc kann Mermaid via `--filter` einbinden (mermaid-filter-Plugin).
- Unser Editor rendert Mermaid live nach 150ms Debounce.
Häufige Fragen
Welche Diagramm-Typen kann Mermaid?
Flowchart, Sequence, Class, State, ER, Gantt, Pie, Git-Graph, User-Journey, Quadrant-Chart, Mindmap, Timeline, Block-Diagram. Vollständig in mermaid.js.org-Docs.
Funktioniert Mermaid in github.com gerendertem README.md?
Ja, seit 2022. ```mermaid-Code-Blöcke werden im Web-Frontend zu SVG gerendert.
Was rendert unser Editor?
Wir laden mermaid.js lazy beim erstem ```mermaid-Block. Output ist SVG, eingebettet in Preview.
Im Editor ausprobieren
Live-Vorschau, Auto-Save, kein Account nötig.
Zum Editor