Mermaid reference plugin #78

New Issue

fable-5 · 2026-07-04T14:52:41+02:00

fable-5 commented

2026-07-04 14:52:41 +02:00

Context

The end-to-end proof of the code-block path: source-edited diagrams rendered safely in the sandbox.

Scope

Build packages/plugins/mermaid: block plugin bundling the mermaid library inside the sandbox (no network), edit mode with source textarea + live preview + error display, render mode producing the SVG, block data = source text, export fallback = rendered SVG snapshot stored in block data on save (used by PDF/Word export).

Acceptance criteria

a flowchart renders in the page and survives reload/collaboration
syntax errors show inline in edit mode without breaking render mode
PDF export shows the diagram via the SVG fallback (with #79)
bundle stays under the size limit; no external requests (CSP-verified)

Technical notes

ADR 0008, plugin-architecture.md.

Dependencies

Depends on #76.

Size: ~1 day

Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add de and en), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.

## Context The end-to-end proof of the code-block path: source-edited diagrams rendered safely in the sandbox. ## Scope Build `packages/plugins/mermaid`: block plugin bundling the mermaid library inside the sandbox (no network), edit mode with source textarea + live preview + error display, render mode producing the SVG, block data = source text, export fallback = rendered SVG snapshot stored in block data on save (used by PDF/Word export). ## Acceptance criteria - [ ] a flowchart renders in the page and survives reload/collaboration - [ ] syntax errors show inline in edit mode without breaking render mode - [ ] PDF export shows the diagram via the SVG fallback (with #79) - [ ] bundle stays under the size limit; no external requests (CSP-verified) ## Technical notes - ADR 0008, plugin-architecture.md. ## Dependencies Depends on #76. **Size**: ~1 day --- *Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add `de` **and** `en`), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.*

fable-5 added this to the M7 — Plugins milestone 2026-07-04 14:52:41 +02:00

fable-5 added the

plugins

label 2026-07-04 14:52:41 +02:00

fable-5 referenced this issue

2026-07-04 14:52:42 +02:00

Plugin fallbacks in HTML, PDF, and office exports #79

fable-5 referenced this issue from a commit

2026-07-11 13:51:17 +02:00

Add the Mermaid reference plugin (#78)

fable-5 commented

2026-07-11 14:01:57 +02:00

Umgesetzt in ef1c31d (CI grün, inkl. neuem mermaid-e2e-Pack).

Akzeptanzkriterien:

Flowchart rendert und überlebt Reload + Kollaboration (e2e: Collab-Partner sieht das Diagramm live via Yjs-Block-Daten)
Syntaxfehler inline im Edit-Mode, Render-Mode bleibt intakt (Fallback auf letzten guten SVG-Snapshot mit „stale"-Hinweis)
SVG-Snapshot liegt in den Block-Daten ({source, svg}, bei jedem erfolgreichen Preview persistiert) — PDF/Word-Verdrahtung folgt in #79
Bundle 3,4 MB unpacked (Limit 20 MiB), keine externen Requests (e2e-Assertion über alle Requests + Sandbox-CSP)

Falle dokumentiert: mermaid.render lässt sein Scratch-Element und bei Parse-Fehlern ein eigenes Error-SVG in document.body zurück — das Plugin räumt beide im finally ab, sonst erscheinen Geister-SVGs in der Oberfläche.

Umgesetzt in `ef1c31d` (CI grün, inkl. neuem mermaid-e2e-Pack). **Akzeptanzkriterien:** - [x] Flowchart rendert und überlebt Reload + Kollaboration (e2e: Collab-Partner sieht das Diagramm live via Yjs-Block-Daten) - [x] Syntaxfehler inline im Edit-Mode, Render-Mode bleibt intakt (Fallback auf letzten guten SVG-Snapshot mit „stale"-Hinweis) - [x] SVG-Snapshot liegt in den Block-Daten (`{source, svg}`, bei jedem erfolgreichen Preview persistiert) — PDF/Word-Verdrahtung folgt in #79 - [x] Bundle 3,4 MB unpacked (Limit 20 MiB), keine externen Requests (e2e-Assertion über alle Requests + Sandbox-CSP) **Falle dokumentiert:** `mermaid.render` lässt sein Scratch-Element und bei Parse-Fehlern ein eigenes Error-SVG in `document.body` zurück — das Plugin räumt beide im `finally` ab, sonst erscheinen Geister-SVGs in der Oberfläche.

fable-5 closed this issue

2026-07-11 14:01:57 +02:00

Sign in to join this conversation.