> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mermaid-Diagramme

> Verwende Mermaid, um Flussdiagramme, Sequenzdiagramme, ER-Diagramme und weitere textbasierte Diagramme in Craft zu erstellen.

Craft unterstützt Mermaid-Diagramme – eine Methode, um visuelle Diagramme durch einfache Textsyntax zu erstellen. Schreib ein paar Zeilen Code, und Craft stellt das Ergebnis als gestochen scharfes Diagramm direkt in deinem Dokument dar.

Diagramme aktualisieren sich beim Tippen in Echtzeit, funktionieren auf allen Plattformen und werden auf geteilten sowie veröffentlichten Seiten angezeigt.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/flowchart-preview.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=db14d9fa849df0904c0cc4c051e19905" alt="Ein in einem Craft-Dokument dargestelltes Mermaid-Flussdiagramm" width="1498" height="991" data-path="images/write-and-edit/mermaid-diagrams/en/content/flowchart-preview.png" />

## Mermaid-Diagramm einfügen

Füge ein Mermaid-Diagramm mit einer dieser Methoden ein:

* Tippe `/mermaid` und wähle **Mermaid-Diagramm**
* Wähle **Mermaid-Diagramm** im **Einfügen**-Panel der Seitenleiste (unter „Rich Blocks")
* Füge Markdown mit einem ` ```mermaid `-Codeblock ein – Craft konvertiert ihn automatisch

## Bearbeitung

Wenn du einen Mermaid-Block öffnest, wird eine geteilte Ansicht angezeigt – das gerenderte Diagramm oben, dein Code unten. Die Vorschau aktualisiert sich beim Tippen live.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/split-view-editing.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=894c6b5397d22b4673f1aecf7de6e11c" alt="Geteilte Ansicht mit Diagrammvorschau oben und Code-Editor unten" width="1498" height="991" data-path="images/write-and-edit/mermaid-diagrams/en/content/split-view-editing.png" />

<Tabs>
  <Tab title="macOS">
    Klicke auf den Mermaid-Block, um ihn in der geteilten Ansicht zu öffnen. Die Diagrammvorschau erscheint oben, der Code-Editor darunter. Doppeltippe auf die Vorschau, um hineinzuzoomen.
  </Tab>

  <Tab title="iOS / iPad">
    Tippe auf den Block, um den Code-Editor mit einer Live-Vorschau darüber zu öffnen. Auf dem iPhone blendest du die Tastatur aus, um das Diagramm zu sehen. Doppeltippe auf die Vorschau zum Zoomen.
  </Tab>

  <Tab title="Web / Windows">
    Klicke auf den Block zum Bearbeiten. Über das Ansichtsmenü im Kontextmenü des Blocks kannst du zwischen Bearbeiten, Vorschau und geteilter Ansicht wechseln.
  </Tab>
</Tabs>

<Tip>
  Du musst die Mermaid-Syntax nicht auswendig kennen – der Craft KI-Assistent kann Diagramme für dich erstellen. Beschreibe einfach, was du möchtest, und er schreibt den Code.
</Tip>

## Unterstützte Diagrammtypen

### Flussdiagramme

Bilde Prozesse, Entscheidungen und Abläufe ab. Verwende `graph TD` für eine Top-Down- oder `graph LR` für eine Links-nach-rechts-Ausrichtung.

```
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do This]
    B -->|No| D[Do That]
    C --> E[Done]
    D --> E
```

### Sequenzdiagramme

Zeige Interaktionen zwischen Personen oder Systemen im zeitlichen Verlauf.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/sequence-diagram.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=f75ca4347237c5fe789fb65a48060ca2" alt="Ein Sequenzdiagramm, das einen Essenslieferablauf darstellt" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/sequence-diagram.png" />

```
sequenceDiagram
    User->>App: Place order
    App->>Payment: Charge card
    Payment-->>App: Confirmed
    App-->>User: Order placed
