Mermaid [1] ist eine Java-Script-basierte Open-Source-Software, die eine Markdown-basierte Syntax verwendet, um Diagramme und Grafiken zu erzeugen. Anstatt jeden Pfeil, jede Box und jede Verbindung per Maus zu platzieren, schreiben Sie stattdessen den gesamten Aufbau Ihres Diagramms als Code. Was Sie hierfür tun müssen: Den Code, der ein Diagramm beschreibt, zusammen mit Ihren anderen Projektdateien in einem Versionskontrollsystem, wie beispielsweise Git, verwalten. Sämtliche Änderungen an einem Diagramm nehmen Sie über einfache Anpassungen Ihres Mermaid-Codes vor, sodass diese dann zu jedem Zeitpunkt über das Versionskontrollsystem nachverfolgbar bleiben.

Mermaid unterstützt eine ganze Reihe an unterschiedlichen Diagrammtypen: Einfache Flussdiagramme, UML-Sequenzdiagramme, Zustandsdiagramme, Entity-Relationship-Modelle oder auch komplexe Gantt-Charts generiert Mermaid ohne Probleme. Welchen Diagrammtypen Sie verwenden, bestimmen Sie einmalig im Header Ihres Codes. Beachten Sie dabei, dass die Syntax Ihres Codes sich dabei je nach eingesetzten Diagrammtypen ändern kann. Beispielsweise reicht es für ein einfaches Tortendiagramm, entsprechende Schlüssel/ Werte-Paare zu definieren. Für ein Balkendiagramm sind aber natürlich weitere Informationen wie etwa die Namen der X- und Y-Achse notwendig. Die Dokumentation [2] beschreibt jeden Diagrammtypen und die dazu passende Syntax umfassend.

Auch wenn Mermaid primär textbasiert arbeitet, haben Sie natürlich trotzdem die Möglichkeit einer visuellen Vorschau oder Bearbeitung Ihrer Diagramme. Es stehen unterschiedliche WYSIWYG-(What you see is what you get)-Tools zur Verfügung. Mermaid selbst bietet einen Live-Editor an, mit dessen Hilfe Sie während der Eingabe Ihres Codes eine Echtzeitvorschau sehen und diesen bei Bedarf direkt anpassen. Mithilfe von Plug-ins ist eine Integration auch in externe Tools und Services möglich. So lässt sich beispielsweise Mermaid-Code in ein Confluence-Dokument einfügen, das Diagramm direkt in Confluence rendern und das Ergebnis dann schließlich im gleichen Dokument integrieren. Auf dem Atlassian Marketplace steht hierfür die passende Erweiterung zur Verfügung [3].