Mermaid.js ist ein Tool, mit dem du Diagramme aus Text generieren kannst. Es ist JavaScript-basiert, lässt sich einfach in Markdown oder HTML integrieren und wird von vielen Tools unterstützt.
Wie funktioniert Mermaid.js?
Du beschreibst ein Diagramm in der Mermaid.js-Syntax:
flowchart
A[Treffen] --> B[Prinz]
B --> C[2 Beine]Und Mermaid.js generiert Dir ein Diagramm daraus:
flowchart
A[Treffen] --> B[Prinz]
B --> C[2 Beine]Wie lassen sich die Diagramme integrieren?
Mermaid.js-Diagramme können in HTML, Markdown, Confluence/Jira, Google Docs, MS PowerPoint/Word, Visual Studio Code, WordPress (wie hier) und über 100 andere Tools integriert werden (siehe Mermaid.js Integrationen).
Meist braucht es dafür ein Plugin, das den Text automatisch als Diagramm anzeigt. Im HTML reichen ein paar Zeilen JavaScript.
Welche Diagramme sind möglich?
Hier sind ein paar typische Diagramme. Unter folgendem Link kannst Du alle unterstützten Diagramme und ihre Syntax nachschauen.
Flowchart
flowchart TD
A[Aufstehen] --> B{Kaffee da?}
B -- Ja --> C[Welt retten]
B -- Nein --> D[Panik]
D --> E[Kaffee kaufen]
E --> C
C --> F[So tun als wäre man produktiv]flowchart TD
A[Aufstehen] --> B{Kaffee da?}
B -- Ja --> C[Welt retten]
B -- Nein --> D[Panik]
D --> E[Kaffee kaufen]
E --> C
C --> F[So tun als wäre man produktiv]Sequenzdiagramm
sequenceDiagram
participant Mensch
participant Kaffeemaschine
participant Katze
Mensch->>Kaffeemaschine: Bitte Kaffee machen
Kaffeemaschine-->>Mensch: Blub blub ☕
Katze->>Mensch: Miau, ich will Aufmerksamkeit
Mensch->>Katze: Nicht jetzt
Katze-->>Mensch: Ich sitze auf deiner TastatursequenceDiagram
participant Mensch
participant Kaffeemaschine
participant Katze
Mensch->>Kaffeemaschine: Bitte Kaffee machen
Kaffeemaschine-->>Mensch: Blub blub ☕
Katze->>Mensch: Miau, ich will Aufmerksamkeit
Mensch->>Katze: Nicht jetzt
Katze-->>Mensch: Ich sitze auf deiner TastaturKlassendiagramm
classDiagram
class Katze {
+String name
+int hungerLevel
+miau()
+ignorieren()
}
class Mensch {
+String name
+kaffeeTrinken()
+arbeiten()
}
class Sofa {
+weichheit
+blockieren()
}
Katze --> Mensch : besitzt heimlich
Katze --> Sofa : belegt
Mensch --> Sofa : möchte sitzenclassDiagram
class Katze {
+String name
+int hungerLevel
+miau()
+ignorieren()
}
class Mensch {
+String name
+kaffeeTrinken()
+arbeiten()
}
class Sofa {
+weichheit
+blockieren()
}
Katze --> Mensch : besitzt heimlich
Katze --> Sofa : belegt
Mensch --> Sofa : möchte sitzenStatusdiagramm
stateDiagram-v2
[*] --> ZombieModus
ZombieModus --> KaffeeGefunden
ZombieModus --> ZurueckInsBett
KaffeeGefunden --> FastMenschlich
FastMenschlich --> Produktiv
Produktiv --> AkkuLeer
AkkuLeer --> ZombieModus
ZurueckInsBett --> [*]stateDiagram-v2
[*] --> ZombieModus
ZombieModus --> KaffeeGefunden
ZombieModus --> ZurueckInsBett
KaffeeGefunden --> FastMenschlich
FastMenschlich --> Produktiv
Produktiv --> AkkuLeer
AkkuLeer --> ZombieModus
ZurueckInsBett --> [*]Entity Relationship Diagram
erDiagram
MENSCH ||--o{ KAFFEE : trinkt
MENSCH ||--o{ TODO : ignoriert
KATZE ||--o{ TASTATUR : blockiert
KAFFEE ||--|| PRODUKTIVITAET : erzeugt
MENSCH {
int id
string name
int energie
}
KAFFEE {
int id
string sorte
int koffeinLevel
}
TODO {
int id
string aufgabe
bool erledigt
}
KATZE {
int id
string name
int chaosLevel
}erDiagram
MENSCH ||--o{ KAFFEE : trinkt
MENSCH ||--o{ TODO : ignoriert
KATZE ||--o{ TASTATUR : blockiert
KAFFEE ||--|| PRODUKTIVITAET : erzeugt
MENSCH {
int id
string name
int energie
}
KAFFEE {
int id
string sorte
int koffeinLevel
}
TODO {
int id
string aufgabe
bool erledigt
}
KATZE {
int id
string name
int chaosLevel
}Gantt Chart
gantt
title Tagesplan eines optimistischen Menschen
dateFormat HH:mm
axisFormat %H:%M
section Morgen
Aufstehen :done, a1, 08:00, 15m
Kaffee trinken :active, a2, 08:15, 30m
Produktiv wirken : a3, 08:45, 45m
section Arbeit
E-Mails öffnen : b1, 09:30, 20m
E-Mails bereuen : b2, 09:50, 40m
Meeting über Meeting : b3, 10:30, 90m
section Abend
Sport planen : c1, 18:00, 10m
Serie schauen : c2, 18:10, 4hgantt
title Tagesplan eines optimistischen Menschen
dateFormat HH:mm
axisFormat %H:%M
section Morgen
Aufstehen :done, a1, 08:00, 15m
Kaffee trinken :active, a2, 08:15, 30m
Produktiv wirken : a3, 08:45, 45m
section Arbeit
E-Mails öffnen : b1, 09:30, 20m
E-Mails bereuen : b2, 09:50, 40m
Meeting über Meeting : b3, 10:30, 90m
section Abend
Sport planen : c1, 18:00, 10m
Serie schauen : c2, 18:10, 4hKuchendiagramm
pie title Woraus mein Arbeitstag besteht
"Kaffee trinken" : 35
"Katze von Tastatur nehmen" : 25
"Meetings" : 20
"Echte Arbeit" : 10
"Snack suchen" : 10pie title Woraus mein Arbeitstag besteht
"Kaffee trinken" : 35
"Katze von Tastatur nehmen" : 25
"Meetings" : 20
"Echte Arbeit" : 10
"Snack suchen" : 10Mindmap
mindmap
root((Perfekter Sonntag))
Schlafen
Bis 10 Uhr
Vielleicht länger
Essen
Pizza
Kuchen
Snacks
Aktivitäten
Netflix
Spazieren
Nichts tun
Probleme
Montag kommt
Wäsche existiertmindmap
root((Perfekter Sonntag))
Schlafen
Bis 10 Uhr
Vielleicht länger
Essen
Pizza
Kuchen
Snacks
Aktivitäten
Netflix
Spazieren
Nichts tun
Probleme
Montag kommt
Wäsche existiertTimeline
timeline
title Entwicklung eines Softwareprojekts
Tag 1 : Alles ist klar
: Architektur ist wunderschön
Tag 2 : Erste Bugs erscheinen
: Entwickler bleibt ruhig
Tag 3 : Niemand weiß mehr warum es funktioniert
Tag 4 : Hotfix um 23:59 Uhr
: Kaffee wird kritisch
Tag 5 : Demo funktioniert
: Alle nennen es "stabil"timeline
title Entwicklung eines Softwareprojekts
Tag 1 : Alles ist klar
: Architektur ist wunderschön
Tag 2 : Erste Bugs erscheinen
: Entwickler bleibt ruhig
Tag 3 : Niemand weiß mehr warum es funktioniert
Tag 4 : Hotfix um 23:59 Uhr
: Kaffee wird kritisch
Tag 5 : Demo funktioniert
: Alle nennen es "stabil"XY Chart
xychart-beta
title "Kaffee vs. Produktivität"
x-axis "Tassen Kaffee" [0, 1, 2, 3, 4, 5, 6]
y-axis "Produktivität" 0 --> 100
line [5, 30, 70, 95, 80, 40, 10]xychart-beta
title "Kaffee vs. Produktivität"
x-axis "Tassen Kaffee" [0, 1, 2, 3, 4, 5, 6]
y-axis "Produktivität" 0 --> 100
line [5, 30, 70, 95, 80, 40, 10]Mermaid.js und KI
Da die Syntax von Mermaid.js weitgehend bekannt ist, ist ein LLM ein praktisches Mittel, um Mermaid.js Diagramme zu erstellen.
Weiter stellt Mermaid selber eine Webseite zur Verfügung, auf welcher man mit KI und Mermaid.js zusammen Diagramme erstellen und korrieren kann, siehe mermaid.ai.
Mein Fazit
Mermaid.js ist toll, wenn man schnell einfache Diagramme erstellen möchte.
Ich verwende Mermaid.js vor allem, wenn ich mit KI automatisch einfache Diagramme generieren möchte und sie einfach integriert werden sollen (z.B. HTML oder Markdown).
Es ist praktisch, wenn man mit Versionskontrolle arbeitet (z.B. Confluence oder Git), weil dann Anpassungen im Diagrammtext direkt nachvollziehbar sind.
Mermaid.js stösst an seine Grenzen, wenn man das Layout eines Diagramms genau kontrollieren möchte. Dafür ist ein Tool wie draw.io besser geeignet. Siehe dazu meinen Artikel: Diagramme mit draw.io und KI.
Im Grossen und Ganzen ist Mermaid.js beeindruckend, aber ich habe es in meiner Rolle als Business Analyst nur selten gebraucht. Wenn ich komplexere Zusammenhänge illustrieren möchte, brauche ich volle Kontrolle und dann liegen mir Tools wie draw.io besser.