Ein Mermaid-Flussdiagramm ist ein Textmodell aus Knoten und Kanten. flowchart TD verläuft von oben nach unten, flowchart LR von links nach rechts. Wählen Sie die Richtung nach der erzählten Geschichte, nicht nur nach dem freien Platz.
Knotenidentität und Beschriftung trennen
Verwenden Sie eine kurze stabile ID und lesbaren Text in Klammern:
flowchart LR
request[Anfrage empfangen] --> validate{Eingabe gültig?}
validate -->|Ja| process[Bestellung verarbeiten]
validate -->|Nein| reject[Fehler zurückgeben]Kanten verwenden validate; die Beschriftung kann sich ändern, ohne Verbindungen umzuschreiben. Stabile IDs erleichtern auch Styling und Diff-Reviews.
Entscheidungszweige beschriften
Eine Raute ohne Kantenbeschriftung zwingt zum Raten. Verwenden Sie -->|Beschriftung| und konsistente Begriffe. true/false, ja/nein und Erfolg/Fehler für gleichartige Entscheidungen zu mischen erzeugt unnötige Denkarbeit.
Subgraphen für Grenzen verwenden
flowchart LR
subgraph Browser
edit[Quelle bearbeiten] --> render[Diagramm rendern]
end
subgraph LocalStorage
draft[(Entwurf)]
end
edit --> draftGrenzen sind sinnvoll für Verantwortung, Vertrauen, Deployment oder Lebenszyklus. Nicht jedes Knotenpaar benötigt einen Subgraphen.
Häufige Parser-Überraschungen vermeiden
Beginnen Sie minimal und ergänzen Sie Anweisungen einzeln. Setzen Sie problematische Beschriftungen in Anführungszeichen. Das kleingeschriebene end hat eine Sonderrolle; verwenden Sie eine andere Bezeichnung. Auch o und x direkt nach bestimmten Kanten können spezielle Enden auswählen.
Für Änderungen entwerfen
Trennen Sie Systemübersicht und Detailabläufe, reduzieren Sie Kreuzungen und halten Sie die Abstraktion konsistent. Der lokale Mermaid-Editor prüft genau die im Projekt gebündelte Version.