Mermaid-Diagramme

Erstelle Flussdiagramme, Sequenzdiagramme, Zustandsdiagramme und mehr mit der textbasierten Mermaid-Syntax.

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.

​

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.

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.

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.

Web / Windows

Klicke auf den Block zum Bearbeiten. Über das Ansichtsmenü im Kontextmenü des Blocks kannst du zwischen Bearbeiten, Vorschau und geteilter Ansicht wechseln.

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.

​

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.

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.

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.

​

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

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.

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.

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.

Mermaid ist ein offener Standard, der in vielen Tools eingesetzt wird. Besuche mermaid.js.org, um die vollständige Syntax für jeden Diagrammtyp kennenzulernen.