Diagramme mit Mermaid

31. Aug. 2026 · 1 Min. Lesezeit AI

Mermaid-Diagramme werden im Browser gerendert – aus einem selbst gehosteten Bundle, nur auf Seiten mit einem Diagramm, und sie folgen dem Hell-/Dunkel-Umschalter.

Der Deploy-Weg

flowchart LR
    A[Push to main] --> B{GitHub Actions}
    B -->|astro build| C[dist branch]
    C --> D[Server git pull]
    D --> E[nginx serves static]

Ein Request

sequenceDiagram
    participant Browser
    participant nginx
    Browser->>nginx: GET /blog/diagramme/
    nginx-->>Browser: statisches HTML
    Browser->>nginx: GET /_astro/mermaid.core.js
    nginx-->>Browser: Diagramm-Bundle