Markdown hat sich in vielen Texteditoren durchgesetzt. Der Vorteil der Auszeichnungssprache liegt darin, dass damit formatierte Texte auch ohne Umwandlung leicht lesbar sind. Mermaid will dieses Konzept auf Diagramme übertragen. Dazu wurde eine an Markdown orientierte Syntax geschaffen.

Selbst einigermaßen komplexe Flussdiagramme, die mit Mermaid erstellt wurden, lassen sich auch in Textform noch recht gut verstehen. Dazu hier ein Beispiel aus der offiziellen Dokumentation:

%% Sequence diagram code
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

Von Mermaid gerendert wird aus dem Text das folgende Diagramm:

Mermaid wurde ursprünglich von Knut Sveidqvist entwickelt und steht unter der MIT-Lizenz. Den Quellcode der Open-Source-Software findet ihr auf Github. Außerdem gibt es auch einen Live-Editor im Web. Über den könnt ihr euch mit der Mermaid-Syntax vertraut machen und eigene Diagramme erstellen. Die könnt ihr dann als SVG-Datei herunterladen oder euren Diagramm-Entwurf per Link mit einem Kollegen teilen. Der kann dann auch selbst Hand anlegen und gegebenenfalls Verbesserungen vornehmen.

Ebenfalls interessant:

• Kuchen für alle! 17 hilfreiche Tools für die Datenvisualisierung
• Tool-Check: 5 Flow-Charts für dein nächstes Projekt
• Schneller als Powerpoint: Präsentationen mit Markdown erstellen