```

### Zustandsdiagramme

Visualisiere, wie etwas zwischen Zuständen wechselt – ideal für Auftragsverfolgung, Workflows oder Prozesse.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/state-diagram.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=6700ddefd98c2df1c74175826f6d65e4" alt="Ein Zustandsdiagramm, das einen Auftragslebenszyklus zeigt" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/state-diagram.png" />

```
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft : Needs changes
    Published --> [*]
```

### Klassendiagramme

Zeige die Struktur eines Systems – welche Elemente es gibt, ihre Eigenschaften und wie sie zusammenhängen.

```
classDiagram
    class Document {
        +String title
        +Date created
        +publish()
    }
    class Folder {
        +String name
        +getDocuments()
    }
    Folder "1" --> "*" Document : contains
```

### ER-Diagramme

Modelliere Datenbeziehungen – ideal für Datenbankdesign und -planung.

```
erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has
```

### Diagramme

Erstelle Balken-, Linien- oder kombinierte Diagramme.

```
xychart-beta
    title "Monthly Revenue ($K)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue" 0 --> 120
    bar [45, 62, 78, 55, 89, 105]
```

## Design anpassen

Mermaid-Diagramme passen sich dem Farbschema deines Code-Editors an. Um das Aussehen zu ändern, tippe auf das **Pinsel-Symbol** in der Symbolleiste und wähle ein Design – zur Auswahl stehen Tokyo Night, Dracula, Nord, GitHub und weitere.

Das Diagramm wird sofort aktualisiert. Diagramme berücksichtigen außerdem den Hell- oder Dunkelmodus deines Dokuments.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/theme-light.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=1d50b09075c75df863b7a97c39a86a9b" alt="Mermaid-Diagramm im hellen Design" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/theme-light.png" />

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/theme-dark.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=fb81678ca8d061283a3e7afc87e4a69b" alt="Mermaid-Diagramm im dunklen Design" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/theme-dark.png" />

## Teilen und Veröffentlichen

Mermaid-Diagramme werden auf geteilten und veröffentlichten Seiten gerendert – alle, die den Link aufrufen, sehen das fertige Diagramm, nicht den Code. Keine besondere Einrichtung erforderlich.

## Import und Export

* **Markdown-Import**: Füge Markdown mit ` ```mermaid `-Codeblöcken ein oder importiere es – Craft erstellt daraus automatisch Mermaid-Blöcke.
* **Markdown-Export**: Mermaid-Blöcke werden als standardmäßige ` ```mermaid `-Codeblöcke exportiert, die mit anderen Tools kompatibel sind.

## Tipps

<AccordionGroup>
  <Accordion title="Was tun, wenn mein Diagramm „Invalid Mermaid diagram' anzeigt?">
    Das weist meist auf einen Syntaxfehler im Code hin. Überprüfe auf Tippfehler oder fehlende Pfeile. Wenn du Syntax aus einem anderen Tool kopierst, beachte: Craft unterstützt Flussdiagramme, Sequenzdiagramme, Zustandsdiagramme, Klassendiagramme, ER-Diagramme und XY-Diagramme – andere Typen wie Tortendiagramme, Gantt-Diagramme oder Mindmaps werden derzeit nicht unterstützt.
  </Accordion>

  <Accordion title="Kann der KI-Assistent beim Erstellen von Mermaid-Diagrammen helfen?">
    Ja. Beschreibe das gewünschte Diagramm, und der Craft KI-Assistent generiert den Mermaid-Code für dich. Du kannst ihn auch bitten, ein bestehendes Diagramm zu ändern oder zu erweitern.
  </Accordion>

  <Accordion title="Kann ich in ein großes Diagramm hineinzoomen?">
    Auf dem Mac und iPad doppeltippst du auf die Diagrammvorschau, um hineinzuzoomen. Im Web nutze die Vollbildansicht für größere Diagramme.
  </Accordion>
</AccordionGroup>

<Info title="Mermaid-Syntax lernen">
  Mermaid ist ein offener Standard, der in vielen Tools eingesetzt wird. Besuche [mermaid.js.org](https://mermaid.js.org/intro/), um die vollständige Syntax für jeden Diagrammtyp kennenzulernen.
</Info>