---
title: Mermaid‑Diagramme
slug: docs/de/mermaiddiagramme
createdAt: 2026-06-05T12:56:34.018Z
---

[Mermaid-Diagramme](docId\:lWzqcPc0R7ypCj5yRF1wW)  ermöglichen Ihnen das Erstellen von Diagrammen und Visualisierungen direkt aus Text. Sie sind nützlich, um Workflows, Prozesse, Architekturen und Interaktionen zu dokumentieren, ohne sich auf Bilder zu verlassen.

## Syntax

Mermaid-Diagramme verwenden die standardmäßige Syntax für abgegrenzte Codeblöcke.

````markdown
```mermaid
sequenceDiagram
    A->>B: message
```
````

## Beispiele

Das folgende Beispiel erstellt ein Sequenzdiagramm, das einen API-Anfragefluss veranschaulicht.

````markdown
```mermaid
sequenceDiagram
    autonumber
    participant C as Client
    participant A as API
    participant K as Cache
    participant D as DB

    C->>+A: GET /users/123
    A->>+K: lookup user:123
    alt cache hit
        K-->>A: cached user
    else cache miss
        K-->>A: null
        A->>+D: SELECT * FROM users WHERE id=123
        D-->>-A: user row
        A->>K: SET user:123
    end
    A-->>-C: 200 OK
```
````

Das folgende Beispiel erstellt ein Flussdiagramm.

````markdown
```mermaid
flowchart TD
    A[Start] --> B{Is config valid?}
    B -->|Yes| C[Load docs]
    B -->|No| D[Show error]
    C --> E[Start server]
    E --> F[Open browser]
    D --> G[Exit]
```
````