Flussdiagramme - Grundlegende Syntax

Flussdiagramme bestehen aus Knoten (geometrische Formen) und Kanten (Pfeile oder Linien). Der Mermaid-Code definiert, wie Knoten und Kanten erstellt werden, und unterstützt verschiedene Pfeiltypen, mehrrichtungige Pfeile und beliebige Verknüpfungen zu und von Untergraphen.

WARNING

Wenn Sie das Wort "end" in einem Flussdiagrammknoten verwenden, schreiben Sie das gesamte Wort oder einzelne Buchstaben groß (z. B. "End" oder "END"), oder wenden Sie diesen [Workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897) an. Das Schreiben von "end" in Kleinbuchstaben führt zum Abbruch des Flussdiagramms.

WARNING

Wenn Sie den Buchstaben "o" oder "x" als ersten Buchstaben in einem verknüpfenden Flussdiagrammknoten verwenden, fügen Sie ein Leerzeichen vor dem Buchstaben hinzu oder schreiben Sie den Buchstaben groß (z. B. "dev--- ops", "dev---Ops"). Das Schreiben von "A---oB" erzeugt eine [Kreiskante](#kreis-kantenbeispiel). Das Schreiben von "A---xB" erzeugt eine [Kreuzkante](#kreuz-kantenbeispiel).

Ein Knoten (Standard)

Code:

NOTE

Die id wird in dem Kästchen angezeigt.

Anstelle von `flowchart` kann auch `graph` verwendet werden.

Ein Knoten mit Text

Es ist auch möglich, Text in dem Kästchen festzulegen, der sich von der id unterscheidet. Wenn dies mehrmals geschieht, wird der zuletzt gefundene Text für den Knoten verwendet. Wenn Sie später Kanten für den Knoten definieren, können Sie Textdefinitionen weglassen. Die zuvor definierte wird bei der Wiedergabe des Kästchens verwendet.

Code:

Unicode-Text

Verwenden Sie " um den Unicode-Text einzuschließen.

Code:

Markdown-Formatierung

Verwenden Sie doppelte Anführungszeichen und Backticks \ text `` um den Markdown-Text einzuschließen.

Code:

Richtung

Diese Anweisung deklariert die Richtung des Flussdiagramms.

Dies deklariert, dass das Flussdiagramm von oben nach unten ausgerichtet ist (TD oder TB).

Code:

Dies deklariert, dass das Flussdiagramm von links nach rechts ausgerichtet ist (LR).

Code:

Mögliche Flussdiagramm-Ausrichtungen sind:

• TB - Von oben nach unten
• TD - Von oben nach unten/gleich wie oben nach unten
• BT - Von unten nach oben
• RL - Von rechts nach links
• LR - Von links nach rechts

Knotenformen

Ein Knoten mit abgerundeten Kanten

Code:

Ein stadionförmiger Knoten

Code:

Ein Knoten in einer Unterprogrammform

Code:

Ein Knoten in zylindrischer Form

Code:

Ein Knoten in Form eines Kreises

Code:

Ein Knoten in asymmetrischer Form

Code:

Derzeit ist nur die obige Form und nicht ihr Spiegelbild möglich. Dies kann sich mit zukünftigen Versionen ändern.

Ein Knoten (Raute)

Code:

Ein Sechseckknoten

Code:

Parallelogramm

Code:

Parallelogramm alt

Code:

Trapez

Code:

Trapez alt

Code:

Doppelkreis

Code:

Erweiterte Knotenformen in Mermaid-Flussdiagrammen (v11.3.0+)

Mermaid führt 30 neue Formen ein, um die Flexibilität und Präzision der Flussdiagramm-Erstellung zu verbessern. Diese neuen Formen bieten mehr Möglichkeiten, Prozesse, Entscheidungen, Ereignisse, Datenspeicher und andere Elemente in Ihren Flussdiagrammen visuell darzustellen und verbessern so die Klarheit und die semantische Bedeutung.

Neue Syntax für die Formdefinition

Mermaid unterstützt jetzt eine allgemeine Syntax zum Definieren von Formtypen, um die wachsende Anzahl von Formen zu berücksichtigen. Mit dieser Syntax können Sie Knoten mithilfe eines klaren und flexiblen Formats bestimmte Formen zuweisen:

A@{ shape: rect }

Diese Syntax erstellt einen Knoten A als Rechteck. Er wird genauso gerendert wie A["A"] oder A.

Vollständige Liste der neuen Formen

Im Folgenden finden Sie eine umfassende Liste der neu eingeführten Formen und ihrer entsprechenden semantischen Bedeutungen, Kurzbezeichnungen und Aliase:

Beispiel-Flussdiagramm mit neuen Formen

Hier ist ein Beispiel-Flussdiagramm, das einige der neu eingeführten Formen verwendet:

Code:

Prozess

Code:

Ereignis

Code:

Endpunkt (Stadion)

Code:

Unterprozess

Code:

Datenbank (Zylinder)

Code:

Start (Kreis)

Code:

Ungerade

Code:

Entscheidung (Raute)

Code:

Bedingung vorbereiten (Sechseck)

Code:

Dateneingabe/-ausgabe (rechts geneigt)

Code:

Dateneingabe/-ausgabe (links geneigt)

Code:

Prioritätsaktion (Trapezbasis unten)

Code:

Manuelle Bedienung (Trapezbasis oben)

Code:

Stopp (Doppelkreis)

Code:

Textblock

Code:

Karte (gekerbtes Rechteck)

Code:

Ausgezeichneter/Schattiger Prozess

Code:

Start (kleiner Kreis)

Code:

Stopp (umrahmter Kreis)

Code:

Gabel/Verknüpfung (langes Rechteck)

Code:

Zusammenfügen (Sanduhr)

Code:

Kommentar (geschweifte Klammer)

Code:

Kommentar rechts (geschweifte Klammer rechts)

Code:

Kommentar mit Klammern auf beiden Seiten

Code:

Com-Link (Blitz)

Code:

Dokument

Code:

Verzögerung (halbrundes Rechteck)

Code:

Direktzugriffsspeicher (horizontaler Zylinder)

Code:

Datenspeicher (ausgezeichneter Zylinder)

Code:

Anzeige (gekrümmtes Trapez)

Code:

Geteilter Prozess (geteiltes Rechteck)

Code:

Extrahieren (kleines Dreieck)

Code:

Interner Speicher (Fensterbereich)

Code:

Verbindung (gefüllter Kreis)

Code:

Ausgezeichnetes Dokument

Code:

Schleifengrenze (gekerbtes Fünfeck)

Code:

Manuelle Datei (umgedrehtes Dreieck)

Code:

Manuelle Eingabe (schräges Rechteck)

Code:

Mehrere Dokumente (gestapeltes Dokument)

Code:

Mehrere Prozesse (gestapeltes Rechteck)

Code:

Papierband (Fahne)

Code:

Gespeicherte Daten (Schmetterlingsrechteck)

Code:

Zusammenfassung (gekreuzter Kreis)

Code:

Markiertes Dokument

Code:

Markierter Prozess (markiertes Rechteck)

Code:

Spezielle Formen in Mermaid-Flussdiagrammen (v11.3.0+)

Mermaid führt auch 2 spezielle Formen ein: icon und image. Mit diesen Formen können Sie Symbole und Bilder direkt in Ihre Flussdiagramme einfügen, wodurch mehr visueller Kontext und Klarheit geschaffen werden.

Symbolform

Sie können die Form icon verwenden, um ein Symbol in Ihr Flussdiagramm einzubinden. Um Symbole zu verwenden, müssen Sie zuerst das Symbolpaket registrieren. Befolgen Sie die Anweisungen hier. Die Syntax zum Definieren einer Symbolform lautet wie folgt:

Code:

Parameter

• icon: Der Name des Symbols aus dem registrierten Symbolpaket.
• form: Gibt die Hintergrundform des Symbols an. Wenn nicht definiert, hat das Symbol keinen Hintergrund. Zu den Optionen gehören:
  • square
  • circle
  • rounded
• label: Die Textbeschriftung, die dem Symbol zugeordnet ist. Dies kann eine beliebige Zeichenkette sein. Wenn nicht definiert, wird keine Beschriftung angezeigt.
• pos: Die Position der Beschriftung. Wenn nicht definiert, wird die Beschriftung standardmäßig unten im Symbol angezeigt. Mögliche Werte sind:
  • t
  • b
• h: Die Höhe des Symbols. Wenn nicht definiert, wird standardmäßig 48 verwendet, was das Minimum ist.

Bildform

Sie können die Form image verwenden, um ein Bild in Ihr Flussdiagramm einzubinden. Die Syntax zum Definieren einer Bildform lautet wie folgt:

Code:

Parameter

• img: Die URL des anzuzeigenden Bildes.
• label: Die Textbeschriftung, die dem Bild zugeordnet ist. Dies kann eine beliebige Zeichenkette sein. Wenn nicht definiert, wird keine Beschriftung angezeigt.
• pos: Die Position der Beschriftung. Wenn nicht definiert, wird die Beschriftung standardmäßig unten im Bild angezeigt. Mögliche Werte sind:
  • t
  • b
• w: Die Breite des Bildes. Wenn nicht definiert, wird standardmäßig die natürliche Breite des Bildes verwendet.
• h: Die Höhe des Bildes. Wenn nicht definiert, wird standardmäßig die natürliche Höhe des Bildes verwendet.
• constraint: Bestimmt, ob das Bild die Knotengröße einschränken soll. Diese Einstellung stellt auch sicher, dass das Bild sein ursprüngliches Seitenverhältnis beibehält und die Höhe (h) entsprechend der Breite (w) angepasst wird. Wenn nicht definiert, wird standardmäßig off verwendet. Mögliche Werte sind:
  • on
  • off

Diese neuen Formen bieten zusätzliche Flexibilität und visuelle Attraktivität für Ihre Flussdiagramme und machen sie informativer und ansprechender.

Verbindungen zwischen Knoten

Knoten können mit Verbindungen/Kanten verbunden werden. Es ist möglich, verschiedene Verbindungstypen zu haben oder einem Link eine Textzeichenfolge anzuhängen.

Eine Verbindung mit Pfeilspitze

Code:

Eine offene Verbindung

Code:

Text auf Verbindungen

Code:

oder

Code:

Eine Verbindung mit Pfeilspitze und Text

Code:

oder

Code:

Gestrichelte Verbindung

Code:

Gestrichelte Verbindung mit Text

Code:

Dicke Verbindung

Code:

Dicke Verbindung mit Text

Code:

Eine unsichtbare Verbindung

Dies kann in einigen Fällen ein nützliches Werkzeug sein, wenn Sie die Standardpositionierung eines Knotens ändern möchten.

Code:

Verkettung von Verbindungen

Es ist möglich, viele Verbindungen in derselben Zeile zu deklarieren, wie unten gezeigt:

Code:

Es ist auch möglich, mehrere Knotenverbindungen in derselben Zeile zu deklarieren, wie unten gezeigt:

Code:

Sie können dann Abhängigkeiten auf sehr aussagekräftige Weise beschreiben. Wie die Einzeiler unten:

Code:

Wenn Sie dasselbe Diagramm mit der grundlegenden Syntax beschreiben, benötigen Sie vier Zeilen. Ein Wort der Warnung, man könnte damit über Bord gehen und das Flussdiagramm im Markdown-Format schwerer lesbar machen. Das schwedische Wort lagom fällt mir ein. Es bedeutet nicht zu viel und nicht zu wenig. Das gilt auch für aussagekräftige Syntaxen.

Neue Pfeiltypen

Es werden neue Pfeiltypen unterstützt:

• Kreiskante
• Kreuzkante

Kreis-Kantenbeispiel

Code:

Kreuz-Kantenbeispiel

Code:

Mehrrichtungspfeile

Es besteht die Möglichkeit, mehrrichtungige Pfeile zu verwenden.

Code:

Minimale Länge einer Verbindung

Jeder Knoten im Flussdiagramm wird letztendlich basierend auf den Knoten, mit denen er verknüpft ist, einer Rangfolge im gerenderten Diagramm zugewiesen, d. h. einer vertikalen oder horizontalen Ebene (abhängig von der Ausrichtung des Flussdiagramms). Standardmäßig können Verbindungen eine beliebige Anzahl von Rängen umfassen, aber Sie können verlangen, dass eine Verbindung länger als andere ist, indem Sie zusätzliche Bindestriche in die Verbindungsdefinition hinzufügen.

Im folgenden Beispiel werden zwei zusätzliche Bindestriche in die Verbindung von Knoten B zu Knoten E eingefügt, sodass sie zwei Ränge mehr als reguläre Verbindungen umfasst:

Code:

Hinweis Verbindungen können vom Rendering-Engine möglicherweise immer noch länger als die angeforderte Anzahl von Rängen gemacht werden, um andere Anforderungen zu berücksichtigen.

Wenn die Verbindungsbeschriftung in der Mitte der Verbindung geschrieben wird, müssen die zusätzlichen Bindestriche auf der rechten Seite der Verbindung hinzugefügt werden. Das folgende Beispiel ist dem vorherigen äquivalent:

Code:

Bei gestrichelten oder dicken Verbindungen sind die hinzuzufügenden Zeichen Gleichheitszeichen oder Punkte, wie in der folgenden Tabelle zusammengefasst:

Länge	1	2	3
Normal	---	----	-----
Normal mit Pfeil	-->	--->	---->
Dick	===	====	=====
Dick mit Pfeil	==>	===>	====>
Gestrichelt	-.-	-..-	-...-
Gestrichelt mit Pfeil	-.->	-..->	-...->

Sonderzeichen die die Syntax brechen

Es ist möglich, Text in Anführungszeichen zu setzen, um problematischere Zeichen darzustellen. Wie im Beispiel unten:

Code:

Entity-Codes zum Maskieren von Zeichen

Es ist möglich, Zeichen mit der hier gezeigten Syntax zu maskieren.

Code:

Die angegebenen Zahlen sind Basis 10, also kann # als #35; codiert werden. Es wird auch unterstützt, HTML-Zeichennamen zu verwenden.

Untergraphen

subgraph title
    graph definition
end

Ein Beispiel unten:

Code:

Sie können auch eine explizite ID für den Untergraphen festlegen.

Code:

Flussdiagramme

Mit dem Graphentyp Flussdiagramm ist es auch möglich, Kanten zu und von Untergraphen zu setzen, wie im untenstehenden Flussdiagramm:

Code:

Richtung in Untergraphen

Mit dem Graphentyp Flussdiagramme können Sie die Richtungsanweisung verwenden, um die Richtung festzulegen, in die der Untergraph gerendert wird, wie in diesem Beispiel:

Code:

Einschränkung

Wenn einer der Knoten eines Untergraphen mit der Außenseite verknüpft ist, wird die Richtung des Untergraphen ignoriert. Stattdessen erbt der Untergraph die Richtung des übergeordneten Graphen:

Code:

Markdown-Zeichenketten

Die Funktion "Markdown-Zeichenketten" verbessert Flussdiagramme und Mindmaps, indem sie einen vielseitigeren Zeichentyp bietet, der Textformatierungsoptionen wie Fett und Kursiv unterstützt und Text automatisch innerhalb von Beschriftungen umbrechen kann.

Code:

Formatierung:

• Für fetten Text verwenden Sie doppelte Sternchen (**) vor und nach dem Text.
• Für kursiv verwenden Sie einfache Sternchen (*) vor und nach dem Text.
• Bei traditionellen Zeichenketten mussten Sie <br>-Tags hinzufügen, damit der Text in Knoten umbrochen wird. Markdown-Zeichenketten brechen Text jedoch automatisch um, wenn er zu lang wird, und ermöglichen es Ihnen, eine neue Zeile zu beginnen, indem Sie einfach ein Zeilenvorschubzeichen anstelle eines <br>-Tags verwenden.

Diese Funktion gilt für Knotenbeschriftungen, Kantenbeschriftungen und Untergraphenbeschriftungen.

Das automatische Umbrüche kann deaktiviert werden, indem man verwendet:

---
config:
  markdownAutoWrap: false
---
graph LR

Interaktion

Es ist möglich, ein Klickereignis an einen Knoten zu binden. Der Klick kann entweder zu einem Javascript-Callback oder zu einem Link führen, der in einem neuen Browser-Tab geöffnet wird.

NOTE

Diese Funktionalität ist deaktiviert, wenn `securityLevel='strict'` verwendet wird, und aktiviert, wenn `securityLevel='loose'` verwendet wird.

click nodeId callback
click nodeId call callback()

• nodeId ist die ID des Knotens
• callback ist der Name einer Javascript-Funktion, die auf der Seite definiert ist, die den Graphen anzeigt. Die Funktion wird mit der nodeId als Parameter aufgerufen.

Beispiele für die Verwendung von Tooltips unten:

<script>
  window.callback = function () {
    alert('Ein Callback wurde ausgelöst');
  };
</script>

Der Tooltip-Text ist in doppelte Anführungszeichen eingeschlossen. Die Stile des Tooltips werden durch die Klasse .mermaidTooltip festgelegt.

Code:

Erfolg Die Tooltip-Funktionalität und die Möglichkeit, Links zu URLs herzustellen, sind ab Version 0.5.2 verfügbar.

?> Aufgrund von Einschränkungen bei der Verarbeitung von JavaScript-Callback-Funktionen durch Docsify kann eine alternative funktionierende Demo für den obigen Code unter diesem jsfiddle angesehen werden.

Links werden standardmäßig im selben Browser-Tab/-Fenster geöffnet. Dies kann geändert werden, indem ein Linkziel zur Klickdefinition hinzugefügt wird (_self, _blank, _parent und _top werden unterstützt):

Code:

Anfängertipp – ein vollständiges Beispiel mit interaktiven Links in einem HTML-Kontext:

<body>
  <pre class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "Tooltip"
        click B "https://www.github.com" "Dies ist ein Link"
        click C call callback() "Tooltip"
        click D href "https://www.github.com" "Dies ist ein Link"
  </pre>

  <script>
    window.callback = function () {
      alert('Ein Callback wurde ausgelöst');
    };
    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

Kommentare

Kommentare können in ein Flussdiagramm eingegeben werden, die vom Parser ignoriert werden. Kommentare müssen in einer eigenen Zeile stehen und müssen mit %% (doppelte Prozentzeichen) eingeleitet werden. Jeder Text nach dem Beginn des Kommentars bis zur nächsten neuen Zeile wird als Kommentar behandelt, einschließlich aller Fluss-Syntax

Stil und Klassen

Verbindungsstile

Es ist möglich, Verbindungen zu stylen. Beispielsweise möchten Sie möglicherweise eine Verbindung stylen, die im Fluss rückwärts verläuft. Da Verbindungen nicht wie Knoten über IDs verfügen, ist eine andere Möglichkeit erforderlich, um zu entscheiden, an welchen Stil die Verbindungen angehängt werden sollen. Anstelle von IDs wird die Ordnungszahl verwendet, wann die Verbindung im Diagramm definiert wurde, oder es wird ein Standardwert verwendet, der auf alle Verbindungen angewendet werden soll. Im folgenden Beispiel gehört der im linkStyle-Statement definierte Stil zur vierten Verbindung im Diagramm:

linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

Es ist auch möglich, mehreren Verbindungen in einer einzigen Anweisung einen Stil hinzuzufügen, indem die Verbindungsnummern durch Kommas getrennt werden:

linkStyle 1,2,7 color:blue;

Stilisierung von Linienkurven

Es ist möglich, den Kurventyp für Linien zwischen Elementen zu stylen, wenn die Standardmethode nicht Ihren Anforderungen entspricht. Verfügbare Kurvenstile umfassen basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter und stepBefore.

In diesem Beispiel verwendet ein von links nach rechts verlaufendes Diagramm den Kurvenstil stepBefore:

%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR

Eine vollständige Liste der verfügbaren Kurven, einschließlich einer Erklärung benutzerdefinierter Kurven, finden Sie in der Shapes-Dokumentation im d3-shape-Projekt.

Einen Knoten stylen

Es ist möglich, einem Knoten spezifische Stile wie einen dickeren Rahmen oder eine andere Hintergrundfarbe anzuwenden.

Code:

Klassen

Bequemer als die ständige Definition des Stils ist es, eine Klasse von Stilen zu definieren und diese Klasse an die Knoten anzuhängen, die ein anderes Aussehen haben sollen.

Eine Klassendefinition sieht wie das Beispiel unten aus:

    classDef className fill:#f9f,stroke:#333,stroke-width:4px;

Es ist auch möglich, mehreren Klassen in einer Anweisung einen Stil zuzuweisen:

    classDef firstClassName,secondClassName font-size:12pt;

Das Anhängen einer Klasse an einen Knoten erfolgt wie unten gezeigt:

    class nodeId1 className;

Es ist auch möglich, einer Liste von Knoten in einer Anweisung eine Klasse hinzuzufügen:

    class nodeId1,nodeId2 className;

Eine kürzere Form zum Hinzufügen einer Klasse besteht darin, den Klassennamen mithilfe des Operators ::: an den Knoten anzuhängen, wie unten gezeigt:

Code:

Diese Form kann verwendet werden, wenn mehrere Verbindungen zwischen Knoten deklariert werden:

Code:

CSS-Klassen

Es ist auch möglich, Klassen in CSS-Stilen vorzudefinieren, die aus der Diagrammdefinition angewendet werden können, wie im folgenden Beispiel gezeigt:

Beispielstil

<style>
  .cssClass > rect {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

Beispieldefinition

Code: