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.[1]
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 Ablaufdiagramme, 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.[2]
Beispiel
[Bearbeiten | Quelltext bearbeiten]Ablaufdiagramm einer Passworteingabe
sequenceDiagram
Benutzer->>Computer: Benutzername & Passwort eingeben
Computer->>API: Login-Anfrage senden
API-->>Computer: Authentifizierungstoken zurückgeben
Computer->>Benutzer: Willkommensnachricht anzeigen
Weblinks
[Bearbeiten | Quelltext bearbeiten]Einzelnachweise
[Bearbeiten | Quelltext bearbeiten]- ↑ Knut Sveidqvist, Contributors to Mermaid: Mermaid: Generate diagrams from markdown-like text. Dezember 2014, abgerufen am 12. Oktober 2024.
- ↑ Gaurav Garg: Introduction to mermaid.js — A Simple Yet Powerful Diagramming and Charting Library. Medium.com, 4. September 2023, abgerufen am 12. Oktober 2024 (englisch).