# Mermaid Flussdiagramm-Spickzettel

Boxen, Pfeile und Verzweigungen — das Diagramm, das die meisten mit Mermaid meinen.

## Richtung

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

```mermaid
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.](/diagrams/flowchart/direction.svg)

## Knotenformen

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

```mermaid
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.](/diagrams/flowchart/shapes.svg)

## Runde und kantige Formen

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

```mermaid
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.](/diagrams/flowchart/shapes-round.svg)

## Die vier schrägen Formen

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

```mermaid
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.](/diagrams/flowchart/shapes-slanted.svg)

## Pfeilarten

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

```mermaid
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.](/diagrams/flowchart/edges.svg)

## Eine Kante beschriften

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

```mermaid
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“.](/diagrams/flowchart/edge-labels.svg)

## Verketten und Pfeillänge

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

```mermaid
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.](/diagrams/flowchart/chaining.svg)

## In einen Subgraphen gruppieren

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

```mermaid
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.](/diagrams/flowchart/subgraph.svg)

## Einen Knoten stylen

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

```mermaid
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.](/diagrams/flowchart/styling.svg)

## Markdown in einer Beschriftung

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

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

![Zwei Boxen, eine mit fetter Beschriftung und eine mit Monospace-Code in der Beschriftung.](/diagrams/flowchart/markdown-labels.svg)

## 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.

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

![Ein Flussdiagramm von links nach rechts mit drei Boxen namens „User“, „Server“ und „Database“, jede mit einem kleinen Font-Awesome-Free-Icon vor der Beschriftung: einer Person, einem Serverrack und einer Datenbankwalze.](/diagrams/flowchart/icons.svg)

Icons: Font Awesome Free, CC BY 4.0

## In Mernyx zeichnen

Öffne eine .mmd-Datei, verschiebe einen Knoten auf dem Canvas, und der Quellcode kommt mit. Nativ auf macOS, ohne Browser dazwischen.