Diagramme

Zeichne Diagramme aus Text mit Mermaid: Schreib einen Codeblock in der Sprache mermaid, und Clay zeichnet ihn in den Farben deiner Seite, hell oder dunkel.

#Flussdiagramme

```mermaid
flowchart LR
  A[Markdown schreiben] --> B[clay build]
  B --> C{--strict?}
  C -- Warnungen --> D[Build scheitert]
  C -- keine Warnungen --> E([Seite in publish/public])
```

#Sequenzdiagramme

```mermaid
sequenceDiagram
  participant Leser
  participant Seite
  Leser->>Seite: Seite öffnen
  Seite-->>Leser: Vorgerendertes HTML
  Note over Leser,Seite: Kein Code läuft auf dem Server
  Leser->>Seite: Suchen
  Seite-->>Leser: Suchindex, einmal geladen
```

#Kreisdiagramme

```mermaid
pie title Seiten je Bereich
  "Schreiben" : 14
  "Konfiguration" : 4
  "Veröffentlichen" : 3
```

pie title Seiten je Bereich
  "Schreiben" : 14
  "Konfiguration" : 4
  "Veröffentlichen" : 3

Mermaid zeichnet viele weitere Arten: Zustands-, Klassen- und Entity-Relationship-Diagramme, Gantt-Diagramme, Zeitleisten, Mindmaps und Git-Graphen. Seine Dokumentation zeigt jede mit Beispielen.

#Wie Diagramme gezeichnet werden

• In den Farben deiner Seite. Kästen, Linien und Text nehmen die Farben des hellen oder dunklen Designs an und werden neu gezeichnet, wenn Leser umschalten.
• Nur wo nötig. Mermaid ist groß, der Browser lädt es nur auf Seiten mit Diagrammen.
• Bevor es geladen ist, oder ohne JavaScript, erscheint der Quelltext des Diagramms.
• Sicher. Beschriftungen sind Text: Diagramme können keine Skripte ausführen, und Klicks darin bewirken nichts.
• Fehler zeigen eine Meldung mit dem Quelltext darunter, damit du siehst, was zu korrigieren ist.

#Auf GitHub

GitHub zeichnet mermaid-Codeblöcke ebenfalls, Diagramme sehen also auch im Repository richtig aus.