Grunddefinition
Ein Flussdiagramm besteht aus Knoten (geometrischen Formen) und Verbindungslinien (Pfeilen oder Linien). Der Mermaid-Code definiert, wie Knoten und Verbindungslinien aufgebaut werden, und unterstützt verschiedene Pfeiltypen, mehrdirektionale Pfeile sowie beliebige Links zu Untergraphen.
Warnung Wenn du das Wort "end" in einem Flussdiagramm-Knoten verwendest, schreibe den ersten Buchstaben oder das ganze Wort groß (zum Beispiel: "End" oder "END"). Die Eingabe von "end" in Kleinbuchstaben führt zu einem Fehler im Flussdiagramm.
Warnung Wenn du beim Verbinden von Flussdiagramm-Knoten die Buchstaben "o" oder "x" als Anfangsbuchstaben verwendest, füge vor dem Buchstaben ein Leerzeichen hinzu oder schreibe den Buchstaben groß (zum Beispiel: "dev--- ops", "dev---Ops").
Ein Knoten (Standard)
Kopieren
Einbetten
---
title: Node
---
flowchart LR
id
id ist der Inhalt, der im Kästchen angezeigt wird.
Für die Syntax zum Erstellen eines Flussdiagramms kannst du außer flowchart auch graph verwenden.
Ein Knoten mit Text
Du kannst auch einen vom id abweichenden Text für das Kästchen festlegen. Wenn du dies mehrmals ausführst, übernimmt das System den zuletzt für diesen Knoten angegebenen Text. Wenn später außerdem eine Verbindungslinie für den Knoten definiert wird, kann die Textdefinition weggelassen werden; beim Rendern des Kästchens wird der zuvor definierte Text verwendet.
Kopieren
Einbetten
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode-Text
Schließe den Unicode-Text in doppelte Anführungszeichen ein.
Kopieren
Einbetten
flowchart LR
id["This ❤ Unicode"]
Markdown-Format
Schließe den Markdown-Text in doppelte Anführungszeichen und Backticks ein
Kopieren
Einbetten
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Richtung
Deklariert die Richtung des Flussdiagramms
Gibt an, dass das Flussdiagramm von oben nach unten angeordnet ist (TD oder TB)
Kopieren
Einbetten
flowchart TD
Start --> Stop
Die Richtungen des Flussdiagramms umfassen:
- TB - von oben nach unten
- TD - von oben nach unten (identisch mit "von oben nach unten")
- BT - von unten nach oben
- RL - von rechts nach links
- LR - von links nach rechts
Knotenform
Abgerundetes Rechteck
Kopieren
Einbetten
flowchart LR
id1(This is the text in the box)
Stadionform
Kopieren
Einbetten
flowchart LR
id1([This is the text in the box])
Unterprogramm
Kopieren
Einbetten
flowchart LR
id1[[This is the text in the box]]
Datenbank
Kopieren
Einbetten
flowchart LR
id1[(Database)]
Kreis
Kopieren
Einbetten
flowchart LR
id1((This is the text in the circle))
Asymmetrische Form
Kopieren
Einbetten
flowchart LR
id1>This is the text in the box]
Raute
Kopieren
Einbetten
flowchart LR
id1{This is the text in the box}
Sechseck
Kopieren
Einbetten
flowchart LR
id1{{This is the text in the box}}
Parallelogramm
Kopieren
Einbetten
flowchart TD
id1[/This is the text in the box/]
Umgekehrtes Parallelogramm
Kopieren
Einbetten
flowchart TD
id1[\This is the text in the box\]
Trapez
Kopieren
Einbetten
flowchart TD
A[/ProcessOn\]
Umgekehrtes Trapez
Kopieren
Einbetten
flowchart TD
B[\ProcessOn/]
Doppelkreis
Kopieren
Einbetten
flowchart TD
id1(((This is the text in the circle)))
Erweiterung der Knotenformen im Mermaid-Flussdiagramm
Mermaid führt 30 neue Formen ein, um die Flexibilität und Präzision bei der Erstellung von Flussdiagrammen zu erhöhen. Diese neuen Formen bieten mehr Optionen, um Prozesse, Entscheidungen, Ereignisse, Datenspeicher sowie andere Elemente im Flussdiagramm anschaulich darzustellen, wodurch Klarheit und semantische Bedeutung verbessert werden.
Neue Syntax zur Formdefinition
Mermaid unterstützt jetzt eine allgemeine Syntax zur Definition von Formtypen, um der wachsenden Anzahl von Formen gerecht zu werden. Diese Syntax ermöglicht es dir, einem Knoten in einem klaren und flexiblen Format eine bestimmte Form zuzuweisen.
Kopieren
Einbetten
A@{ shape: rect }
Diese Syntax erstellt Knoten A als Rechteck. Er wird genauso gerendert wie [A] oder A.
Vollständige Liste der Knotenformen
Im Folgenden findest du eine vollständige Liste der neu eingeführten Knotenformen mit ihrer jeweiligen Bedeutung, Kurzbezeichnung und ihrem Alias:
| Semantischer Name | Diagrammsyntax | Syntax-Kurzbezeichnung | Syntax-Alternative | Detaillierte Beschreibung |
|---|---|---|---|---|
| Karte | Notched Rectangle | notch-rect | card, notched-rectangle | Stellt eine Karte dar |
| Sortieren | Hourglass | hourglass | collate | Stellt eine Sortieroperation dar |
| Kommunikationsverbindung | Lightning Bolt | bolt | com-link, lightning-bolt | Kommunikationsverbindung |
| Kommentar | Curly Brace | brace | brace-l, comment | Kommentar hinzufügen |
| Kommentar rechts | Curly Brace | brace-r | Kommentar hinzufügen | |
| Kommentar mit geschweiften Klammern auf beiden Seiten | Curly Braces | braces | Kommentar hinzufügen | |
| Dateneingabe oder -ausgabe | Lean Right | lean-r | in-out, lean-right | Stellt Eingabe oder Ausgabe dar |
| Dateneingabe oder -ausgabe | Lean Left | lean-l | lean-left, out-in | Stellt Ausgabe oder Eingabe dar |
| Datenbank | Cylinder | cyl | cylinder, database, db | Datenbankspeicher |
| Entscheidung | Diamond | diam | decision, diamond, question | Entscheidungsschritt |
| Verzögerung | Half-Rounded Rectangle | delay | half-rounded-rectangle | Stellt eine Verzögerung dar |
| Direktzugriffsspeicher | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Direktzugriffsspeicher |
| Plattenspeicher | Lined Cylinder | lin-cyl | disk, lined-cylinder | Plattenspeicher |
| Anzeige | Curved Trapezoid | curv-trap | curved-trapezoid, display | Stellt dar, dass Informationen auf Geräten wie Bildschirmen oder Terminals angezeigt werden |
| Aufteilungsverarbeitung | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Form für die Aufteilungsverarbeitung |
| Dokument | Document | doc | document | Stellt ein Dokument dar |
| Ereignis | Rounded Rectangle | rounded | event | Stellt ein Ereignis dar |
| Extrahieren | Triangle | tri | extract, triangle | Extraktionsprozess |
| Verzweigung/Zusammenführung | Filled Rectangle | fork | join | Verzweigung oder Zusammenführung im Flussdiagramm |
| Interner Speicher | Window Pane | win-pane | internal-storage, window-pane | Interner Speicher |
| Verbindungspunkt | Filled Circle | f-circ | filled-circle, junction | Verbindungspunkt |
| Dokument mit Linie | Lined Document | lin-doc | lined-document | Dokument mit Linie |
| Linien-/Schattenprozess | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Prozessform mit Linie |
| Schleifenbegrenzung | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Schritt der Schleifenbegrenzung |
| Manuelle Datei | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Manuelle Dateioperation |
| Manuelle Eingabe | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Schritt der manuellen Eingabe |
| Manuelle Operation | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Stellt eine manuelle Aufgabe dar |
| Mehrere Dokumente | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Mehrere Prozesse | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Unregelmäßige Form | Odd | odd | Unregelmäßige Form | |
| Lochstreifen | Flag | flag | paper-tape | Lochstreifen |
| Vorbereitungsbedingung | Hexagon | hex | hexagon, prepare | Vorbereitungs- oder Bedingungsschritt |
| Vorrangige Aktion | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Vorrangige Aktion |
| Verarbeitung | Rectangle | rect | proc, process, rectangle | Standard-Verarbeitungsform |
| Start | Circle | circle | circ | Startpunkt |
| Start | Small Circle | sm-circ | small-circle, start | Kleiner Kreis als Startpunkt |
| Stopp | Double Circle | dbl-circ | double-circle | Stellt einen Stopppunkt dar |
| Stopp | Framed Circle | fr-circ | framed-circle, stop | Stellt einen Stopppunkt dar |
| Daten speichern | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Daten speichern |
| Unterprogramm | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Unterprogramm, Subroutine |
| Zusammenfassung | Crossed Circle | cross-circ | crossed-circle, summary | Zusammenfassung |
| Markiertes Dokument | Tagged Document | tag-doc | tagged-document | Markiertes Dokument |
| Standardprozess | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Endpunkt | Stadium | stadium | pill, terminal | Endpunkt |
| Textblock | Text Block | text | Textblock |
Im Folgenden findest du ein Beispiel für einen Flussdiagramm-Code, der die neu eingeführten Formen verwendet:
Kopieren
Einbetten
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
Prozess
Kopieren
Einbetten
flowchart TD
A@{ shape: rect, label: "This is a process" }
Ereignis
Kopieren
Einbetten
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Unterprozess
Kopieren
Einbetten
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Datenbank (Zylinder)
Kopieren
Einbetten
flowchart TD
A@{ shape: cyl, label: "Database" }
Start (Kreis)
Kopieren
Einbetten
flowchart TD
A@{ shape: circle, label: "Start" }
Unregelmäßige Form
Kopieren
Einbetten
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Entscheidung (Raute)
Kopieren
Einbetten
flowchart TD
A@{ shape: diamond, label: "Decision" }
Vorbereitungsbedingung (Sechseck)
Kopieren
Einbetten
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Dateneingabe/-ausgabe (nach rechts geneigt)
Kopieren
Einbetten
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Dateneingabe/-ausgabe (nach links geneigt)
Kopieren
Einbetten
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Vorrangige Aktion (Trapez)
Kopieren
Einbetten
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Manuelle Operation (umgekehrtes Trapez)
Kopieren
Einbetten
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Stopp (Doppelkreis)
Kopieren
Einbetten
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Textblock
Kopieren
Einbetten
flowchart TD
A@{ shape: text, label: "This is a text block" }
Karte (Rechteck mit Kerbe)
Kopieren
Einbetten
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Prozess mit Linie/Schatten
Kopieren
Einbetten
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Start (kleiner Kreis)
Kopieren
Einbetten
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Stopp (Kreis mit Rahmen)
Kopieren
Einbetten
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Verzweigung/Zusammenführung (langes Rechteck)
Kopieren
Einbetten
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Sortieren (Sanduhr)
Kopieren
Einbetten
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Kommentar (geschweifte Klammern)
Kopieren
Einbetten
flowchart TD
A@{ shape: comment, label: "Comment" }
Kommentar rechts (rechte geschweifte Klammer)
Kopieren
Einbetten
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Kommentar (auf beiden Seiten mit Klammern)
Kopieren
Einbetten
flowchart TD
A@{ shape: braces, label: "Comment" }
Kommunikationsverbindung (Blitz)
Kopieren
Einbetten
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Dokument
Kopieren
Einbetten
flowchart TD
A@{ shape: doc, label: "Document" }
Verzögerung (halb abgerundetes Rechteck)
Kopieren
Einbetten
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Kopieren
Einbetten
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Plattenspeicher (Zylinder mit Rille)
Kopieren
Einbetten
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Anzeige (Anzeigeform)
Kopieren
Einbetten
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Aufteilungsverarbeitung (geteiltes Rechteck)
Kopieren
Einbetten
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Extrahieren (kleines Dreieck)
Kopieren
Einbetten
flowchart TD
A@{ shape: tri, label: "Extract" }
Interner Speicher (Fensterbereich)
Kopieren
Einbetten
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Verbindungspunkt (ausgefüllter Kreis)
Kopieren
Einbetten
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Dokument mit Linie
Kopieren
Einbetten
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Schleifenbegrenzung (Fünfeck mit Kerbe)
Kopieren
Einbetten
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Manuelle Datei (umgedrehtes Dreieck)
Kopieren
Einbetten
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Manuelle Eingabe (rechtwinkliges Trapez)
Kopieren
Einbetten
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Mehrere Dokumente (gestapelte Dokumente)
Kopieren
Einbetten
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Mehrere Prozesse (gestapelte Rechtecke)
Kopieren
Einbetten
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Lochstreifen (Fahne)
Kopieren
Einbetten
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Daten speichern (Schleifenrechteck)
Kopieren
Einbetten
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Zusammenfassung (Kreis mit Kreuz)
Kopieren
Einbetten
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Markiertes Dokument
Kopieren
Einbetten
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Markierter Prozess
Kopieren
Einbetten
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Besondere Formen im Mermaid-Flussdiagramm
Mermaid führt außerdem Bilder ein, um dein Flussdiagramm zu verbessern. Sie ermöglichen es dir, Bilder direkt in das Flussdiagramm einzubinden, wodurch mehr visueller Kontext und Klarheit entsteht.
Bildform
Du kannst image verwenden, um ein Bild in ein Flussdiagramm einzufügen. Die Syntax zur Definition eines Bildes lautet wie folgt:
Kopieren
Einbetten
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parameter
- img: Die URL-Adresse des anzuzeigenden Bildes.
- label: Das mit dem Bild verknüpfte Textlabel, das eine beliebige Zeichenkette sein kann. Wenn es nicht definiert ist, wird kein Label angezeigt.
- pos: Die Position des Labels. Wenn sie nicht definiert ist, befindet sich das Label standardmäßig am unteren Rand des Bildes.
- w: Die Breite des Bildes. Wenn sie nicht definiert ist, wird standardmäßig die natürliche Breite des Bildes verwendet.
- h: Die Höhe des Bildes. Wenn sie nicht definiert ist, wird standardmäßig die natürliche Höhe des Bildes verwendet.
- constraint: Legt fest, ob das Bild die Knotengröße einschränkt. Diese Einstellung stellt außerdem sicher, dass das Bild sein ursprüngliches Seitenverhältnis beibehält und die Höhe an die Breite angepasst wird. Wenn sie nicht definiert ist, ist der Standardwert off.
Bilder verleihen deinem Flussdiagramm zusätzliche Flexibilität und visuelle Attraktivität und machen es informativer und ansprechender.
Verbindungen zwischen Knoten
Knoten können über Verbindungslinien und Pfeile verbunden werden. Es gibt verschiedene Linktypen, und es kann auch eine Zeichenkette an einen Link angehängt werden.
Link mit Pfeil
Kopieren
Einbetten
flowchart LR
A-->B
Ein offener Link
Kopieren
Einbetten
flowchart LR
A --- B
Link mit Text
Kopieren
Einbetten
flowchart LR
A-- This is the text! ---B
oder
Kopieren
Einbetten
flowchart LR
A --- | This is the text| B
Link mit Pfeil und Text
Kopieren
Einbetten
flowchart LR
A-->|text|B
oder
Kopieren
Einbetten
flowchart LR
A-- text -->B
Gestrichelter Link
Kopieren
Einbetten
flowchart LR
A-.->B;
Gestrichelter Link mit Text
Kopieren
Einbetten
flowchart LR
A-. text .->B;
Dicker Link
Kopieren
Einbetten
flowchart LR
A ==> B
Dicker Link mit Text
Kopieren
Einbetten
flowchart LR
A == |text| ==> B
Unsichtbarer Link
Kopieren
Einbetten
flowchart LR
A ~~~ B
Verkettete Verbindung von Links
Kopieren
Einbetten
flowchart LR
A -- text --> B -- text2 --> C
Du kannst auch mehrere Knotenlinks in derselben Zeile deklarieren, wie unten gezeigt:
Kopieren
Einbetten
flowchart LR
a --> b & c--> d
Du kannst auch eine Abhängigkeit beschreiben, wie im folgenden Code:
Kopieren
Einbetten
flowchart LR
a --> b & c--> d & e--> f
Wenn du dasselbe Diagramm mit der grundlegenden Syntax beschreibst, sind 8 Zeilen erforderlich. Beachte, dass eine übermäßige Verwendung dieser Methode das Lesen von Flussdiagrammen im Markdown-Format erschweren kann.
Kopieren
Einbetten
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
ID zu einer Verbindungslinie hinzufügen
Mermaid unterstützt jetzt das Hinzufügen einer ID zu Verbindungslinien, ähnlich wie das Anhängen von IDs und Metadaten an Knoten. Diese Funktion legt die Grundlage für erweiterte Stil-, Klassen- und Animationsfunktionen für Verbindungslinien.
Syntax:Um einer Verbindungslinie eine ID hinzuzufügen, stelle der Verbindungslinien-Syntax die ID voran, unmittelbar gefolgt vom Zeichen @. Zum Beispiel:
Kopieren
Einbetten
flowchart LR
A e1@--> B
In diesem Beispiel ist e1 die ID der Verbindungslinie, die A und B verbindet. Du kannst diese ID in nachfolgenden Definitions- oder Stil-Anweisungen genauso verwenden wie einen Knoten.
Animation aktivieren
Nachdem du einer Verbindungslinie eine ID hinzugefügt hast, kannst du die Animation der Verbindungslinie aktivieren, indem du ihre Eigenschaften definierst:
Kopieren
Einbetten
flowchart LR
A e1@==> B
e1@{ animate: true }
Dies teilt Mermaid mit, dass die Verbindungslinie e1 animiert ist.
Animationstyp auswählen
In der ersten Version werden zwei Animationsgeschwindigkeiten unterstützt: fast und slow. Die Auswahl eines bestimmten Animationstyps ist eine einfache Möglichkeit, die Animation zu aktivieren und die Animationsgeschwindigkeit auf einmal festzulegen.
Kopieren
Einbetten
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animieren mit der classDef-Anweisung
Du kannst eine Verbindungslinie auch animieren, indem du ihr eine Klasse zuweist und dann die Animationseigenschaften in einer classDef-Anweisung definierst. Zum Beispiel:
Kopieren
Einbetten
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
In diesem Code:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate definiert eine Klasse namens animate mit Stil- und Animationseigenschaften.
- class e1 animate wendet die Klasse animate auf die Verbindungslinie e1 an.
Hinweis zum Escapen von Kommas: Denke beim Festlegen der Eigenschaft stroke-dasharray daran, das Komma als , zu escapen, da das Komma in den Stildefinitionen von Mermaid als Trennzeichen verwendet wird.
Neuer Pfeiltyp
Unterstützt neue Pfeiltypen
- Verbindungslinie mit gefülltem Kreis
- Verbindungslinie mit Kreuzmarkierung
Verbindungslinie mit gefülltem Kreis
Kopieren
Einbetten
flowchart LR
A --o B
Verbindungslinie mit Kreuzmarkierung
Kopieren
Einbetten
flowchart LR
A --x B
Mehrdirektionaler Pfeil
Du kannst mehrdirektionale Pfeile verwenden, zum Beispiel:
Kopieren
Einbetten
flowchart LR
A o--o B
B <--> C
C x--x D
Länge der Verbindungslinie
Jeder Knoten im Flussdiagramm wird abhängig von den mit ihm verbundenen Knoten einer Ebene im gerenderten Diagramm zugewiesen, d. h. einer vertikalen oder horizontalen Ebene (je nach Richtung des Flussdiagramms). Standardmäßig kann ein Link beliebig viele Ebenen überspannen, aber du kannst durch Hinzufügen zusätzlicher Bindestriche in der Verbindungsdefinition verlangen, dass eine bestimmte Verbindung länger ist als andere.
In diesem Beispiel werden der Verbindung von Knoten B zu Knoten E zwei zusätzliche Bindestriche hinzugefügt, sodass sie zwei Ebenen mehr überspannt als ein normaler Link:
Kopieren
Einbetten
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Wenn das Verbindungslabel in der Mitte der Verbindung geschrieben wird, müssen auf der rechten Seite der Verbindung zusätzliche Bindestriche hinzugefügt werden. Dieses Beispiel ist gleichwertig zum vorherigen Beispiel:
Kopieren
Einbetten
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Bei gepunkteten Linien oder dicken Links sind die hinzuzufügenden Zeichen das Gleichheitszeichen oder der Punkt, wie in der folgenden Tabelle gezeigt:
| Länge | 1 | 2 | 3 |
|---|---|---|---|
| Normale Verbindung | --- | ---- | ----- |
| Normale Verbindung mit Pfeil | --> | ---> | ----> |
| Dicke Verbindung | === | ==== | ===== |
| Dicke Verbindung mit Pfeil | ==> | ===> | ====> |
| Gepunktete Linie | -.- | -..- | -...- |
| Gepunktete Linie mit Pfeil | -.- | -..-> | -...-> |
Sonderzeichen
Du kannst Text in Anführungszeichen setzen, um problematischere Zeichen zu rendern. Wie im folgenden Beispiel gezeigt:
Kopieren
Einbetten
flowchart LR
id1["This is the (text) in the box"]
Entity-Kodierung zum Escapen von Zeichen
Zeichen können mit der im Beispiel gezeigten Syntax escaped werden.
Kopieren
Einbetten
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Die angegebenen Zahlen sind dezimal, daher kann # als #35 kodiert werden. Die Verwendung von HTML-Zeichennamen wird ebenfalls unterstützt.
Untergraph
Kopieren
Einbetten
subgraph title
graph definition
end
Hier ist ein Beispiel:
Kopieren
Einbetten
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Du kannst auch eine id für den Untergraphen festlegen.
Kopieren
Einbetten
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Flussdiagramm
Bei Diagrammen vom Typ Flussdiagramm kannst du wie im folgenden Flussdiagramm auch Verbindungslinien zu und von Untergraphen festlegen.
Kopieren
Einbetten
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
Richtung des Untergraphen
Bei Verwendung des Diagrammtyps Flussdiagramm kannst du mit einer Richtungsanweisung die Rendering-Richtung des Untergraphen festlegen, wie unten gezeigt:
Kopieren
Einbetten
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
Einschränkung
Wenn ein Knoten des Untergraphen mit dem Äußeren verbunden ist, wird die Richtung des Untergraphen ignoriert. Andernfalls erbt der Untergraph die Richtung des übergeordneten Diagramms:
Kopieren
Einbetten
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Markdown-Zeichenkette
Markdown-Zeichenketten verbessern Flussdiagramme und Mindmaps durch einen flexibleren Zeichenkettentyp, der Textformatierungsoptionen wie Fett und Kursiv unterstützt und Text innerhalb von Labels automatisch umbrechen kann.
Kopieren
Einbetten
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- Um Text fett zu machen, verwende zwei Sternchen (**) vor und nach dem Text.
- Für Kursiv wird ein einzelnes Sternchen (*) vor und nach dem Text verwendet.
- Bei herkömmlichen Zeichenketten musst du ein <br>-Tag hinzufügen, damit der Text im Knoten umgebrochen wird. Markdown-Zeichenketten brechen jedoch bei zu langem Text automatisch um, und du kannst einfach einen Zeilenumbruch statt eines <br>-Tags verwenden, um eine neue Zeile zu beginnen.
Diese Funktion gilt für Knotenlabels, Verbindungslinien-Labels und Untergraphen-Labels
Der automatische Umbruch kann durch Verwendung einer bestimmten Syntax deaktiviert werden
Kopieren
Einbetten
---
config:
markdownAutoWrap: false
---
graph LR
Kommentar
In einem Flussdiagramm können Kommentare eingegeben werden, die der Editor ignoriert. Ein Kommentar muss eine eigene Zeile einnehmen und mit einem doppelten Prozentzeichen (%%) beginnen. Jeder Text vom Kommentarbeginn bis zur nächsten Zeile wird als Kommentar betrachtet, einschließlich jeglicher Diagrammsyntax.
Kopieren
Einbetten
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Stil und Klasse
Link-Stil
Der Link-Stil kann festgelegt werden. Zum Beispiel möchtest du vielleicht einen Link gestalten, der im Ablauf rückwärts verläuft. Da Links im Gegensatz zu Knoten keine ID haben, muss auf andere Weise entschieden werden, welcher Stil für den Link verwendet werden soll. Verwende die Reihenfolgennummer bei der Definition des Links oder verwende den Standardwert, um ihn auf alle Links anzuwenden.
Kopieren
Einbetten
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Du kannst mehreren Links auch Stile hinzufügen, indem du die Linknummern in einer einzigen Anweisung durch Kommas trennst:
Kopieren
Einbetten
linkStyle 1,2,7 color:blue;
Kurvenstil der Verbindungslinie festlegen
Wenn die Standardmethode deine Anforderungen nicht erfüllt, kannst du den Kurvenstil für Verbindungslinien zwischen Elementen festlegen. Verfügbare Kurvenstile sind basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter und stepBefore.
Im folgenden Beispiel verwendet ein Diagramm von links nach rechts den Kurvenstil stepBefore.
Kopieren
Einbetten
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Knotenstil festlegen
Für Knoten kann ein bestimmter Stil festgelegt werden, zum Beispiel ein dickerer Rahmen oder eine andere Hintergrundfarbe.
Kopieren
Einbetten
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
Klasse
Bequemer als jedes Mal einen Stil zu definieren, ist es, eine Stilklasse zu definieren und diese Klasse an Knoten anzuhängen, die ein anderes Aussehen benötigen.
Die Klassendefinition sieht wie folgt aus:
Kopieren
Einbetten
classDef className fill:pink,stroke:#333,stroke-width:4px;
Darüber hinaus kannst du in einer Anweisung Stile für mehrere Klassen definieren:
Kopieren
Einbetten
classDef firstClassName,secondClassName font-size:12pt;
Das Anhängen einer Klasse an einen Knoten erfolgt wie folgt:
Kopieren
Einbetten
class nodeId1 className;
Du kannst eine Klasse auch in einer Anweisung an eine Knotenliste anhängen:
Kopieren
Einbetten
class nodeId1,nodeId2 className;
Zum Hinzufügen einer Klasse kannst du mit dem Operator ::: den Klassennamen an einen Knoten anhängen, wie unten gezeigt:
Kopieren
Einbetten
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Diese Form kann beim Deklarieren mehrerer Links zwischen Knoten verwendet werden:
Kopieren
Einbetten
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- In Diagrammdeklarationen können Anweisungen jetzt auch ohne Semikolon enden. Ab Version 0.2.16 ist das Semikolon am Ende einer Diagrammanweisung nur noch optional. Daher ist die folgende Diagrammdeklaration genauso gültig wie die alte Diagrammdeklaration.
- Zwischen Knoten und Links ist ein Leerzeichen erlaubt. Zwischen einem Knoten und seinem Text sowie zwischen einem Link und seinem Text sollte jedoch kein Leerzeichen stehen. Die alte Diagrammdeklaration ist weiterhin gültig, daher ist diese neue Funktion optional und dient der Verbesserung der Lesbarkeit.
Im Folgenden findest du die neue Deklaration der Verbindungslinie, die genauso gültig ist wie die alte Deklaration der Verbindungslinie.
Kopieren
Einbetten
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
