Mermaid (Software)

Mermaid (deutsch: Meerjungfrau) ist eine vereinfachte Auszeichnungssprache und ein JavaScript-basiertes Open-Source-Diagrammerstellungstool, das durch Markdown-inspirierte Textdefinitionen und einen Renderer komplexe Diagramme erstellen und ändern kann.

Ablaufdiagramm, erstellt mit Mermaid Live Editor (png)

Es ermöglicht auch Nicht-Programmierern, mithilfe des Mermaid Live Editors oder GPTs detaillierte Diagramme zu erstellen. Die Generierung von Diagrammen und Flussdiagrammen erfolgt ähnlich wie bei Markdown. Das Projekt ist in JavaScript geschrieben und verwendet Jasmine für automatisierte Tests sowie Gulp als Build-Tool.

Mermaid wurde 2015 von Knut Sveidqvist entwickelt, um den Prozess der Diagrammerstellung für Dokumentationszwecke zu vereinfachen. Zu den wichtigsten Vorteilen der Verwendung von Mermaid.js gehören:

• Textbasierte Syntax
• Unterstützung vieler Diagrammtypen (zum Beispiel Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, Kreisdiagramme)
• Hohe Anpassbarkeit – Farben, Formen, Ausrichtungen, Stile und mehr können individuell angepasst werden.
• Integration in viele Anwendungen – Funktioniert mit gängigen Markup-Sprachen wie Markdown sowie in verschiedenen Code-Editoren, GPTs und Wikis.
• Open Source – Mermaid ist unter der MIT-Lizenz frei verfügbar.

Das Tool lässt sich in zahlreiche gängige Apps und Frameworks integrieren. Es unterstützt die Einbettung in Markdown-Dateien für GitHub- und GitLab-Wikis sowie die Integration in statische Website-Generatoren wie Jekyll und in Dokumentationsseiten, die mit Sphinx oder MkDocs erstellt wurden. Zudem kann es in Confluence-Wikiseiten eingebunden und in Code-Editoren wie Visual Studio Code angezeigt werden. Darüber hinaus bietet Mermaid.js Erweiterungen für React, Vue und Angular, um die Einbindung von Diagrammen in Webprojekten zu ermöglichen. Es ist inzwischen auch möglich, Mermaid in GPTs zu verwenden, um Diagramme direkt in textbasierten Ausgaben zu generieren, was die Visualisierung in KI-gestützten Anwendungen erleichtert.

Beispiel

Ablaufdiagramm einer Passworteingabe

sequenceDiagram
    Benutzer->>Computer: Benutzername & Passwort eingeben
    Computer->>API: Login-Anfrage senden
    API-->>Computer: Authentifizierungstoken zurückgeben
    Computer->>Benutzer: Willkommensnachricht anzeigen

Weblinks

• Mermaid Chart Company