Diagramme

Markdown unterstützt das Erstellen verschiedener Diagrammtypen und Flussdiagramme mit Mermaid-Syntax, wodurch Ihre Dokumentation visuell ausgedrückt wird.

Einführung in Mermaid

Mermaid ist ein textbasiertes Diagrammgenerierungstool, das mehrere Diagrammtypen unterstützt:

• Flussdiagramm
• Sequenzdiagramm
• Gantt-Diagramm
• Klassendiagramm
• Zustandsdiagramm
• Kreisdiagramm
• Benutzerreise
• Git-Graph

Grundsyntax

Flussdiagramm

```mermaid
flowchart TD
    A[Start] --> B{Logged in?}
    B -->|Yes| C[Show Home]
    B -->|No| D[Show Login]
    C --> E[End]
    D --> F[User Login]
    F --> G{Login Success?}
    G -->|Yes| C
    G -->|No| H[Show Error]
    H --> D

**Gerenderte Ausgabe:**

```mermaid
flowchart TD
    A[Start] --> B{Logged in?}
    B -->|Yes| C[Show Home]
    B -->|No| D[Show Login]
    C --> E[End]
    D --> F[User Login]
    F --> G{Login Success?}
    G -->|Yes| C
    G -->|No| H[Show Error]
    H --> D

Sequenzdiagramm

```mermaid
sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant Database
    
    User->>Frontend: Login Request
    Frontend->>Backend: Validate User
    Backend->>Database: Query User Data
    Database-->>Backend: Return User Info
    Backend-->>Frontend: Validation Result
    Frontend-->>User: Login Response

**Gerenderte Ausgabe:**

```mermaid
sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant Database
    
    User->>Frontend: Login Request
    Frontend->>Backend: Validate User
    Backend->>Database: Query User Data
    Database-->>Backend: Return User Info
    Backend-->>Frontend: Validation Result
    Frontend-->>User: Login Response

Flussdiagramm-Details

Knotentypen

```mermaid
flowchart LR
    A[Rechteckknoten]
    B(Rundes Knoten)
    C((Kreisknoten))
    D{Diamantknoten}
    E[[Subroutine]]
    F[(Datenbank)]
    G>Label Knoten]

**Gerenderte Ausgabe:**

```mermaid
flowchart LR
    A[Rechteckknoten]
    B(Rundes Knoten)
    C((Kreisknoten))
    D{Diamantknoten}
    E[[Subroutine]]
    F[(Datenbank)]
    G>Label Knoten]

Kantentypen

```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L

**Gerenderte Ausgabe:**

```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L

Richtungssteuerung

<!-- Von Oben nach Unten -->
```mermaid
flowchart TD
    A --> B

flowchart BT
    A --> B

flowchart LR
    A --> B

flowchart RL
    A --> B

### Komplexes Flussdiagramm-Beispiel

```markdown
```mermaid
flowchart TD
    Start([Projektstart]) --> Analysis[Anforderungsanalyse]
    Analysis --> Design[Systementwurf]
    Design --> Dev{Entwicklungsphase}
    
    Dev --> Frontend[Frontend-Entwicklung]
    Dev --> Backend[Backend-Entwicklung]
    Dev --> Database[Datenbankentwurf]
    
    Frontend --> FrontTest[Frontend-Test]
    Backend --> BackTest[Backend-Test]
    Database --> DataTest[Datentest]
    
    FrontTest --> Integration[Integrationstest]
    BackTest --> Integration
    DataTest --> Integration
    
    Integration --> Deploy{Bereitstellungsvorbereitung}
    Deploy -->|Erfolg| Production[Produktion]
    Deploy -->|Fehler| Bug[Fehler beheben]
    Bug --> Integration
    
    Production --> Monitor[Überwachung]
    Monitor --> End([Projekt abgeschlossen])
    
    style Start fill:#e1f5fe
    style End fill:#e8f5e8
    style Bug fill:#ffebee

**Gerenderte Ausgabe:**

```mermaid
flowchart TD
    Start([Projektstart]) --> Analysis[Anforderungsanalyse]
    Analysis --> Design[Systementwurf]
    Design --> Dev{Entwicklungsphase}
    
    Dev --> Frontend[Frontend-Entwicklung]
    Dev --> Backend[Backend-Entwicklung]
    Dev --> Database[Datenbankentwurf]
    
    Frontend --> FrontTest[Frontend-Test]
    Backend --> BackTest[Backend-Test]
    Database --> DataTest[Datentest]
    
    FrontTest --> Integration[Integrationstest]
    BackTest --> Integration
    DataTest --> Integration
    
    Integration --> Deploy{Bereitstellungsvorbereitung}
    Deploy -->|Erfolg| Production[Produktion]
    Deploy -->|Fehler| Bug[Fehler beheben]
    Bug --> Integration
    
    Production --> Monitor[Überwachung]
    Monitor --> End([Projekt abgeschlossen])
    
    style Start fill:#e1f5fe
    style End fill:#e8f5e8
    style Bug fill:#ffebee

Sequenzdiagramm-Details

Grundsyntax

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I'm good, thanks!
    Alice-)Bob: Goodbye!

Gerenderte Ausgabe:

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I'm good, thanks!
    Alice-)Bob: Goodbye!

Aktivierungsleisten und Lebenslinien

sequenceDiagram
    participant A as Client
    participant B as Server
    
    A->>+B: Request Data
    Note right of B: Processing Request
    B-->>-A: Return Data
    
    A->>+B: Another Request
    B->>+B: Internal Processing
    B-->>-B: Processing Done
    B-->>-A: Return Result

Gerenderte Ausgabe:

sequenceDiagram
    participant A as Client
    participant B as Server
    
    A->>+B: Request Data
    Note right of B: Processing Request
    B-->>-A: Return Data
    
    A->>+B: Another Request
    B->>+B: Internal Processing
    B-->>-B: Processing Done
    B-->>-A: Return Result

Schleifen und Bedingungen

sequenceDiagram
    participant U as User
    participant S as System
    
    U->>S: Login Request
    
    alt Username Exists
        S->>S: Validate Password
        alt Password Correct
            S-->>U: Login Success
        else Password Incorrect
            S-->>U: Wrong Password
        end
    else Username Not Found
        S-->>U: User Not Found
    end
    
    opt Remember Me
        S->>S: Save Login State
    end

Gerenderte Ausgabe:

sequenceDiagram
    participant U as User
    participant S as System
    
    U->>S: Login Request
    
    alt Username Exists
        S->>S: Validate Password
        alt Password Correct
            S-->>U: Login Success
        else Password Incorrect
            S-->>U: Wrong Password
        end
    else Username Not Found
        S-->>U: User Not Found
    end
    
    opt Remember Me
        S->>S: Save Login State
    end

Klassendiagramm

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +String color
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Owner {
        +String name
        +feedPet()
    }
    
    Owner --> Animal : owns

Gerenderte Ausgabe:

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +String color
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Owner {
        +String name
        +feedPet()
    }
    
    Owner --> Animal : owns

Zustandsdiagramm

stateDiagram-v2
    [*] --> Idle
    Idle --> Running : Start
    Running --> Paused : Pause
    Running --> Finished : End
    Paused --> Running : Resume
    Paused --> Stopped : Stop
    Stopped --> Idle : Reset
    Finished --> Idle : Reset
    Finished --> [*]
    
    state Running {
        [*] --> Init
        Init --> Processing
        Processing --> Validate
        Validate --> [*]
    }

Gerenderte Ausgabe:

stateDiagram-v2
    [*] --> Idle
    Idle --> Running : Start
    Running --> Paused : Pause
    Running --> Finished : End
    Paused --> Running : Resume
    Paused --> Stopped : Stop
    Stopped --> Idle : Reset
    Finished --> Idle : Reset
    Finished --> [*]
    
    state Running {
        [*] --> Init
        Init --> Processing
        Processing --> Validate
        Validate --> [*]
    }

Gantt-Diagramm

gantt
    title Projektentwicklungszeitplan
    dateFormat  YYYY-MM-DD
    section Anforderungsanalyse
    Anforderungsanalyse            :done,    des2, after des1, 5d
    Anforderungsanalyse            :done,    des2, after des1, 5d
    Anforderungsanalyse            :done,    des2, after des1, 5d
    
    section Designphase
    Systementwurf                   :active,  design1, 2024-01-12, 7d
    UI-Design                       :         design2, after design1, 5d
    Datenbankentwurf                 :         design3, after design1, 3d
    
    section Entwicklungsphase
    Frontend-Entwicklung            :         dev1, after design2, 10d
    Backend-Entwicklung             :         dev2, after design3, 12d
    Testing                         :         test1, after dev1, 5d

Kreisdiagramm

pie title Website Traffic Sources
    "Suchmaschine" : 45
    "Soziale Medien" : 25
    "Direkt" : 20
    "E-Mail-Marketing" : 7
    "Andere" : 3

Benutzerreise

journey
    title Benutzer Einkauf Reise
    section Entdeckung
      Besuche Startseite: 3: Benutzer
      Durchsuche Produkte: 4: Benutzer
      Suche Produkte: 4: Benutzer
    section Überlegung
      Ansehen Details: 4: Benutzer
      Vergleiche Preise: 3: Benutzer
      Lese Bewertungen: 5: Benutzer
    section Einkauf
      In Warenkorb legen: 4: Benutzer
      Bezahlen: 3: Benutzer
      Zahlung: 2: Benutzer
    section Nutzung
      Produkt empfangen: 5: Benutzer
      Produkt nutzen: 4: Benutzer
      Bewertung schreiben: 4: Benutzer

Git-Graph

gitgraph
    commit id: "Initial Commit"
    commit id: "Add User Module"
    branch feature/auth
    commit id: "Add Login Feature"
    commit id: "Add Register Feature"
    checkout main
    commit id: "Fix Home Bug"
    merge feature/auth
    commit id: "v1.0 Release"
    branch hotfix
    commit id: "Urgent Fix"
    checkout main
    merge hotfix
    commit id: "v1.0.1 Release"

Real-World Scenarios

Systemarchitektur-Diagramm

flowchart TB
    subgraph "Benutzer-Schicht"
        Web[Web-Browser]
        Mobile[Mobile-App]
        API[API-Client]
    end
    
    subgraph "Gateway-Schicht"
        Gateway[API-Gateway]
        Auth[Auth-Service]
    end
    
    subgraph "Service-Schicht"
        UserService[User-Service]
        OrderService[Order-Service]
        PaymentService[Payment-Service]
        NotificationService[Notification-Service]
    end
    
    subgraph "Datenschicht"
        UserDB[(User-DB)]
        OrderDB[(Order-DB)]
        Cache[(Redis-Cache)]
        Queue[Nachrichten-Queue]
    end
    
    Web --> Gateway
    Mobile --> Gateway
    API --> Gateway
    
    Gateway --> Auth
    Gateway --> UserService
    Gateway --> OrderService
    Gateway --> PaymentService
    
    UserService --> UserDB
    OrderService --> OrderDB
    PaymentService --> Queue
    NotificationService --> Queue
    
    UserService --> Cache
    OrderService --> Cache
    
    style Gateway fill:#e1f5fe
    style Auth fill:#fff3e0
    style Cache fill:#f3e5f5

API-Aufruf-Fluss

sequenceDiagram
    participant C as Client
    participant G as API Gateway
    participant A as Auth Service
    participant U as User Service
    participant D as Database
    participant R as Redis
    
    C->>G: Request User Info
    G->>A: Validate Token
    A->>R: Check Token Cache
    R-->>A: Token Valid
    A-->>G: Auth Success
    
    G->>U: Get User Info
    U->>R: Check User Cache
    alt Cache Exists
        R-->>U: Return User Data
    else Cache Miss
        U->>D: Query Database
        D-->>U: Return User Info
        U->>R: Update Cache
    end
    
    U-->>G: Return User Info
    G-->>C: Respond User Data

Geschäftsflussdiagramm

flowchart TD
    Start([Benutzerbestellung]) --> Check{Check Stock}
    Check -->|Im Lager| Reserve[Reserve Stock]
    Check -->|Ausverkauft| OutOfStock[Ausverkauft]
    OutOfStock --> Notify[Benutzer benachrichtigen]
    Notify --> End1([Ende])
    
    Reserve --> Payment{Zahlungsverarbeitung}
    Payment -->|Erfolg| ConfirmOrder[Bestellung bestätigen]
    Payment -->|Fehler| ReleaseStock[Lager freigeben]
    ReleaseStock --> PaymentFailed[Zahlung fehlgeschlagen]
    PaymentFailed --> End2([Ende])
    
    ConfirmOrder --> UpdateInventory[Lagerstand aktualisieren]
    UpdateInventory --> SendNotification[Benachrichtigung senden]
    SendNotification --> Logistics[Logistik organisieren]
    Logistics --> End3([Bestellung abgeschlossen])
    
    style Start fill:#e8f5e8
    style End1 fill:#ffebee
    style End2 fill:#ffebee
    style End3 fill:#e8f5e8
    style OutOfStock fill:#ffebee
    style PaymentFailed fill:#ffebee

