mermaid-diagramslisted

# Mermaid → SVG for curriculum diagrams Diagrams ship as **vector**. `.mmd` source + rendered `.svg`, both committed, side by side with the doc. Never raster (PNG): a raster forces a fixed pixel width, so it clips in a narrow column or blurs when scaled — vector dissolves the tradeoff and is ~⅓ the bytes. ## Run ``` node .claude/skills/mermaid-diagrams/render-mermaid.js <dir-or-file.mmd> [...more] ``` - Dir arg → renders every `.mmd` in it. File arg → that one. Each `.mmd` → sibling `.svg`. - After editing any `.mmd`, rerun this, then rebuild the affected workbook (`node scripts/build-workbook.js <customer> <training>`). ## Author labels for `<img>`-safe SVG Renders with `htmlLabels:false` → native `<text>`, no `<foreignObject>` → loads correctly via `<img>` in every browser. The cost lands on label syntax: - Plain text only. `<br/>` for line breaks = fine (sublabel on its own line). - **No** `<i>`/`<b>`/markup tags — they print literally. - **No** `&` — double-escapes to `&amp;`. Reword (`Q&A` → `Q and A`). The renderer strips the root `width`/`height`/`style`, leaving the `viewBox` — the doc's CSS then sizes the diagram losslessly. ## Embed in a doc Normal markdown image, path relative to the doc: ```  *Visible caption naming what the diagram shows.* ``` - SPA serves the `.svg` from the doc's dir (image targets are re-rooted in `curriculum-spa.js`). - Workbook inlines it as a data URI (