So schreibst du ein Mermaid-Flussdiagramm:eine Richtung, Knoten und Pfeile.

Richtung

Die erste Zeile nennt den Diagrammtyp und die Richtung. flowchart und das ältere graph funktionieren beide.

• TD oder TB: von oben nach unten
• BT: von unten nach oben
• LR: von links nach rechts
• RL: von rechts nach links

Nimm LR für einen kurzen Ablauf, der in die Seitenbreite passt, und TD für einen längeren.

Knotenformen

Ein Knoten ist eine ID, optional gefolgt von seinem Text in Klammern. Die Klammern bestimmen die Form:

flowchart LR
    a[Rectangle]
    b(Rounded)
    c([Stadium])
    d[[Subroutine]]
    e[(Database)]
    f((Circle))
    g{Decision}
    h{{Hexagon}}
    i[/Parallelogram/]

Ein Knoten ohne Klammern zeigt nur seine ID. Du kannst einen Knoten später allein über seine ID erneut nennen, Form und Text schreibst du also nur einmal.

Verbindungen und Beschriftungen

Verbindungen verknüpfen zwei Knoten. Die Form des Pfeils zeigt die Art der Verbindung:

flowchart LR
    A --> B
    B --- C
    C -.-> D
    D ==> E
    E -->|label| F
    F -- text --> G

• --> ein Pfeil, --- eine Linie ohne Pfeilspitze
• -.-> ein gepunkteter Pfeil, ==> ein dicker
• -->|label| oder -- label --> setzt Text auf die Verbindung
• A --> B & C verbindet einen Knoten mit mehreren, und A --> B --> C verkettet Verbindungen

Füge Bindestriche hinzu, um eine Verbindung zu verlängern, zum Beispiel ---->, wenn ein Knoten mehr Platz braucht.

Subgraphen

Ein Subgraph fasst Knoten in einem beschrifteten Kasten zusammen. Er beginnt mit subgraph und endet mit end:

flowchart TD
    subgraph client [Client]
        A[Browser] --> B[App]
    end
    subgraph server [Server]
        C[API] --> D[(Database)]
    end
    B --> C

Das Wort in Klammern ist der Titel, und das Wort davor ist die ID, auf die du verlinken kannst. Ein Subgraph kann eine eigene Zeile direction LR enthalten, die Richtung wird aber ignoriert, wenn ein Knoten darin mit etwas außerhalb verbunden ist.

Ein vollständiges Beispiel

Alles zusammen ergibt einen kleinen Release-Prozess mit einer Entscheidung, einer Schleife zurück und einem gruppierten Schritt:

flowchart TD
    A([Start]) --> B[Write the change]
    B --> C{Tests pass?}
    C -->|No| B
    C -->|Yes| D[Open a pull request]
    subgraph review [Review]
        D --> E{Approved?}
        E -->|No| B
    end
    E -->|Yes| F[(Merge)]

Lies es von oben: Die Stadionform markiert den Start, die Rauten sind Fragen, beschriftete Pfeile sind die Antworten, und der Kasten um zwei Knoten ist das Review. Wenn du jede Entscheidung als Frage und jeden Pfeil als ihre Antwort benennst, ist ein Flussdiagramm auch ohne Erklärung lesbar.

Kommentare und Stile

Eine Zeile, die mit %% beginnt, ist ein Kommentar und wird nicht gezeichnet. Um Knoten einzufärben, definiere eine Klasse und wende sie an:

flowchart TD
    %% the happy path
    A[Start]:::good --> B[Done]:::good
    classDef good fill:#d4f4dd,stroke:#2d7a46

Halte das Styling schlicht. Die meisten Flussdiagramme lesen sich mit weniger Farben besser, und Stile können im hellen und im dunklen Erscheinungsbild verschieden aussehen.

Häufige Fehler

• Das Wort end in Kleinbuchstaben als Knotentext macht das Diagramm kaputt. Schreibe End oder setze den Text in Anführungszeichen.
• Eine Knoten-ID, die mit o oder x beginnt, direkt nach einer Verbindung, etwa A---oB, wird als Kreis- oder Kreuz-Verbindung gelesen. Füge ein Leerzeichen ein oder schreibe sie groß.
• Sonderzeichen in einer Beschriftung. Klammern, runde Klammern und Doppelpunkte brauchen doppelte Anführungszeichen: A["Save (draft)"].
• Keine erste Zeile. Ohne flowchart TD wird nichts gezeichnet.
• Zu viele Knoten. Ein Flussdiagramm mit dreißig Kästen ist schwer lesbar. Teile es auf oder nimm Subgraphen.

Schlägt ein Diagramm fehl, zeigt Mermaid eine Fehlermeldung, und der Text bleibt zum Korrigieren in deiner Datei.

Zeichnen lassen

GitHub zeichnet Mermaid-Blöcke in Markdown-Dateien, und DotMD auch: offline, im hellen oder dunklen Erscheinungsbild passend zur Seite. Im Editor setzt Insert → Diagram ein funktionierendes Flussdiagramm ins Dokument, und die Vorschau zeichnet beim Tippen neu. Dieselbe Anleitung behandelt Sequenz-, Klassen-, Zustands-, ER- und Gantt-Diagramme. Zur Fence-Syntax selbst siehe Codeblöcke in Markdown.

Fragen zu Mermaid-Flussdiagrammen

Weitere Fragen