Mermaid-Diagramme

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

Grundlegende Verwendung

Verwenden Sie einen eingezäunten Codeblock mit dem Sprachbezeichner 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
```

Untergraphen

Gruppieren Sie zusammengehörige Knoten mit Teilgraphen. Damit können Sie ein großes Flussdiagramm in Abschnitte wie „Frontend“ und „Backend“ oder in Pipeline-Stufen unterteilen.

```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 über die Zeit miteinander interagieren. Verwenden Sie ein Sequenzdiagramm für API-Aufrufabläufe und Authentifizierungs-Handshakes. Teilnehmer erscheinen als vertikale Lebenslinien. Nachrichten verlaufen zwischen ihnen.

```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database

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

Klassendiagramme

Klassendiagramme zeigen die Struktur objektorientierter Systeme, etwa ein Datenmodell oder die Kerntypen eines Dienstes. Sie zeigen Klassen mit ihren Attributen, Methoden und Beziehungen.

```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 jeden Zustand und die Übergänge zwischen ihnen. Bestellstatus und Freigabe-Workflows für Dokumente sind typische Beispiele.

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

Entity-Relationship-Diagramme

ER-Diagramme dokumentieren Datenbankschemata und Datenmodelle. Sie zeigen Entitäten (Tabellen), ihre Attribute (Spalten) und die Beziehungen zwischen ihnen. Die Symbole markieren die Kardinalität: 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 zeigen Projektpläne. Aufgaben erscheinen als horizontale Balken auf einer Zeitachse, mit Dauer, Abhängigkeiten und parallel laufender Arbeit. Verwenden Sie eines für einen Projektplan oder eine Roadmap.

```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 zeigen Verzweigungsstrategien und Versionskontroll-Workflows: Commits, Branches, Merges und die Repository-Historie. Jeder Branch erhält eine eigene Farbe.

```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"
```

Zeitachsendiagramme

Zeitleisten zeigen Ereignisse über Zeiträume hinweg. Beginnen Sie mit dem Schlüsselwort timeline, optional einem title, und dann 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 zeigen Anteile als Segmente eines Kreises. Verwenden Sie eines, wenn Teile ein Ganzes ergeben, etwa Marktanteile oder Umfrageergebnisse. Halten Sie sich an höchstens 6 Segmente.

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

Formen in Flussdiagrammen

Jede Form hat in Flussdiagrammen eine übliche Bedeutung:

Pfeiltypen

Pfeile zeigen die Flussrichtung und Beziehungstypen an:

Breite Diagramme skalieren

Verwenden Sie die Komponente Mermaid mit der Prop minWidth, damit ein breites Diagramm, etwa ein Gantt-Diagramm oder ein großer Git-Graph, nicht zusammengedrückt wird:

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

Zum Vergrößern anklicken

Klicken Sie auf ein Diagramm, um es ab einer Bildschirmbreite von 768px im Vollbild zu öffnen. Mit der Tastatur fokussieren Sie das Diagramm und drücken Enter. Schließen Sie es mit Escape, der Schaltfläche zum Schließen oder einem Klick außerhalb des Diagramms.

Deaktivieren Sie dies für ein einzelnes Diagramm mit der Komponentenform und noZoom:

<Mermaid data-no-zoom="true">
graph LR
    A[Request] --> B[Response]
</Mermaid>

Diagramme, die als ```mermaid-Codeblöcke geschrieben sind, öffnen sich immer im Vollbild.

Tipps zur Gestaltung

• Teilen Sie einen großen Ablauf in kleinere Diagramme auf.
• Beschriften Sie Ihre Pfeile, um Übergänge zu erklären.
• 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 auf 10–15 Knoten.

Um einen Knoten einzufärben, verwenden Sie style für einen einzelnen Knoten oder classDef für eine Gruppe:

Jamdesk behält Ihre Farben im Dunkelmodus bei. Eine Füllung ohne Textfarbe erhält eine Beschriftungsfarbe, die Jamdesk so wählt, dass sie auf der Füllung gut lesbar ist.

Weitere Informationen

Die vollständige Syntax, einschließlich Gestaltung, Theming und weiterer Diagrammtypen, finden Sie in der offiziellen Mermaid-Dokumentation.

Wie geht es weiter?