Mermaid

Einführung

Mermaid ist eine JavaScript-basierte Diagramm- und Visualisierungsbibliothek, die es ermöglicht, Diagramme und Flussdiagramme mithilfe von Textbeschreibungen zu erstellen. Mermaid wird häufig in Markdown-Dokumenten (z. B. in GitHub, GitLab oder Confluence) verwendet, um komplexe Zusammenhänge visuell darzustellen.

Vorteile von Mermaid:

  • Einfache Integration in Markdown-Dokumente.
  • Keine externen Tools nötig – Diagramme werden direkt im Browser gerendert.
  • Unterstützt eine Vielzahl von Diagrammtypen.
  • Ideal für Dokumentationen, Präsentationen und technische Spezifikationen.

Mögliche Diagramme

Ablauf-Diagramm (Flowchart)

Ablaufdiagramme visualisieren Prozesse oder Workflows. Sie bestehen aus Knoten (Schritte) und Verbindungen (Pfeile), die die Reihenfolge der Schritte darstellen.

Beispiel:

flowchart TD  
A[Start] --> B{Entscheidung}
B -->|Ja| C[Prozess 1]
B -->|Nein| D[Prozess 2]
C --> E[Ende]
D --> E

flowchart TD  
A[Start] --> B{Entscheidung} 
B -->|Ja| C[Prozess 1] 
B -->|Nein| D[Prozess 2] 
C --> E[Ende] 
D --> E

Erklärung:

  • flowchart TD: Definiert ein Ablaufdiagramm von oben nach unten.
  • A[Start]: Ein Knoten mit der Beschriftung “Start”.
  • -->: Verbindung zwischen Knoten.
  • |Ja| und |Nein|: Beschriftungen für die Verbindungen.

Klassen-Diagramm (Class Diagram)

Klassendiagramme zeigen die Struktur von Klassen, ihre Attribute, Methoden und Beziehungen zueinander.

Beispiel:

classDiagram
class Tier {
  -name: String
  +essen()
}
class Hund {
  +bellen()
}
Tier <|-- Hund

classDiagram
class Tier {
  -name: String
  +essen()
}
class Hund {
  +bellen()
}
Tier <|-- Hund

Erklärung:

  • classDiagram: Definiert ein Klassendiagramm.
  • Tier und Hund: Klassen mit Attributen (-name) und Methoden (+essen()).
  • <|--: Vererbungsbeziehung (Hund erbt von Tier).

Sequenz-Diagramm (Sequence Diagram)

Sequenzdiagramme visualisieren Interaktionen zwischen Objekten oder Akteuren in einer zeitlichen Abfolge.

Beispiel:

sequenceDiagram  Alice->>Bob: Hallo! 
Bob-->>Alice: Hallo zurück!

sequenceDiagram  Alice->>Bob: Hallo! Bob-->>Alice: Hallo zurück!

Erklärung:

  • sequenceDiagram: Definiert ein Sequenzdiagramm.
  • Alice->>Bob: Nachricht von Alice an Bob.
  • -->>: Antwort von Bob an Alice.

Entity-Relationship-Diagramm (ER-Diagramm)

ER-Diagramme zeigen die Beziehungen zwischen Entitäten in einer Datenbank.

Beispiel:

erDiagram
  KUNDE ||--o{ BESTELLUNG : "hat"
  KUNDE {
    int *id PK
    string name
  }
  BESTELLUNG {
    int *id PK
    date datum
  }

erDiagram  KUNDE ||--o{ BESTELLUNG : hat KUNDE { int id PK string  name } BESTELLUNG { int id PK date datum }

Erklärung:

  • erDiagram: Definiert ein ER-Diagramm.
  • KUNDE ||--o{ BESTELLUNG: Ein Kunde hat viele Bestellungen.
  • PK: Primärschlüssel.

Status-Diagramm (State Diagram)

Statusdiagramme zeigen die Zustände eines Systems und die Übergänge zwischen diesen Zuständen.

Beispiel:

stateDiagram-v2
    [*] --> Off
    Off --> On: Einschalten
    On --> Off: Ausschalten

stateDiagram-v2
    [*] --> Off
    Off --> On: Einschalten
    On --> Off: Ausschalten

Erklärung:

  • stateDiagram-v2: Definiert ein Statusdiagramm.
  • [*]: Startzustand.
  • Off --> On: Übergang von “Off” zu “On” durch “Einschalten”.

Mindmap-Diagramm

Mindmaps visualisieren hierarchische Ideen oder Konzepte.

Beispiel:

mindmap
  root((Thema))
    Zweig 1
      Unterthema 1
      Unterthema 2
    Zweig 2
      Unterthema 3

mindmap
  root((Thema))
    Zweig 1
      Unterthema 1
      Unterthema 2
    Zweig 2
      Unterthema 3

Erklärung:

  • mindmap: Definiert eine Mindmap.
  • root((Thema)): Zentrales Thema.
  • Einrückungen definieren die Hierarchie.

Anforderungs-Diagramm (Requirement Diagram)

Anforderungsdiagramme zeigen Anforderungen und ihre Beziehungen.

Beispiel:

requirementDiagram
  requirement Anforderung1 {
    id: 1
    text: "Das System muss sicher sein."
  }

  element System {
    type: software
  }

  System - satisfies -> Anforderung1

requirementDiagram
  requirement Anforderung1 {
    id: 1
    text: "Das System muss sicher sein."
  }

  element System {
    type: software
  }

  System - satisfies -> Anforderung1

Erklärung:

  • requirementDiagram: Definiert ein Anforderungsdiagramm.
  • requirement: Definiert eine Anforderung.
  • satisfies: Beziehung zwischen Element und Anforderung.

Gantt-Diagramm

Gantt-Diagramme visualisieren Projektpläne und Zeitachsen.

Beispiel:

gantt
  title Projektplan
  dateFormat YYYY-MM-DD
  section Phase 1
  Aufgabe 1 :a1, 2024-01-01, 7d
  Aufgabe 2 :after a1, 3d

gantt
  title Projektplan
  dateFormat YYYY-MM-DD
  section Phase 1
  Aufgabe 1 :a1, 2024-01-01, 7d
  Aufgabe 2 :after a1, 3d

Erklärung:

  • gantt: Definiert ein Gantt-Diagramm.
  • dateFormat: Format für Datumsangaben.
  • Aufgabe 1 :a1, 2024-01-01, 7d: Aufgabe 1 dauert 7 Tage ab dem 1. Januar 2024.

Zeitlinie (Timeline)

Zeitlinien zeigen Ereignisse in einer chronologischen Abfolge.

Beispiel:

timeline
    title Wichtiges Ereignisse 2024 - 2025
    2024 : Ereignis 1
    2025 : Ereignis 2

timeline
    title Wichtiges Ereignisse 2024 - 2025
    2024 : Ereignis 1
    2025 : Ereignis 2

Erklärung:

  • timeline: Definiert eine Zeitlinie.
  • 2024 : Ereignis 1: Ereignis im Jahr 2024.

Weiterführende Informationen

Mermaid Open-Source