INHALTSVERZEICHNIS
INHALTSVERZEICHNIS
Mit deiner Registrierung stimmst du den Allgemeinen Geschäftsbedingungen und der Datenschutzerklärung von Miro zu.
Mermaid‑Syntax für Flussdiagramme: der komplette 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 erstellt zwei verbundene Kästchen. Dieser Leitfaden behandelt die gesamte Syntax – von grundlegenden Knotenformen über Styling und Klick‑Events bis hin dazu, wie du diesen Code in ein echtes, bearbeitbares Diagramm in Miro verwandelst.
Dein Flussdiagramm ist bereits veraltet
du kennst das: du verbringst zwanzig Minuten in einem Diagramm-Tool damit, die Kästchen auszurichten, das Überlappen der Pfeile zu verhindern und die Farben bewusst wirken zu lassen. du exportierst es, fügst es ins Wiki ein und machst weiter. Drei Wochen später hat sich der Prozess geändert, und niemand hat das Bild aktualisiert. Jetzt ist die „Quelle der Wahrheit“ ein Screenshot von etwas, das seit dem letzten Sprint nicht mehr stimmt.
Das ist das Problem, wenn man Diagramme als Bilder statt als Code behandelt. Ein Bild lässt sich nicht diffen, nicht versionieren und auch 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 einfacher Textsyntax definierst, statt auf einem Drag-and-Drop-Canvas zu zeichnen. du schreibst ein paar Zeilen, die deine Knoten und ihre Verbindungen beschreiben, und Mermaid stellt das Diagramm automatisch dar – inklusive Layout, Pfeilen und Formen.
Es ist Teil von Mermaid, einer Open‑Source‑Syntax zur Erstellung von Diagrammen, die auch Sequenzdiagramme, Klassendiagramme, Zeitachsen und viele weitere Diagrammtypen abdeckt. Flussdiagramme sind am häufigsten – und das aus gutem Grund: Fast jeder Prozess, Entscheidungsbaum oder Workflow lässt sich als Knoten und Verbindungen abbilden.
Mermaid hat in letzter Zeit neuen Auftrieb bekommen – aus einem einfachen Grund: KI‑Modelle schreiben Mermaid‑Syntax fließend. Wenn du einen KI‑Agenten bittest, dein System zu diagrammieren, ist die Chance groß, dass er dir Mermaid‑Syntax liefert, denn dieses Format hat er am meisten geübt. Text ist für ein Sprachmodell außerdem leichter zu verarbeiten als ein zweidimensionales Bild, sodass ein Agent präzise Änderungen an deinem Diagramm vornehmen kann, anstatt alles von Grund auf neu zu zeichnen.
Grundsyntax: Richtung und Deklaration
Jedes Mermaid-Flussdiagramm beginnt mit einem Richtungs-Keyword. Diese eine Zeile bestimmt, ob dein Diagramm von oben nach unten oder von links nach rechts verläuft, 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:#fff6b6Beschriftete, aussagekräftige Knoten (Start, Medium, End) sind viel besser lesbar als einzelne Buchstaben, sobald dein Diagramm mehr als ein paar Schritte umfasst. Verwende Buchstaben nur für schnelle Skizzen und wechsle zu echten Labels, wenn du das Diagramm teilen möchtest.
Knotenformen: Klammer-Syntax bestimmt die Form
Die Klammern um den Text deines Knotens bestimmen, welche Form er annimmt. Du wählst die Form nicht aus einem Menü. Du tippst einfach die richtigen Zeichen, 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 Anwendungsbeispielen, 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 einen Aufruf zu einem separaten, definierten Prozess darstellt. Nutze einen Zylinder [(Text)], wenn du eine Datenbank oder einen Datenspeicher darstellst, und einen Kreis ((Text)) für einen einzelnen, in sich geschlossenen Punkt im Ablauf.
Mermaid hat noch ein paar Formen, die du kennen solltest, darunter die Raute für Entscheidungen und das Sechseck für Vorbereitungsschritte. Sonderzeichen wie Schrägstriche oder Fragezeichen müssen im Label in Anführungszeichen stehen:
flowchart TDH{Rhombus} I{<!-- -->{Hexagon}} J["s3/"] K["s4!"] L(("s5?"))Links und Pfeile – so verbindest du deine Knoten
Ein Pfeil zeigt dir, wie ein Schritt zum nächsten führt, und Mermaid bietet 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 hervorzuheben. Um einen Pfeil zu beschriften, verwende entweder -->|label| oder -- label -->. Beide bewirken dasselbe. Mit linkStyle, das einen Pfeil anhand seiner Position im Diagramm anspricht (0 für den ersten, 1 für den zweiten usw.), kannst du eine bestimmte Verbindung einfärben, anstatt alle Pfeile auf dem Board einzufärben.
Du kannst auch mehrere Knoten in einer einzigen Zeile verbinden, statt jedes Paar einzeln zu schreiben:
flowchart tdA & B --> C & D %% multistyle A fill:#fff6b6 style B fill:#c6dcff style C fill:#edfaf2 style D fill:#ffc6c6Diese eine Zeile erfüllt denselben Zweck wie vier einzelne Pfeil-Anweisungen. Es ist eine Kleinigkeit, aber sie hält den Code eines umfangreichen Diagramms lesbar.
Subgraphen: Gruppierung und Verschachtelung
In echten Systemen gibt es Bereiche: ein Frontend, ein Backend oder einen Bezahlvorgang, der in Wirklichkeit aus drei Schritten besteht, sich aber als einer tarnt. Subgraphen ermöglichen es dir, verwandte Knoten in Kästen zusammenzufassen und diesem Kasten sogar eine eigene interne Flussrichtung zu geben.
flowchart TB subgraph frontend direction LR UI --> API end subgraph backend API --> DB end frontend --> backendZwei Dinge, die du beachten solltest. Erstens: Die Richtung innerhalb eines Subgraphen überschreibt die Richtung des übergeordneten Flussdiagramms, sodass dein Frontend von links nach rechts angeordnet sein kann, während das Gesamtdiagramm von oben nach unten verläuft. Zweitens: Ein Subgraph kann wie jeder andere Knoten verlinkt werden, weshalb oben „Frontend --> Backend“ funktioniert, obwohl beide Seiten Kästen voller anderer Kästen 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, noch bevor du auch nur einen 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 wird mit fünf vorinstallierten Themes geliefert: default, dark, forest, neutral und base. Nur base gibt dir Zugriff auf das vollständige themeVariables-Objekt. Wenn du also eigene Farben statt einer voreingestellten Palette möchtest, ist base das passende Theme zum Starten.
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 einen Tooltip anzeigt, was praktisch ist, 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>Node A öffnet einen Link in einem neuen Tab. Node B löst eine JavaScript-Funktion namens callback aus und zeigt den Hover-Text „Tooltip.“ Node C öffnet einen relativen Link im aktuellen Tab mit eigenem Hover-Text. Du wirst dieses Muster am häufigsten in interner Dokumentation sehen, wenn ein Knoten im Diagramm direkt auf das zugehörige Runbook oder Ticket verlinkt.
Styling: Farben, Klassen und Markdown‑Labels
Einmalige Formatierungen sind für einen einzelnen Knoten in Ordnung, werden aber schnell repetitiv. Mit classDef kannst du einen Stil einmal definieren und im gesamten Diagramm wiederverwenden, was wichtig wird, 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 einer Klasse auf zwei Arten zuweisen: mit class A,B error auf 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 grundlegende Markdown-Formatierung in Knoten und Kanten, sofern du vorher 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-Flow nutzt die meisten der oben behandelten Elemente in einem Diagramm: Formen, Subgraphs, Styling-Klassen, eine Wiederholschleife und ein Click-Event.
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 in der Mermaid‑Konvention häufig für einen Eingabeschritt verwendet wird. Die eigentliche Kunst beim Schreiben von Mermaid besteht nicht darin, jedes Symbol auswendig zu lernen. Sondern darin, zu wissen, welche Handvoll Muster die meisten deiner Flussdiagramme abdecken.
Alle Syntaxbeispiele findest du in unserem Cheatsheet zu Mermaid‑Flussdiagrammen.
Wo Mermaid‑Flussdiagramme noch besser werden: Miro
Den Code zu schreiben ist nur die halbe Miete. Du musst ihn dir ansehen, Entscheidungen hinterfragen und aktualisieren, wenn sich der Prozess ändert. Genau hier ist Mermaid früher oft an eine Grenze gestoßen: Du hast ein Diagramm gerendert, einen Screenshot abgelegt – und die Verbindung zwischen Code und Bild war sofort weg, sobald jemand es bearbeitete.
Miro schließt diese Lücke mit Structured Diagrams with Mermaid, das derzeit in öffentlicher Betaversion ist. Füge Mermaid‑Syntax in ein Miro‑Board ein oder bitte einen KI‑Agenten wie Claude Code, ein Diagramm direkt aus deiner Codebase zu erstellen; das Ergebnis sind echte, bearbeitbare Miro‑Formen statt eines statischen Bildes. Der Mermaid‑Code bleibt die maßgebliche Quelle der Wahrheit: Bearbeite das Diagramm visuell, und der zugrunde liegende Code aktualisiert sich automatisch, sodass beide nie auseinanderdriften.
Das ist aus mehreren Gründen wichtig. Dein Team kann am Diagramm zusammenarbeiten, statt daran vorbei: direkt an einem Knoten zu kommentieren, statt einen Neben-Thread in Slack 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, gezielte Änderungen vornehmen oder aus den Kommentaren deines Teams ein Dokument wie einen Architekturentscheidungs‑Eintrag 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 den Abstand an oder öffne das Code-Feld und bearbeite die Syntax von Hand – alles, ohne das Board zu verlassen.
Flussdiagramme bieten heute die volle visuelle Bearbeitungserfahrung. Sequenz-, Klassen- und Entity-Relationship-Diagramme werden ebenfalls als native Formen gerendert, gelten aber vorerst als code-first, bis die visuelle Bearbeitung sie eingeholt hat.
So erstellst du ein Mermaid‑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, ein Flussdiagramm direkt aus deiner Codebase oder aus einer Reihe von Anforderungen zu erstellen.
- Sieh dir an, wie es als native Miro-Formen mit automatischem Layout dargestellt wird, damit du nicht manuell Kästchen verschieben musst, um überkreuzende Linien zu vermeiden.
- Öffne das Diagramm im Fokusmodus, um es direkt zu bearbeiten: Klicke eine Form, um ihr Label oder den Stil zu ändern, passe die Flussrichtung an, oder öffne das Codefeld und bearbeite die Mermaid-Syntax von Hand.
- Lade dein Team ein, direkt am Diagramm zu kommentieren – genau dort, wo die Entscheidung getroffen wird.
- Wenn du fertig bist, exportiere es als Bild, kopiere den Mermaid-Code zurück in dein Repository, 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 ins Code-Feld tippen. Wenn nicht, starte mit einer Vorlage und lerne die Syntax, indem du etwas bearbeitest, das bereits funktioniert.
Weitere Mermaid‑Flussdiagramme 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, sodass du die Syntax lernst, indem du etwas veränderst, das bereits funktioniert, statt auf ein leeres Canvas zu starren.
Einführung in Mermaid-Diagramme in Miro
Dieses Board solltest du zuerst öffnen, wenn du noch nie eine Zeile Mermaid geschrieben hast. Es führt dich im Tempo dieser Anleitung durch die Syntax: Richtungs-Keywords, Knotenformen, Pfeilarten und einige gestaltete Beispiele, jeweils mit dem gerenderten Diagramm direkt neben dem Code. Da es ein Live-Board und keine statische Referenzseite ist, kannst du ein Label eines Knotens ändern oder eine Form austauschen und beobachten, wie die Darstellung sofort aktualisiert wird. Diese unmittelbare Feedback-Schleife ist die schnellste Art, zu lernen, was jedes Symbol wirklich bewirkt, anstatt eine Syntaxtabelle auswendig zu lernen.
Authentifizierungs-Flow mit Mermaid-Code
Diese Vorlage liefert dir einen fertig aufgebauten 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 Fehlerpfad zurück zum erneuten Versuch. Es ähnelt in der Intention dem vollständigen Beispiel weiter oben in diesem Leitfaden und ist eine gute Vorlage, wenn du irgendeine Art von Authentifizierungs-, Registrierungs- oder Genehmigungsablauf mit einem Validierungsschritt in der Mitte dokumentierst. Ersetze die Labels der Knoten und die Verzweigungslogik durch deine eigenen, und du hast dein eigenes Authentifizierungsdiagramm, ohne das Layout anzufassen.
Technische Architektur von Microservices
Dies ist die Vorlage, zu der du greifen solltest, sobald dein Diagramm über einen einfachen linearen Ablauf hinauswächst. Sie ist um Subgraphen aufgebaut, dieselbe Gruppierungstechnik, die weiter oben in diesem Leitfaden behandelt wurde, sodass du Services, APIs und Datenspeicher in klar beschriftete Abschnitte packen kannst, anstatt alle Knoten in einem flachen Diagramm treiben 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 kompletten E‑Commerce‑Bestellablauf ab: Durchsuchen des Katalogs, Zahlungsabwicklung, Auftragsabwicklung im Backend und automatisierte Transaktions‑E‑Mails.
Wähle eine dieser Vorlagen, passe die Schritte an, und du hast in wenigen Minuten ein funktionierendes Flussdiagramm – statt bei einem leeren Canvas zu beginnen.
Häufig gestellte Fragen
Was ist ein Mermaid‑Flussdiagramm? Ein Mermaid‑Flussdiagramm ist ein in einfachem Text definiertes Flussdiagramm, das die Syntax von Mermaid verwendet, statt von Hand gezeichnet zu werden. Du beschreibst die Knoten und die sie verbindenden Pfeile, und Mermaid erzeugt das Diagramm automatisch inklusive Layout und Formen.
Wie erstellst du ein Mermaid‑Flussdiagramm? Beginne mit einem Richtungs‑Keyword wie flowchart TD, füge dann Knoten und Pfeile hinzu, z. B. A[Start] --> B[End]. Füge Formen mit eckigen Klammern hinzu, Labels auf Pfeilen mit -->|label| und gruppiere zusammengehörige Schritte mit subgraph.
Kannst du ein Mermaid‑Flussdiagramm gestalten? Ja. Verwende Inline‑Style für einmalige Änderungen, classDef und class für wiederverwendbare Stile an mehreren Knoten, und die %%{init}%%‑Direktive am Anfang deines Diagramms, 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 wandelt sie in ein natives, bearbeitbares Diagramm um, das du gestalten, kommentieren und teilen kannst.
Was bietet Miro für Mermaid‑Flussdiagramme? 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 KI‑Agenten, Diagramme über den MCP‑Server von Miro zu erstellen oder auszulesen.
Probier es selbst aus
Am schnellsten lernst du die Mermaid‑Flussdiagramm‑Syntax, indem du selbst eins 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 Prozess entspricht.
Entdecke mehr
Schließe dich heute unseren 100 Mio. Nutzern an
