Mermaid Flussdiagramm-Spickzettel

Richtung

Die erste Zeile bestimmt den Fluss: TD und TB sind dasselbe, LR und RL laufen seitlich.

flowchart LR
  A[Start] --> B[Middle] --> C[End]

Ein Flussdiagramm von links nach rechts mit drei Boxen namens „Start“, „Middle“ und „End“, verbunden durch Pfeile.

Knotenformen

Die Klammern, die du tippst, sind die Form, die du bekommst. Das sind die fünf, die Mernyx als gewöhnliche Boxen zeichnet.

flowchart LR
  A[Rectangle] --> B(Rounded)
  B --> C([Stadium])
  C --> D[[Subroutine]]
  D --> E[(Database)]

Ein Flussdiagramm aus fünf verbundenen Knoten, jeder in einer anderen Form: ein Rechteck, eine abgerundete Box, ein Stadium, eine Unterroutine und eine Datenbankwalze.

Runde und kantige Formen

Der Rest des gewöhnlichen Satzes: Kreise, die Entscheidungsraute, das Sechseck und die schräge Form.

flowchart LR
  A((Circle)) --> B(((Double circle)))
  B --> C{Diamond}
  C --> D{{Hexagon}}
  D --> E>Asymmetric]

Ein Flussdiagramm aus fünf verbundenen Knoten, gezeichnet als Kreis, Doppelkreis, Raute, Sechseck und asymmetrische Form.

Die vier schrägen Formen

Parallelogramme und Trapeze. Die Schrägstriche neigen die Form nach rechts, Backslashes nach links.

flowchart LR
  A[/Parallelogram/] --> B[\Alternate\]
  B --> C[/Trapezoid\]
  C --> D[\Inverted/]

Vier Knoten eines Flussdiagramms in einer Reihe: ein nach rechts geneigtes Parallelogramm, ein nach links geneigtes, ein Trapez und ein umgekehrtes Trapez.

Pfeilarten

Vier Wege, zwei Knoten zu verbinden: durchgezogen, gepunktet, offen und dick.

flowchart LR
  A[Solid] --> B[Target]
  A -.-> C[Dotted]
  A --- D[Open]
  A ==> E[Thick]

Ein Knoten links, verbunden mit vier Knoten rechts durch einen durchgezogenen Pfeil, einen gepunkteten Pfeil, eine offene Linie und einen dicken Pfeil.

Eine Kante beschriften

Zwei Schreibweisen. Die Pipe-Form liest sich bei langen Beschriftungen besser.

flowchart LR
  A[Start] -->|Yes| B[Continue]
  A -- No --> C[Stop]

Ein Knoten namens „Start“ mit zwei ausgehenden Pfeilen: einer namens „Yes“ führt zu „Continue“, einer namens „No“ zu „Stop“.

Verketten und Pfeillänge

Knoten lassen sich in einer Zeile verketten, und zusätzliche Bindestriche schieben einen Knoten weiter weg.

flowchart LR
  A[One] --> B[Two] --> C[Three]
  B ----> D[Further away]

Eine Kette von links nach rechts aus drei Boxen, mit einer vierten Box weiter rechts, verbunden durch einen längeren Pfeil.

In einen Subgraphen gruppieren

Ein Subgraph ist eine beschriftete Box um die Knoten, die darin eingerückt sind.

flowchart TB
  subgraph Backend
    API[API] --> DB[(Database)]
  end
  subgraph Frontend
    UI[UI] --> API
  end

Zwei gruppierte Boxen, „Backend“ und „Frontend“. „Backend“ enthält eine API-Box, die mit einer Datenbankwalze verbunden ist, „Frontend“ eine UI-Box, die mit der API verbunden ist.

Einen Knoten stylen

style ändert einen Knoten; classDef benennt einen Stil, den du wiederverwenden kannst.

flowchart LR
  A[Normal] --> B[Highlighted]
  style B fill:#ee421d,color:#ffffff,stroke:#b32c0c
  classDef quiet fill:#f0f0f3,stroke:#d4d4d8
  class A quiet

Zwei Boxen, verbunden durch einen Pfeil. Die rechte Box ist korallfarben gefüllt, die linke hellgrau.

Markdown in einer Beschriftung

Umschließt du die Beschriftung mit Backticks, darf der Text fett, kursiv oder Code sein.

flowchart LR
  A["`**Bold** text`"]
  B["``inline code``"]

Zwei Boxen, eine mit fetter Beschriftung und eine mit Monospace-Code in der Beschriftung.

Icons

Font Awesome Free, auf die Mermaid-Art geschrieben: Der Name steht in der Beschriftung, und Mernyx zeichnet die Glyphe. Ein unbekanntes Icon lässt eine Lücke in der Breite eines Icons, statt das Diagramm scheitern zu lassen.

flowchart LR
  A([fa:fa-user User]) --> B([fa:fa-server Server])
  B --> C([fa:fa-database Database])

Diagramm vergrößern

Icons: Font Awesome Free, CC BY 4.0