Mermaid Flussdiagramm: Flussdiagramme Erstellen

Mermaid Flussdiagramm Syntax

Flussdiagramme sind der am häufigsten verwendete Mermaid Diagrammtyp. Sie bilden Prozesse, Entscheidungsbäume und Systemabläufe mit Knoten ab, die durch Kanten verbunden sind. Die Syntax liest sich wie eine Graphenbeschreibung: defniere Knoten mit ihren Formen, verbinde sie mit Pfeilen und gruppiere sie optional in Untergraphen.

Richtung

Die erste Zeile definiert die allgemeine Flussrichtung:

flowchart TD    %% oben nach unten (Standard)
flowchart LR    %% links nach rechts
flowchart RL    %% rechts nach links
flowchart BT    %% unten nach oben

Wähle LR für horizontale Prozessabläufe (Zeitleisten, Pipelines). Wähle TD für vertikale Hierarchien (Organigramme, Entscheidungsbäume). Du kannst Richtungen innerhalb von Untergraphen mischen.

Knotenformen

Knoten-IDs müssen innerhalb des Diagramms eindeutig sein. Der Text in den Klammern ist die angezeigte Beschriftung. Wenn du Sonderzeichen in der Beschriftung benötigst, setze sie in Anführungszeichen: A["Label with (parens)"].

Kantentypen

A --> B        %% durchgezogener Pfeil
A --- B        %% durchgezogene Linie, kein Pfeil
A -.-> B       %% gepunkteter Pfeil
A -.- B        %% gepunktete Linie
A ==> B        %% dicker Pfeil
A === B        %% dicke Linie
A -->|label| B %% Pfeil mit Beschriftung
A -- text --> B %% alternative Beschriftungssyntax

Untergraphen

Gruppiere verwandte Knoten visuell:

flowchart LR
    subgraph Backend
        direction TB
        API --> DB
        API --> Cache
    end
    subgraph Frontend
        direction LR
        UI --> API
    end

Untergraphen können ineinander verschachtelt werden. Jeder Untergraph kann seine eigene Richtung mit direction überschreiben. Kanten zwischen Knoten in verschiedenen Untergraphen funktionieren normal.

Styling

Wende Stile auf einzelne Knoten oder Kanten mit der style Anweisung an:

flowchart LR
    A[Start] --> B[Ende]
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#33f

Für Klassen basiertes Styling verwende classDef und class:

flowchart LR
    classDef important fill:#f96;
    A[Kritisch]:::important --> B[Normal]

Brauchst du Hilfe bei der Erstellung von Sequenzdiagrammen? Sieh dir den Sequenzdiagramm Generator an oder verwende den Mermaid Editor für alle Diagrammtypen.