INHALTSVERZEICHNIS
INHALTSVERZEICHNIS
Mermaid-Syntax für Flussdiagramme: der vollständige Leitfaden mit Beispielen
Wichtigste Erkenntnisse: Ein Mermaid‑Flussdiagramm ist ein Diagramm, das du als Text schreibst, statt es von Hand zu zeichnen. Du tippst zum Beispiel A --> B, und Mermaid rendert zwei verbundene Kästen. Dieser Leitfaden deckt alle Teile der Syntax ab, von grundlegenden Knotentypen über Styling und Klick‑Events bis hin dazu, wie du den Code in ein echtes, bearbeitbares Diagramm in Miro verwandelst.
Dein Flussdiagramm ist schon veraltet
du weißt, wie's läuft. du verbringst zwanzig Minuten in einem Diagramm‑Tool, um die Kästchen auszurichten, die Pfeile so anzupassen, dass sie sich nicht überlappen, und die Farben bewusst abzustimmen. du exportierst es, lädst es ins Wiki und machst weiter. Drei Wochen später hat sich der Prozess geändert, und niemand hat die Grafik aktualisiert. Jetzt ist die „Quelle der Wahrheit“ ein Screenshot von etwas, das seit dem letzten Sprint nicht mehr stimmt.
Genau das ist das Problem, wenn man Diagramme als Bilder statt als Code behandelt. Ein Bild lässt sich nicht per Diff vergleichen, nicht versionieren und nicht von einem KI‑Agenten erstellen, der gerade deine Codebase gelesen hat. Ein Mermaid‑Flussdiagramm kann das.
Was ist ein Mermaid‑Flussdiagramm?
Ein Mermaid‑Flussdiagramm ist ein Flussdiagramm, das du mit einer reinen Textsyntax statt über ein Drag‑and‑Drop‑Canvas definierst. du schreibst ein paar Zeilen, die deine Knoten und ihre Verbindungen beschreiben, und Mermaid erzeugt das Diagramm automatisch – inklusive Layout, Pfeilen und Formen.
Es ist Teil von Mermaid, einer Open‑Source-Diagrammsyntax, die auch Sequenzdiagramme, Klassendiagramme, Zeitachsen und viele weitere Diagrammtypen abdeckt.
Mermaid hat in letzter Zeit neuen Auftrieb erhalten – aus einem einfachen Grund: KI‑Modelle verfassen die Mermaid‑Syntax fließend. Wenn du einen KI‑Agenten bittest, dein System zu diagrammieren, ist die Wahrscheinlichkeit groß, dass er dir Mermaid‑Syntax liefert, weil er dieses Format am meisten trainiert hat. Text ist für ein Sprachmodell außerdem leichter zu verarbeiten als ein zweidimensionales Bild, sodass ein Agent eine präzise Änderung an deinem Diagramm vornehmen kann, statt das Ganze komplett neu zu zeichnen.
Grundsyntax: Richtung und Deklaration
Jedes Mermaid-Flussdiagramm beginnt mit einem Richtungs-Keyword. Diese eine Zeile legt fest, ob dein Diagramm von oben nach unten oder von links nach rechts gelesen wird, und ist das erste, das du jedes Mal schreibst.
- TD oder TB: von oben nach unten
- BT: von unten nach oben
- LR: von links nach rechts
- RL: von rechts nach links
flowchart TD A --> B B --> C style A fill:#fff6b6 style B fill:#fff6b6 style C fill:#fff6b6
flowchart LR Start --> Medium Medium --> End style A fill:#fff6b6 style B fill:#fff6b6 style C fill:#fff6b6Benannte, aussagekräftige Knoten (Start, Medium, End) wirken deutlich leserlicher als einzelne Buchstaben, sobald dein Diagramm mehr als ein paar Schritte umfasst. Verwende Buchstaben für schnelle Skizzen und wechsle zu richtigen Labels, wenn du das Diagramm teilen möchtest.
Knotenformen: Die Klammer-Syntax bestimmt die Form
Die Klammern um den Text deines Knotens legen fest, welche Form der Knoten annimmt. Du musst keine Form aus einem Menü wählen. Du tippst einfach die richtigen Symbole ein, und Mermaid erledigt den Rest.
flowchart TD A[Rectangle] B(Rounded) C([Stadium]) D[[Subroutine]] E[(Cylindrical)] F((Circle)) G>Asymmetric]Einige dieser Formen entsprechen bestimmten Einsatzbereichen, die du kennen solltest. Verwende ein Rechteck [Text] für einen normalen Prozessschritt, ein abgerundetes Rechteck ([Text]) für einen Start- oder Endpunkt und eine Subroutine [[Text]], wenn ein Knoten tatsächlich ein Aufruf zu einem separaten, definierten Prozess ist. Verwende einen Zylinder [(Text)], wenn du eine Datenbank oder einen Datenspeicher darstellst, und einen Kreis ((Text)) für einen einzelnen, abgeschlossenen Punkt im Ablauf.
Mermaid deckt noch ein paar Formen ab, die du kennen solltest, darunter die Raute für Entscheidungen und das Sechseck für Vorbereitungsschritte. Sonderzeichen wie Schrägstriche oder Fragezeichen brauchen Anführungszeichen um das Label:
flowchart TDH{Rhombus} I{<!-- -->{Hexagon}} J["s3/"] K["s4!"] L(("s5?"))Links und Pfeile: So verbindest du deine Knoten
Ein Pfeil zeigt, wie ein Schritt zum nächsten führt – und Mermaid bietet dir mehrere Varianten, je nachdem, wie stark oder optional diese Verbindung ist.
flowchart tdA --> B %% solid arrowA --- B %% solid lineA -.-> B %% dottedA ==> B %% thickA -->|label| B %% with textA -- text --> B %% alt labelstyle A fill:#e7e7e7style B fill:#c6dcff linkStyle 5 stroke:#bd0a0a linkStyle 4 color:#bd0a0a,stroke:#6631d7Jede Variante signalisiert etwas anderes: --> ist ein normaler durchgezogener Pfeil, --- ist eine durchgezogene Linie ohne Pfeilspitze für eine lockerere Verbindung, -.-> ist ein gepunkteter Pfeil für optionale oder asynchrone Pfade, und ==> ist ein dicker Pfeil, um einen kritischen Pfad zu markieren. Um einen Pfeil zu beschriften, verwendest du entweder -->|label| oder -- label -->. Beides bewirkt dasselbe. Mit linkStyle kannst du eine einzelne Verbindung einfärben, indem du einen Pfeil über seine Position im Diagramm (0 für den ersten, 1 für den zweiten usw.) ansprichst, statt alle Pfeile auf dem Board.
Du kannst auch mehrere Knoten in einer einzigen Zeile verbinden, statt jedes Paar einzeln auszuschreiben:
flowchart tdA & B --> C & D %% multistyle A fill:#fff6b6 style B fill:#c6dcff style C fill:#edfaf2 style D fill:#ffc6c6Diese eine Zeile erledigt dieselbe Arbeit wie vier einzelne Pfeilanweisungen. Klein, aber sie hält den Code eines überladenen Diagramms gut lesbar.
Subgraphen: Gruppierung und Verschachtelung
Echte Systeme haben Abschnitte: ein Frontend, ein Backend, ein Zahlungsschritt, der in Wirklichkeit aus drei Schritten besteht, die sich als einer ausgeben. Mit Subgraphen kannst du zusammenhängende Knoten in eine Box packen und dieser Box sogar eine eigene interne Flussrichtung geben.
flowchart TB subgraph frontend direction LR UI --> API end subgraph backend API --> DB end frontend --> backendZwei Dinge, die du dir merken solltest. Erstens: Die Richtung innerhalb eines Subgraphs überschreibt die Richtung des übergeordneten Flussdiagramms, sodass dein Frontend von links nach rechts laufen kann, während das gesamte Diagramm von oben nach unten verläuft. Zweitens lässt sich ein Subgraph wie jeder andere Knoten verlinken, deshalb funktioniert oben frontend --> backend, obwohl beide Seiten Boxen voller anderer Boxen sind.
Theming und init‑Direktiven
Wenn du möchtest, dass die Farben eines Flussdiagramms zu deiner Marke, zur Schwere eines Vorfalls oder einfach zu deinem Geschmack passen, kannst du das mit einer init‑Direktive festlegen, bevor du auch nur einen einzigen Knoten zeichnest. Sie muss in die allererste Zeile deines Diagramms.
%%{init: { "theme": "base", "themeVariables": { "primaryColor": "#ADF0C7", "primaryTextColor": "#067429", "edgeLabelBackground": "#FFFEEE", "lineColor": "#36352F" }}}%%flowchart LR A[Start] --> B{Choice} B -->|yes| C[Done] B -->|no| D[Retry]Mermaid bietet fünf eingebaute Themes: default, dark, forest, neutral und base. Nur base ermöglicht Zugriff auf das vollständige themeVariables‑Objekt, sodass du bei eigenen Farben statt einer voreingestellten Palette mit diesem Theme anfangen solltest.
Interaktion: Klick‑Events und Callbacks
Ein Flussdiagramm muss nicht statisch sein. Du kannst einen Knoten so verknüpfen, dass er einen Link öffnet, eine JavaScript‑Funktion ausführt oder beim Überfahren mit der Maus einen Tooltip anzeigt – praktisch, wenn dein Diagramm gleichzeitig als Dokumentation dient.
flowchart TD A[Visit Miro] B[Hover Tooltip] C[Open Docs] click A "https://miro.com" _blank click B callback "Tooltip" click C href "/docs" "Open docs"%% JS callback%% <script>%% const callback = (id) =>%% alert('Clicked ' + id);%% </script>Knoten A öffnet einen Link in einem neuen Tab. Knoten B löst eine JavaScript-Funktion namens callback aus und zeigt beim Überfahren den Text „Tooltip“ an. Knoten C öffnet einen relativen Link im aktuellen Tab und hat eigenen Hover-Text. Dieses Muster siehst du am häufigsten in interner Dokumentation, wo ein Diagrammknoten direkt auf das Runbook oder das Ticket verweist, das er repräsentiert.
Styling: Farben, Klassen und Markdown‑Labels
Einmalige Styles funktionieren bei einem einzelnen Knoten, werden aber schnell repetitiv. Mit classDef kannst du einen Stil einmal definieren und im ganzen Diagramm wiederverwenden – das wird wichtig, sobald dein Flussdiagramm mehr als fünf oder sechs Knoten hat.
flowchart LR A[Node A] B[Node B] C[Node C] D[Node D] --> E[Node E] %% Inline style style A fill:#f9f,stroke:#333,stroke-width:2px %% Reusable class definition classDef error fill:#fdd,stroke:#c00,color:#900 classDef success fill:#dfd,stroke:#0a0 %% Assign class class A,B error class C success %% Shorthand class assignment D:::success --> E:::errorDu kannst eine Klasse auf zwei Arten zuweisen: mit class A,B error in einer eigenen Zeile oder inline mit der Kurzschreibweise D:::success. Beides bewirkt dasselbe. Wähle die Variante, die deinen Code am besten lesbar hält.
Für reichhaltigere Labels unterstützt Mermaid außerdem einfache Markdown‑Formatierung innerhalb von Knoten und Kanten, solange du zuerst HTML‑Labels deaktivierst:
---config: htmlLabels: false---flowchart LRsubgraph "One" a("`The **cat** in the hat`") -- "edge label" --> b{<!-- -->{"`The **dog** in the hog`"}}endsubgraph "`**Two**`" c("`The **cat** in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")endAlles zusammen: Ein vollständiges Beispiel
Dieser Login‑Ablauf verwendet die meisten der oben behandelten Elemente in einem Diagramm: Formen, Untergraphen, Styling‑Klassen, eine Wiederholschleife und ein Klick‑Ereignis.
flowchart TD Start((Start)) --> Login[/Enter creds/] Login --> Check{Valid?} Check -->|yes| Home[Dashboard]:::ok Check -->|no| Err[Show error]:::bad Err -.retry.-> Login Home ==> Logout([Logout]) subgraph auth direction LR Login --> Check end classDef ok fill:#dfd,stroke:#0a0 classDef bad fill:#fdd,stroke:#c00 click Home "/dashboard" _selfSiehst du, wie wenig davon neu ist? Es sind dieselben Formen, Pfeile, Subgraphen und das classDef‑Muster aus den vorherigen Abschnitten, kombiniert zu etwas, das du in der Praxis verwenden würdest. Die einzige neue Form hier ist Login[/Enter creds/], ein Parallelogramm, das laut Konvention von Mermaid oft für Eingabeschritte verwendet wird. Die wahre Kunst beim Schreiben von Mermaid besteht nicht darin, jedes Symbol auswendig zu lernen. Sondern darin, zu wissen, welche wenigen Muster den Großteil deiner Diagramme abdecken.
Alle Syntaxbeispiele findest du in unserem Mermaid‑Flussdiagramm‑Cheatsheet.
Wie Mermaid‑Flussdiagramme mit Miro noch besser werden
Den Code zu schreiben ist nur die halbe Miete. Jemand muss den Code trotzdem prüfen, Entscheidungen hinterfragen und ihn aktualisieren, wenn sich der Prozess ändert. Genau hier ist Mermaid früher meist an seine Grenzen gestoßen: du renderst ein Diagramm, fügst irgendwo einen Screenshot ein und die Verbindung zwischen Code und Bild ist sofort verloren, sobald jemand daran etwas ändert.
Miro schließt diese Lücke mit Structured Diagrams with Mermaid, derzeit in der Betaversion. Füge Mermaid‑Syntax auf ein Miro‑Board ein oder bitte einen KI‑Agenten wie Claude Code, ein Diagramm direkt aus deiner Codebase zu erstellen, und es wird als echte, bearbeitbare Miro‑Formen dargestellt, nicht als statisches Bild. Der Mermaid‑Code bleibt die Quelle der Wahrheit: Bearbeite das Diagramm visuell und der zugrunde liegende Code aktualisiert sich entsprechend, sodass beide nie auseinanderdriften.
Das ist aus mehreren Gründen wichtig. Dein Team kann gemeinsam am Diagramm arbeiten, statt nur daran vorbeizuarbeiten: direkt an einem Knoten kommentieren, statt in Slack einen Neben-Thread zu starten, und alle bleiben im Kontext der eigentlichen Entscheidung. Da das Diagramm unter der Haube weiterhin Mermaid ist, kann ein KI-Agent es auslesen, gezielt bearbeiten oder aus den Kommentaren deines Teams ein Dokument wie ein Architecture Decision Record entwerfen, das bereit ist, als Pull Request geöffnet zu werden. Und du bist nicht an das Layout einer anderen Person gebunden. Ändere die Flussrichtung, passe Abstände an oder öffne das Code-Feld und bearbeite die Syntax von Hand – alles, ohne das Board zu verlassen.
Flussdiagramme bieten heute die volle visuelle Bearbeitung. Sequenz-, Klassen- und Entity‑Relationship‑Diagramme werden ebenfalls als native Formen gerendert, gelten aber vorerst als codebasiert, bis die visuelle Bearbeitung für sie nachgezogen hat.
So erstellst du ein Flussdiagramm in Miro
- Öffne die Erstellungsleiste, wähle Formate, dann Diagramm und klicke auf Mit Code erstellen.
- Füge vorhandene Mermaid-Syntax ein, beginne mit einer Vorlage oder bitte deinen KI-Agenten, direkt aus deiner Codebase oder anhand einer Anforderungsliste ein Flussdiagramm zu erstellen.
- Lass es automatisch als native Miro-Formen mit automatischem Layout darstellen, damit du Kästchen nicht manuell verschieben musst, um Kreuzungen der Linien zu vermeiden.
- Öffne das Diagramm im Fokusmodus, um es direkt zu bearbeiten: Klicke auf eine Form, um ihr Label oder ihren Stil zu ändern, passe die Flussrichtung an oder öffne das Code-Feld und bearbeite die Mermaid-Syntax von Hand.
- Lade dein Team ein, das Diagramm genau dort zu kommentieren, wo die Entscheidung fällt.
- Wenn du fertig bist, exportiere es als Bild, kopiere den Mermaid-Code zurück in dein Repo, oder lass deinen KI-Agenten das Diagramm und die Kommentare deines Teams über den MCP-Server von Miro auslesen.
Wenn du Mermaid schon kennst, kannst du direkt im Code-Feld loslegen. Wenn nicht, beginne mit einer Vorlage und lerne die Syntax, indem du etwas bearbeitest, das bereits funktioniert.
Weitere Mermaid‑Flussdiagramm‑Beispiele zum Ausprobieren
Du musst dein erstes Mermaid‑Flussdiagramm nicht von Grund auf neu erstellen. Jede dieser Vorlagen ist ein echtes Mermaid‑Board, das du öffnen, ansehen und bearbeiten kannst. So lernst du die Syntax, indem du etwas veränderst, das bereits funktioniert, statt auf ein leeres Canvas zu starren.
Einführung in Mermaid‑Diagramme in Miro
Das ist das Board, das du zuerst öffnen solltest, wenn du noch nie eine Zeile Mermaid geschrieben hast. Es behandelt die Syntax im gleichen Tempo wie dieser Leitfaden: Richtungs‑Keywords, Knotenformen, Pfeilarten und ein paar gestaltete Beispiele, wobei jedes Beispiel sein gerendertes Diagramm direkt neben dem Code zeigt. Da es ein Live‑Board und keine statische Referenzseite ist, kannst du das Label eines Knotens ändern oder eine Form austauschen und sofort sehen, wie die Darstellung aktualisiert wird. Diese unmittelbare Feedback‑Schleife ist die schnellste Art zu lernen, was jedes Symbol wirklich bewirkt, statt eine Syntax‑Tabelle auswendig zu lernen.
Nutzer-Authentifizierungs-Flow mit Mermaid-Code
Diese Vorlage liefert dir einen funktionsfähigen Login‑Flow: ein Nutzer gibt Anmeldeinformationen ein, die App prüft sie, und das Diagramm verzweigt entweder auf einen Erfolgsweg zum Dashboard oder auf einen Fehlerweg zurück zur erneuten Eingabe. Sie entspricht in der Grundidee dem vollständigen Beispiel weiter oben in diesem Leitfaden und ist eine gute Vorlage, wenn du irgendeine Form von Authentifizierungs-, Registrierung- oder Genehmigungsablauf dokumentierst, bei dem ein Validierungsschritt in der Mitte steht. Ersetze die Knoten‑Labels und die Verzweigungslogik durch deine eigenen, und du hast dein eigenes Authentifizierungsdiagramm, ohne das Layout anzufassen.
Technische Architektur von Microservices
Greif zu dieser Vorlage, sobald dein Diagramm über einen einfachen linearen Ablauf hinauswächst. Sie basiert auf Subgraphen, derselben Gruppierungstechnik, die weiter oben in diesem Leitfaden erklärt wurde, sodass du Dienste, APIs und Datenspeicher in klar beschriftete Bereiche packen kannst, anstatt alle Knoten in einem einzigen flachen Diagramm ohne Struktur umherschweben zu lassen. Sie ist ein solider Ausgangspunkt für Onboarding-Dokumente, Architektur-Reviews oder jedes Diagramm, in dem du zeigen musst, wie mehrere Dienste tatsächlich miteinander kommunizieren und nicht nur, was jeder einzelne für sich tut.
Diese Vorlage bildet den gesamten E‑Commerce‑Prozess ab: Produktkatalog durchsuchen, Zahlungsabwicklung, Backend‑Fulfillment und automatisierte Transaktions‑E‑Mails.
Schnapp dir eine dieser Vorlagen, tausche die Schritte gegen deine aus, und in wenigen Minuten hast du ein funktionierendes Flussdiagramm, statt auf einem leeren Canvas zu beginnen.
Häufig gestellte Fragen
Was ist ein Mermaid‑Flussdiagramm? Ein Mermaid‑Flussdiagramm ist ein Flussdiagramm, das als Klartext mit der Mermaid‑Syntax definiert wird, statt von Hand gezeichnet zu werden. du beschreibst Knoten und die sie verbindenden Pfeile, und Mermaid erstellt daraus automatisch das Diagramm inklusive Layout und Formen.
Wie erstellst du ein Flussdiagramm mit Mermaid? Beginne mit einem Richtungs‑Keyword wie flowchart TD, füge dann Knoten und Pfeile hinzu, zum Beispiel A[Start] --> B[End]. Formen fügst du mit eckigen Klammern hinzu, Labels auf Pfeilen mit -->|label|, und gruppiere verwandte Schritte mit subgraph.
Kann ich ein Mermaid‑Flussdiagramm stylen? Ja. Verwende Inline‑Style für einmalige Änderungen, classDef und class für wiederverwendbare Styles über mehrere Knoten hinweg, und eine %%{init}%%‑Direktive oben im Diagramm, um ein Design und eigene Farben festzulegen.
Wie verwendest du Mermaid-Flussdiagramme in Miro? Öffne die Erstellungsleiste, wähle Formate, dann Diagramm, und wähle Mit Code erstellen. Füge deine Mermaid-Syntax ein oder bitte einen KI-Agenten, sie zu erstellen, und Miro rendert daraus ein bearbeitbares, natives Diagramm, das du gestalten, kommentieren und freigeben kannst.
Was bietet Miro für Mermaid-Flussdiagramme? Die Structured Diagrams with Mermaid von Miro rendert Mermaid-Code als echte, bearbeitbare Formen, hält Code und Diagramm synchron, wenn sich eines von beiden ändert, und ermöglicht es KI-Agenten, Diagramme über den MCP-Server von Miro zu erstellen oder auszulesen.
Probier es aus
Am schnellsten lernst du die Mermaid-Syntax für Flussdiagramme, indem du selbst ein Diagramm schreibst und zusiehst, wie es gerendert wird. Öffne den Mermaid-Diagramm Editor in Miro, füge eines der obigen Beispiele ein und ändere es so lange, bis es deinem tatsächlichen Ablauf entspricht.
Entdecke mehr
Schließe dich heute unseren 100 Mio. Nutzern an
