Vollständiger Leitfaden zu Mermaid.js-Diagrammen
Lerne, wie du professionelle Diagramme mit einfacher, textbasierter Syntax erstellst
Was ist Mermaid.js?
Mermaid ist ein JavaScript-basiertes Diagramm- und Charting-Tool, das Markdown-inspirierte Textdefinitionen verwendet, um Diagramme dynamisch zu erstellen und zu verändern. Es ist ein Open-Source-Projekt, mit dem du Diagramme aus einfachen Textbeschreibungen generieren kannst.
Statt komplexer Zeichenwerkzeuge schreibst du eine codeähnliche Syntax, die dein Diagramm beschreibt, und Mermaid rendert es als visuelles Diagramm. Dieser Ansatz macht Diagramme versionskontrollierbar, leicht zu aktualisieren und ideal für die Dokumentation.
Mermaid lässt sich nahtlos in Dokumentationsplattformen, Wikis und Markdown-Dateien integrieren und ist daher ein beliebtes Werkzeug für Entwickler:innen und technische Redakteur:innen.
Warum Mermaid.js verwenden?
- Versionskontrolle: Diagramme sind Textdateien und können in Git zusammen mit deinem Code nachverfolgt werden
- Schnelle Updates: Ändere ein paar Zeilen Text statt ganze Diagramme neu zu zeichnen
- Konsistenz: Mermaid übernimmt automatisch Layout und Styling und sorgt für konsistente Diagramme
- Keine Design-Tools nötig: Kein Visio, Lucidchart oder andere teure Tools erforderlich
- Dokumentation als Code: Halte Diagramme im selben Repository wie deine Dokumentation
- Plattformübergreifend: Läuft im Browser und in Node.js und lässt sich in viele Plattformen integrieren
- Kostenlos und Open Source: Keine Lizenzkosten, aktive Community
- Mehrere Diagrammtypen: Unterstützt Flussdiagramme, Sequenzdiagramme, Klassendiagramme und mehr
Unterstützte Diagrammtypen
Mermaid unterstützt eine große Vielfalt an Diagrammtypen für unterschiedliche Dokumentationsanforderungen:
Flussdiagramm
Visualisiere Arbeitsabläufe, Prozesse und Entscheidungsbäume mit Knoten und Kanten.
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[Alternative]
C --> E[End]
D --> EAnwendungsfall: Prozessabläufe, Algorithmen, Entscheidungslogik
Sequenzdiagramm
Zeigt Interaktionen zwischen verschiedenen Akteuren oder Systemen im Zeitverlauf.
sequenceDiagram
participant User
participant API
participant DB
User->>API: Request data
API->>DB: Query
DB-->>API: Results
API-->>User: ResponseAnwendungsfall: API-Interaktionen, Systemkommunikation, Benutzerflüsse
Klassendiagramm
Modelliere objektorientierte Systeme mit Klassen, Attributen und Beziehungen.
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- DogAnwendungsfall: Softwarearchitektur, OOP-Design, Datenbankschemata
Zustandsdiagramm
Stellt Zustände und Übergänge in einem System oder Prozess dar.
stateDiagram-v2
[*] --> Idle
Idle --> Loading: Start
Loading --> Success: Complete
Loading --> Error: Fail
Success --> [*]
Error --> Idle: RetryAnwendungsfall: Zustandsautomaten, Lebenszyklus-Management, UI-Zustände
ER-Diagramm
Modelliere Datenbankstrukturen und Beziehungen zwischen Entitäten.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
int id
string name
string email
}Anwendungsfall: Datenbankdesign, Datenmodellierung, Systemarchitektur
Gantt-Diagramm
Plane und visualisiere Projektzeitpläne und Zeitachsen.
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2024-01-01, 30d
Development :a2, after a1, 45dAnwendungsfall: Projektplanung, Sprint-Zeitpläne, Roadmaps
Kreisdiagramm
Zeigt proportionale Daten und Prozentwerte visuell.
pie title Distribution
"Category A" : 42
"Category B" : 30
"Category C" : 28Anwendungsfall: Umfrageergebnisse, Marktanteile, Ressourcenverteilung
Git-Graph
Visualisiere Git-Branching-Strategien und Commit-Historie.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge developAnwendungsfall: Git-Workflow-Dokumentation, Branching-Strategien
Einstieg in Mermaid
1. Diagrammtyp wählen
Entscheide zunächst, welcher Diagrammtyp am besten darstellt, was du zeigen möchtest. Jeder Typ beginnt mit einem spezifischen Schlüsselwort wie 'flowchart', 'sequenceDiagram' oder 'classDiagram'.
2. Textsyntax schreiben
Nutze die einfache Mermaid-Syntax, um dein Diagramm zu beschreiben. Die Syntax ist intuitiv und liest sich fast wie natürliche Sprache. Zum Beispiel erzeugt 'A --> B' einen Pfeil von A nach B.
3. Diagramm vorschauen
Nutze unseren Online-Viewer oder ein Mermaid-kompatibles Tool, um dein Diagramm in Echtzeit gerendert zu sehen. Passe es an, bis du zufrieden bist.
4. Exportieren und teilen
Exportiere dein Diagramm als SVG oder PNG für Präsentationen oder teile eine URL mit deinem Team. Du kannst Mermaid auch direkt in Markdown-Dateien einbetten.
Bewährte Verfahren
- Halte Diagramme auf ein einzelnes Konzept oder einen Workflow fokussiert
- Nutze aussagekräftige Beschriftungen, die die tatsächliche Geschäftslogik beschreiben
- Zerlege komplexe Diagramme in kleinere, miteinander verknüpfte Diagramme
- Füge Kommentare mit %% hinzu, um komplexe Abschnitte zu erklären
- Verwende konsistente Namenskonventionen in deinen Diagrammen
- Teste deine Diagramme in der Zielumgebung, bevor du sie finalisierst
- Füge bei Bedarf Richtungsangaben (TD, LR) hinzu, um das Layout zu steuern
- Verwende Subgraphs, um zusammengehörige Knoten in Flussdiagrammen zu gruppieren
- Setze Styling-Optionen sparsam ein, um die Lesbarkeit zu erhalten
- Versionskontrolliere deine Diagramm-Quelldateien zusammen mit deinem Code
Häufige Anwendungsfälle
Softwaredokumentation
Dokumentiere Systemarchitektur, API-Flows und Komponenteninteraktionen zusammen mit deinem Code.
Projektplanung
Erstelle Gantt-Diagramme für Sprintplanung, Projektzeitpläne und Ressourcenallokation.
Technische Vorschläge
Visualisiere vorgeschlagene Lösungen, Systemdesigns und Architekturentscheidungen.
Nutzerreisen
Mappe Benutzerflüsse, Kundenerfahrungen und Interaktionsmuster.
Datenbankdesign
Modelliere Entitätsbeziehungen, Schemastrukturen und Datenabhängigkeiten.
Prozessdokumentation
Dokumentiere Geschäftsprozesse, Workflows und Standardarbeitsanweisungen.
Schulungsmaterialien
Erstelle klare, versionskontrollierte Diagramme für Tutorials und technische Kurse.
API-Dokumentation
Veranschauliche Request/Response-Flows, Authentifizierungssequenzen und Endpoint-Interaktionen.
Weitere Ressourcen
Häufig gestellte Fragen
Häufige Fragen zur Nutzung des Mermaid Viewers und zur Erstellung von Diagrammen
Bereit für dein erstes Diagramm?
Probiere unseren kostenlosen Online-Mermaid-Viewer aus und erstelle in Minuten professionelle Diagramme.
Mermaid Viewer öffnen