13. Mermaid-Pipeline (Phase 1–3)

Die Mermaid-Integration entstand in drei Phasen, jede mit ihrer eigenen Optimierung.

Phase 1: Client-Render (Live-Preview)#

In der Preview-Iframe wird Mermaid dynamisch importiert (~400 KB gzip), nur wenn die Page tatsächlich ein mermaid-Fence hat. Module-level Singleton — eine Init pro Iframe.

Phase 2: Server-Side-Render (Static Export)#

Im Deploy-Pfad muss das HTML ohne JS auskommen. Lösung: JSDOM lädt im API-Prozess, mermaid rendert dort gegen die fake DOM, das resulting SVG wird inline in die HTML-Datei geschrieben. Concurrency: ein module-level Mutex serialisiert die Renders (mermaid teilt sich den DOM).

Phase 3: Pack-aware Theming#

mermaidThemeForPack(slug) in packages/render-engine/src/packs/mermaid-themes.ts übersetzt Pack-Tokens (HSL) → Mermaid themeVariables (hex). Sowohl Server als auch Client tun das. Resultat: Diagramme in obsidian-luxury haben Gold-Akzente, in retro-future Magenta — alles automatisch.

Phase 3.5: Lightbox#

Jedes gerenderte Diagramm hat oben rechts einen Maximize-Icon (hover-revealed). Click → natives `` mit backdrop-filter: blur(6px), ESC schließt. Funktioniert in Static-Export und Live-Preview gleichermaßen — Static via delegated data-mermaid-expand-Click-Handler im Inline-JS, Live via React-Refs.

Phase 4 (geplant): mermaid-isomorphic#

Aktuell ist der Static-Export-Pfad für flowchart/classDiagram eingeschränkt: JSDOM hat keine SVG-Layout-Engine, der getBBox-Stub ist heuristisch. sequenceDiagram und pie rendern korrekt; flowchart TB mit langen Labels erscheint zu schmal. Fix-Plan: Migration auf mermaid-isomorphic mit echtem Headless-Browser.

---