Mermaid-Diagramme

Schreiben Sie Diagramme als Text in abgegrenzten Codeblöcken. Jamdesk rendert sie zur Build-Zeit als SVG.

Grundlegende Verwendung

Verwenden Sie einen abgegrenzten Codeblock mit der Programmiersprachenkennung mermaid:

```mermaid
flowchart LR
    A[Start] --> B[Process] --> C[End]
```

Diagrammtypen

Flussdiagramme

Die Richtung kann von oben nach unten (TD), von links nach rechts (LR), von unten nach oben (BT) oder von rechts nach links (RL) sein.

```mermaid
flowchart TD
    A[User Request] --> B{Valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[Response]
    D --> E
```

Unterdiagramme

Gruppieren Sie verwandte Knoten mithilfe von Unterdiagrammen. Dies hilft dabei, komplexe Flussdiagramme in logische Bereiche wie „Frontend“ und „Backend“ oder verschiedene Phasen einer Pipeline zu gliedern.

```mermaid
flowchart TB
    subgraph Frontend
        A[React App] --> B[Components]
    end
    subgraph Backend
        C[API Server] --> D[(Database)]
    end
    B -->|HTTP| C
```

Sequenzdiagramme

Sequenzdiagramme zeigen, wie Komponenten im Zeitverlauf interagieren. Verwenden Sie ein Sequenzdiagramm für API-Aufrufflüsse und Authentifizierungs-Handshakes. Teilnehmer werden als vertikale Lebenslinien dargestellt, zwischen denen Nachrichten fließen.

```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Client: Response
```

Klassendiagramme

Klassendiagramme stellen die Struktur objektorientierter Systeme dar, beispielsweise eines Datenmodells oder der zentralen Typen eines Dienstes. Sie zeigen Klassen mit ihren Attributen, Methoden und Beziehungen zueinander.

```mermaid
classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class Order {
        +int id
        +Date created
        +addItem()
        +checkout()
    }
    class Item {
        +String name
        +float price
    }
    User "1" --> "*" Order : places
    Order "1" --> "*" Item : contains
```

Zustandsdiagramme

Zustandsdiagramme modellieren den Lebenszyklus eines Objekts oder Prozesses. Sie zeigen alle möglichen Zustände und die Übergänge zwischen ihnen. Bestellstatus und Workflows zur Dokumentfreigabe sind typische Beispiele.

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft
    Published --> [*]
```

Entity-Relationship-Diagramme

ER-Diagramme dokumentieren Datenbankschemas und Datenmodelle. Sie zeigen Entitäten (Tabellen), ihre Attribute (Spalten) und die Beziehungen zwischen ihnen. Die Symbole geben die Kardinalität an: eins zu eins, eins zu viele oder viele zu viele.

```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ITEM : contains
    USER {
        string name
        string email
    }
    ORDER {
        int id
        date created
    }
```

Gantt-Diagramme

Gantt-Diagramme visualisieren Projektpläne und Zeitachsen. Aufgaben werden als horizontale Balken entlang einer Zeitachse dargestellt und zeigen Dauer, Abhängigkeiten und parallele Arbeit. Ein Projektplan oder eine Roadmap eignet sich dafür besonders gut.

```mermaid
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Planning
        Research       :a1, 2024-01-01, 7d
        Design         :a2, after a1, 5d
    section Development
        Backend        :b1, after a2, 14d
        Frontend       :b2, after a2, 14d
    section Launch
        Testing        :c1, after b1, 7d
        Deployment     :c2, after c1, 2d
```

Git-Graphen

Git-Graphen visualisieren Branching-Strategien und Workflows der Versionskontrolle. Sie zeigen Commits, Branches, Merges und den gesamten Verlauf eines Repositorys. Jeder Branch ist zur einfachen Identifizierung farbcodiert.

```mermaid
gitGraph
    commit id: "Initial"
    branch feature
    checkout feature
    commit id: "Add login"
    commit id: "Add auth"
    checkout main
    merge feature id: "v1.0"
    branch release
    checkout release
    commit id: "Prep 1.1"
    checkout main
    branch hotfix
    checkout hotfix
    commit id: "Fix bug"
    checkout main
    merge hotfix id: "v1.0.1"
    checkout release
    commit id: "Final QA"
    checkout main
    merge release id: "v1.1"
```

Zeitachsen

Zeitachsen zeigen Ereignisse über Zeiträume hinweg. Beginnen Sie mit dem Schlüsselwort timeline, einem optionalen title und anschließend einer Zeile pro Zeitraum, wobei Ereignisse durch Doppelpunkte getrennt werden:

```mermaid
timeline
    title Product Launch Timeline
    2024 : Research
         : First prototype
    2025 : Private beta
         : Public beta
    2026 : GA launch
```

Kreisdiagramme

Kreisdiagramme stellen proportionale Daten als Segmente eines Kreises dar. Verwenden Sie sie, wenn Teile ein Ganzes bilden, etwa bei Marktanteilen oder Umfrageergebnissen. Beschränken Sie sich für eine gute Lesbarkeit auf höchstens 6 Segmente.

```mermaid
pie title Browser Market Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 10
    "Edge" : 4
    "Other" : 2
```

Flussdiagrammformen

Verschiedene Formen vermitteln in Flussdiagrammen unterschiedliche Bedeutungen:

Pfeiltypen

Pfeile geben die Flussrichtung und Beziehungstypen an:

Breite Diagramme skalieren

Für breite Diagramme wie Gantt-Diagramme oder komplexe Git-Graphen können Sie die Komponente Mermaid direkt mit einer minWidth-Prop verwenden, damit das Diagramm nicht zusammengedrückt wird:

<Mermaid minWidth="700px">
gantt
    title Wide Project Timeline
    ...
</Mermaid>

Tipps zur Gestaltung

Für wirkungsvolle Diagramme:

• Halten Sie es einfach: Teilen Sie komplexe Abläufe in mehrere kleinere Diagramme auf.
• Beschriften Sie Ihre Pfeile, um Übergänge zu erläutern.
• Wählen Sie eine Richtung: TD (von oben nach unten) für hohe Diagramme, LR (von links nach rechts) für breite.
• Begrenzen Sie jedes Diagramm zur besseren Übersicht auf 10-15 Knoten.

Weitere Informationen

Die vollständige Referenz zur Mermaid-Syntax, einschließlich erweiterter Funktionen wie Gestaltung, Themes und zusätzlicher Diagrammtypen, finden Sie in der offiziellen Mermaid-Dokumentation.

Wie geht es weiter?