Flowchart
Bilden Sie jeden Prozess, jede Entscheidung und jeden Algorithmus ab
Was ist ein Flowchart?
Ein Flowchart zeigt die Schritte eines Prozesses und die Entscheidungen dazwischen. Es ist das universellste Diagramm: Onboarding-Abläufe, Algorithmen, Freigabeketten, Troubleshooting-Anleitungen — wo es Schritte und Entscheidungen gibt, kann ein Flowchart sie zeigen.
Flowcharts tauchen überall dort auf, wo ein Prozess abgestimmt werden muss, bevor er gebaut wird: RFCs, Runbooks, Onboarding-Dokumente, Support-Skripte. Ihre Stärke sind Verzweigungen — jeder Weg, den eine Anfrage nehmen kann, auch die, mit denen niemand gerechnet hat. Ihre Schwäche sind Zeit und Zuständigkeit: Ein Flowchart sagt, was als Nächstes passiert, nie wer es tut oder wie lange es dauert. Legen Sie pro Team ein Subgraph an — oder wechseln Sie den Diagrammtyp.
Live-Beispiel
flowchart TD
A([Start]) --> B{Payment valid?}
B -->|Yes| C[Reserve stock]
B -->|No| D[Show error]
C --> E{In stock?}
E -->|Yes| F[Confirm order]
E -->|No| G[Notify customer]
F --> H([Done])
D --> H
G --> HWann einsetzen
Häufige Fehler
Ein Knoten namens end bricht das Parsing
Das Wort end schließt ein Subgraph, deshalb ist ein Knoten mit dieser ID ein Parse-Fehler und keine Warnung. Geben Sie dem Knoten eine andere ID und schreiben Sie das Wort in die Beschriftung: done([End]).
Klammern in Beschriftungen ohne Anführungszeichen
A[Pay (card)] schlägt fehl, weil Mermaid die innere Klammer als weiteres Formzeichen liest. Setzen Sie die ganze Beschriftung in doppelte Anführungszeichen — A["Pay (card)"] —, das deckt auch Anführungszeichen, Rauten und Semikolons ab.
Eine kreuzende Kante überschreibt die Subgraph-Richtung
Ein direction LR im Subgraph wird ignoriert, sobald eine Kante an einem seiner Knoten beginnt oder endet: Der Rahmen fällt auf die Richtung des übergeordneten Graphen zurück. Richten Sie die Kante stattdessen auf die ID des Subgraphs, dann bleibt die innere Richtung erhalten.
Grundlegende Syntax
flowchart TD
A[Rectangle] --> B{Decision}
B -->|Yes| C([Rounded])
B -->|No| D[(Database)]flowchart LRDie erste Zeile legt die Layout-Richtung fest: TD oder TB von oben nach unten, LR von links nach rechts, BT und RL umgekehrt. Lange Ketten lesen sich als LR besser.
B -->|Yes| C B -.->|timeout| DEine Beschriftung zwischen Pipes erklärt, warum ein Zweig genommen wird. Gepunktete Pfeile markieren Ausnahmepfade, dicke Pfeile in der Schreibweise ==> den Normalfall.
A["Pay (card)"] --> B{{Route}}Die Klammern bestimmen die Form: [] Rechteck, {} Entscheidung, () abgerundet, {{}} Sechseck, [()] Datenbank. Setzen Sie jede Beschriftung mit Klammern oder anderer Mermaid-Interpunktion in Anführungszeichen.
subgraph payments [Payment service] direction LR P1 --> P2 endEin Subgraph zeichnet einen beschrifteten Rahmen um zusammengehörige Knoten — ein Service, ein Team, eine Phase. Eine eigene direction-Zeile lässt diesen Rahmen quer fließen, während die Seite nach unten läuft.
Fragen zu diesem Diagramm
Wann sollte ich ein Flowchart statt eines Sequenzdiagramms verwenden?
Verwenden Sie ein Flowchart für die Logik eines Prozesses (Schritte und Entscheidungen). Verwenden Sie ein Sequenzdiagramm, wenn mehrere Akteure oder Systeme im Zeitverlauf Nachrichten austauschen.
Kann die KI ein Flowchart aus einer Textbeschreibung generieren?
Ja — beschreiben Sie den Prozess in natürlicher Sprache („Nutzer registriert sich, bestätigt seine E-Mail, dann …“) und Mermaid Studio generiert das vollständige Flowchart, bereit zur Bearbeitung.
Rendert GitHub Mermaid-Flowcharts in einer README?
Ja. Legen Sie den Code in einen Codeblock mit der Auszeichnung mermaid, und GitHub rendert ihn in READMEs, Issues und Pull Requests; GitLab und Notion ebenso. Für Tools ohne native Unterstützung exportieren Sie SVG oder PNG.
Warum ordnet Mermaid meine Knoten anders an, als ich es vorgesehen habe?
Das Layout wird berechnet, nicht geschrieben — die Syntax kennt keine Koordinaten. Beeinflussen lässt es sich über die Richtung, über Subgraphs, über die Reihenfolge der Kanten-Deklarationen oder über eine unsichtbare Verbindung (A ~~~ B), die einen Knoten nach unten drückt.
Was ist in Mermaid der Unterschied zwischen graph und flowchart?
Beides wird in v11 weiterhin geparst. graph ist das ursprüngliche Schlüsselwort; flowchart adressiert den neueren Renderer und ist das, worauf sich die Dokumentation und die neuen Formen beziehen. Für alles Neue nehmen Sie flowchart.
Wie färbe ich einzelne Kästen in einem Flowchart ein?
Zwei Wege: style A fill:#eef,stroke:#66f für einen einzelnen Knoten oder classDef warn fill:#fee gefolgt von class B,C warn, um einen Stil auf mehrere anzuwenden. Beides steht im Quelltext, die Farben überstehen also den PNG- und SVG-Export.
Flowchart oder ein anderer Diagrammtyp?
Flowchart oder Zustandsdiagramm?
Fragen Sie sich, was die Kästen sind. Sind es Aktionen — Verben, die jemand ausführt —, ist das Flowchart richtig. Sind es Zustände, in denen dasselbe Objekt auf ein Ereignis wartet, nehmen Sie ein Zustandsdiagramm. Der Lebenszyklus einer Bestellung besteht aus Zuständen; der Freigabeprozess darum herum ist ein Flowchart.
Flowchart oder Mindmap?
Eine Mindmap ist ein strenger Baum: eine Wurzel, ein Elternknoten pro Knoten, keine Beschriftungen an den Zweigen, keine Zyklen. Sobald zwei Zweige zusammenlaufen müssen oder an einem Pfeil eine Bedingung stehen soll, sind Sie der Mindmap entwachsen und brauchen ein Flowchart.
Erstellen Sie jetzt Ihr Flowchart
Beschreiben Sie es in natürlicher Sprache — die KI schreibt den Mermaid-Code für Sie.
Mermaid Studio öffnen