Mermaid
Mermaid ist ein JavaScript-basiertes Open-Source-Tool zur Erstellung von Diagrammen aus Textdefinitionen. Statt Formen manuell zu ziehen, schreiben Sie Markdown-ähnliche Syntax, die automatisch in Flussdiagramme, Sequenzdiagramme, Gantt-Charts und weitere Visualisierungen gerendert wird.
Ausführliche Erklärung
Mermaid wurde entwickelt, um Dokumentation mit der Entwicklungsgeschwindigkeit Schritt halten zu lassen. Das zentrale Problem, das Mermaid adressiert, ist die sogenannte "Doc-Rot": Dokumentation und Diagramme kosten wertvolle Zeit und veralten schnell. Gleichzeitig führt das Fehlen von Diagrammen zu ineffizienter Zusammenarbeit und Wissensverlust. Mit Mermaid erstellen Sie Diagramme als Code – sie leben als reiner Text, lassen sich versionieren und bei Bedarf mit wenigen Zeilen anpassen.
Für KMU ist Mermaid besonders relevant, weil es keine teuren Lizenzen für grafische Diagramm-Tools erfordert und keine Einarbeitungszeit für komplexe Benutzeroberflächen. Die MIT-Lizenz ermöglicht kostenlose kommerzielle Nutzung. Mermaid wird nativ in gängigen Entwicklungsplattformen wie GitHub, GitLab und in vielen Dokumentationswerkzeugen unterstützt. Die Syntax ist an Markdown angelehnt und lässt sich in einem Tag erlernen. Mittlerweile existieren über 20 Diagrammtypen: von einfachen Flussdiagrammen über Entity-Relationship-Diagramme bis zu Gantt-Charts, Mindmaps und State-Diagrammen.
Der "Diagrams as Code"-Ansatz ermöglicht es technischen und nicht-technischen Teams, Prozesse zu visualisieren, ohne den Kontext wechseln zu müssen. Änderungen an Diagrammen werden in Versionskontrollsystemen wie Git nachvollziehbar. Da die Diagramme als Text vorliegen, können sie einfach in Code-Reviews integriert werden. Zudem sind moderne KI-Tools in der Lage, Mermaid-Syntax zu generieren, was die Erstellung weiter beschleunigt.
Technisch läuft Mermaid im Browser und benötigt keine Server-Installation. Die Bibliothek kann per CDN eingebunden oder als npm-Paket installiert werden. Ein kostenloses Online-Tool unter mermaid.live ermöglicht schnelles Prototyping ohne lokale Installation.
Praxisbeispiel
Eine IT-Beratung mit 12 Mitarbeitern dokumentiert ihre Kundenprojekte in einem internen Wiki auf Basis von Markdown-Dateien. Bisher wurden Prozessabläufe mündlich erklärt oder in Word-Dokumenten festgehalten, was bei Änderungen aufwändig war. Seit die Firma Mermaid einsetzt, schreiben Berater:innen Ablaufdiagramme direkt in die Projektdokumentation. Ein Deployment-Prozess wird mit zehn Zeilen Mermaid-Code als Sequenzdiagramm dargestellt, das automatisch gerendert wird. Änderungen am Prozess bedeuten nur die Anpassung weniger Textzeilen – das Diagramm aktualisiert sich automatisch.
Code-Beispiel
```mermaid
flowchart TD
A[Kundenanfrage] --> B{Budget verfügbar?}
B -->|Ja| C[Angebot erstellen]
B -->|Nein| D[Anfrage ablehnen]
C --> E[Angebot versenden]
E --> F{Angenommen?}
F -->|Ja| G[Projekt starten]
F -->|Nein| H[Archivieren]
```Quellen
Diese Definition verlinken
Sie dürfen diese Definition gern zitieren oder verlinken — mit Quellenangabe.
„Mermaid“ — Definition im Strukturaflow IT Glossar: https://begriffe.strukturaflow.com/begriff/mermaid <a href="https://begriffe.strukturaflow.com/begriff/mermaid">Mermaid</a> — Definition im Strukturaflow IT Glossar