Diagramme

MarkNode rendert Diagramme direkt in der Vorschau. Sie schreiben ein Diagramm in einem Codeblock mit Backticks in der Mermaid-Syntax – einer Textform zur Beschreibung von Flussdiagrammen, Sequenzdiagrammen und mehr – und MarkNode zeichnet es vollständig offline als Bild anstelle des Codes.

Ein Diagramm schreiben

Verwenden Sie einen Codeblock mit Backticks und mermaid als Sprachkennung:

```mermaid
flowchart TD
    Start[Start] --> Decision{Need a diagram?}
    Decision -->|Yes| Draw[Write it in Markdown]
    Decision -->|No| Skip[Keep writing prose]
    Draw --> Done[Done]
    Skip --> Done
```

Die Vorschau ersetzt den Codeblock durch das gerenderte Flussdiagramm. Der Markdown-Quelltext bleibt unverändert – MarkNode zeichnet lediglich ein Bild davon; wenn Sie das Diagramm ändern möchten, bearbeiten Sie den mermaid-Text, und das Bild wird aktualisiert.

Ein Flussdiagramm mit einem Start-Kästchen, das sich an einer Entscheidungsraute „Need a diagram?" verzweigt: ein mit Yes beschrifteter Pfad führt zu einem Kästchen „Write it in Markdown", der andere mit No beschriftete zu einem Kästchen „Keep writing prose", und beide Pfade laufen in einem Done-Kästchen zusammen

Vollständig gestaltete Diagrammtypen

Flussdiagramme, Sequenzdiagramme, Klassendiagramme und Zustandsdiagramme erhalten die volle Aufbereitung durch MarkNode – im Layout und Satz passend zum Rest Ihres Dokuments, nicht bloß als generisch eingefügtes Bild.

Ein Sequenzdiagramm zum Beispiel:

```mermaid
sequenceDiagram
    participant Writer
    participant MarkNode
    Writer->>MarkNode: Write a mermaid code block
    MarkNode-->>Writer: Render diagram in preview
```

Ein Sequenzdiagramm mit zwei Beteiligten, Writer und MarkNode, verbunden durch Lebenslinien: ein durchgezogener Pfeil von Writer zu MarkNode mit der Beschriftung „Write a mermaid code block" und ein gestrichelter Rückpfeil von MarkNode zurück zu Writer mit der Beschriftung „Render diagram in preview"

Klassen- und Zustandsdiagramme verwenden denselben mermaid-Codeblock mit ihren eigenen Mermaid-Schlüsselwörtern (classDiagram, stateDiagram-v2) und werden mit derselben Sorgfalt gerendert.

Weitere Diagrammtypen

Viele weitere Mermaid-Diagrammtypen – darunter Tortendiagramme und Gantt-Diagramme – werden in MarkNode bereits heute gerendert, als echte Diagramme im Stil Ihres Themes statt als Code. Der gleiche Feinschliff beim individuellen Layout, den Fluss-, Sequenz-, Klassen- und Zustandsdiagramme erhalten, ist für diese Diagrammtypen in einem künftigen Update geplant.

Passend zu Ihrem Theme

In der Vorschau folgen Diagramme dem Anwendungs-Theme Ihres Dokuments. Wechseln Sie das Theme, und alle Diagramme auf dem Bildschirm passen ihren Stil zusammen mit dem Rest der Vorschau an – es gibt nichts separat zu konfigurieren.

Quick-Look-Vorschauen richten sich stattdessen nach dem hellen bzw. dunklen Erscheinungsbild Ihres Macs. Fluss-, Sequenz-, Klassen- und Zustandsdiagramme passen sich in beiden Fällen an; Torten- und Gantt-Diagramme werden in Quick Look derzeit mit einer einzigen Farbpalette gerendert.

Wo Diagramme erscheinen

Diagramme werden auf jeder Oberfläche gerendert, die Ihr gerendertes Markdown anzeigt:

  • Im angedockten Vorschaubereich
  • Im abgedockten Vorschaufenster
  • In macOS Quick Look (drücken Sie im Finder die Leertaste bei einer Markdown-Datei – siehe Quick-Look-Vorschauen)
  • Im DOCX-Export, als eingebettetes Bild

Fehler

Wenn die Mermaid-Syntax eines Diagramms einen Fehler enthält – einen unbekannten Diagrammtyp, einen Tippfehler in der Syntax –, zeigt MarkNode den ursprünglichen Codeblock anstelle eines fehlerhaften oder leeren Bildes. Der Rest Ihres Dokuments wird normal gerendert; betroffen ist nur dieser eine Block. Korrigieren Sie den Quelltext, und das Diagramm erscheint bei der nächsten Aktualisierung der Vorschau.

Unterstützte Syntax

MarkNode folgt der Syntax des Mermaid-Projekts selbst. Die vollständige Bandbreite an Diagrammtypen und Optionen finden Sie in der offiziellen Mermaid-Dokumentation – alles, was dort gültig ist, versucht MarkNode zu rendern.