Stile und Themen

Knotenstile

flowchart LR
    A[Standardstil] --> B[Stil 1]
    A --> C[Stil 2]
    A --> D[Stil 3]
    
    style B fill:#f9f,stroke:#333,stroke-width:4px
    style C fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    style D fill:#f96,stroke:#333,stroke-width:4px,color:#fff

Klassenstile

flowchart LR
    A[Knoten A]:::classA --> B[Knoten B]:::classB
    A --> C[Knoten C]:::classC
    
    classDef classA fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef classB fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    classDef classC fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px

Konfiguration und Kompatibilität

VitePress-Konfiguration

// .vitepress/config.js
export default {
  markdown: {
    mermaid: true
  }
}

GitHub-Unterstützung

GitHub unterstützt Mermaid direkt in Markdown-Dateien:

```mermaid
graph LR
    A --> B

### Andere Plattform-Unterstützung

| Plattform      | Unterstützung      | Konfigurationsanforderung |
|--------------|--------------|-------------------|
| **GitHub**   | ✅ Nativ     | Keine              |
| **GitLab**   | ✅ Nativ     | Keine              |
| **VitePress**| ✅ Plugin     | Konfiguration benötigt      |
| **Jekyll**   | ✅ Plugin     | Plugin installieren    |
| **Hugo**     | ✅ Theme      | Abhängig vom Theme  |

## Best Practices

### Design-Tipps

```markdown
✅ Empfohlen:

1. **Halten Sie es einfach:**
   - Vermeiden Sie zu komplexe Diagramme
   - Verwenden Sie klare Beschriftungen und Verbindungen

2. **Logische Layout:**
   - Wählen Sie die geeignete Diagrammrichtung
   - Halten Sie den logischen Fluss klar

3. **Konsistenter Stil:**
   - Verwenden Sie eine konsistente Farbpalette
   - Halten Sie den Diagrammstil einheitlich

4. **Erklärungen hinzufügen:**
   - Fügen Sie Titel für komplexe Diagramme hinzu
   - Stellen Sie erforderliche Texterklärungen bereit

❌ Vermeiden:

1. Zu komplexe Diagramme zu verstehen
2. Zu viele Kreuzungslinien
3. Vage Beschriftungen
4. Fehlende Legende

Leistungsüberlegungen

- **Optimierung großer Diagramme:**
  - Betrachten Sie das Aufteilen komplexer Diagramme
  - Verwenden Sie Unterbereiche für Organisation

- **Ladeleistung:**
  - Vermeiden Sie zu viele Diagramme auf einer einzelnen Seite
  - Betrachten Sie das Lazy Loading

- **Mobile Anpassung:**
  - Stellen Sie sicher, dass Diagramme auf kleinen Bildschirmen lesbar sind
  - Betrachten Sie die horizontale Bildlaufleiste

Verwandte Syntax

• HTML einbetten - HTML-Verbesserungen
• Mathematische Formeln - LaTeX-Ausdrücke
• Best Practices - Schreibtipps

Tools und Ressourcen

Online-Editoren

• Mermaid Live Editor: Offizieller Online-Editor
• Draw.io: Allgemeines Diagrammtool
• Lucidchart: Professionelles Diagramm-Plattform
• Excalidraw: Handgezeichnete Stil-Diagramme

Entwicklertools

• Mermaid CLI: Befehlszeilen-Tool
• VS Code Mermaid: Visual Studio Code-Erweiterung
• Atom Mermaid: Atom-Editor-Erweiterung
• IntelliJ Mermaid: JetBrains IDE-Erweiterung

Referenzen

• Mermaid Offizielle Dokumentation: Vollständige Syntax-Referenz
• Mermaid Beispiel-Bibliothek: Verschiedene Diagramm-Beispiele
• GitHub Mermaid: Verwendung auf GitHub
• Awesome Mermaid: Ressourcen-Sammlung

Durch das Beherrschen der Flussdiagramm-Syntax können Sie professionelle visuelle Diagramme in Ihrer Dokumentation erstellen, die Klarheit und Ausdruckskraft verbessern.