Diagram Styler
Apply a visual layer to Mermaid source without changing its semantic model.
Workflow
- Confirm that the input
.mmd is the preserved source of truth. If meaning must change, return to the mermaid-diagrams skill.
- Read references/rendering-contract.md. Select
light or dark and a document, presentation, or dark-ui target.
- Run the renderer preflight. Never invoke
npx, install packages, or use a network renderer.
- Render with scripts/render-mermaid.js, providing a meaningful title and one-sentence description.
- Inspect the SVG at its target width for clipped labels, overlapping edges, unreadable contrast, broken glyphs, and excessive density.
- Fix semantic layout problems in the
.mmd; fix palette or sizing problems in the theme/target layer. Re-render and inspect again.
- Keep the generated manifest beside the SVG. When the destination is PDF, compose the SVG first and run the
pdf-qa skill on every final PDF page.
Commands
node scripts/render-mermaid.js --preflight
node scripts/render-mermaid.js \
--input path/to/diagram.mmd \
--output path/to/diagram.svg \
--theme light \
--target document \
--title "Order processing" \
--description "Sequence showing checkout, payment authorization, and fulfillment."
The preflight returns JSON even when unavailable. A render fails closed when mmdc is absent. MMDC_BIN may point to a preinstalled executable; it must never point to a download wrapper.
Completion Gate
Complete only when:
- the
.mmd, .svg, and .svg.manifest.json all exist and the manifest hashes match;
- the SVG has
role="img", a file-scoped aria-labelledby, <title>, and <desc>;
- source meaning is unchanged and theme instructions are absent from the
.mmd;
- the SVG is responsive within the selected target width;
- visual inspection finds no clipping, overlap, broken glyph, contrast, or readability defect;
- a PDF destination has also passed the
pdf-qa skill after document composition.
If rendering cannot run, return the preserved .mmd, the preflight result, and the missing dependency. Do not claim a rendered artifact or visual inspection.
1---2name: diagram-styler3description: Render an existing Mermaid `.mmd` semantic source into a themed, responsive, accessible SVG while preserving the source and recording renderer provenance in a manifest. Use for light or dark Mermaid styling, document-width SVG output, presentation output, and pre-rendering diagrams for HTML or PDF documents. Do not use to change diagram meaning or to download renderers at runtime.4---56# Diagram Styler78Apply a visual layer to Mermaid source without changing its semantic model.910## Workflow11121. Confirm that the input `.mmd` is the preserved source of truth. If meaning must change, return to the `mermaid-diagrams` skill.132. Read [references/rendering-contract.md](references/rendering-contract.md). Select `light` or `dark` and a `document`, `presentation`, or `dark-ui` target.143. Run the renderer preflight. Never invoke `npx`, install packages, or use a network renderer.154. Render with [scripts/render-mermaid.js](scripts/render-mermaid.js), providing a meaningful title and one-sentence description.165. Inspect the SVG at its target width for clipped labels, overlapping edges, unreadable contrast, broken glyphs, and excessive density.176. Fix semantic layout problems in the `.mmd`; fix palette or sizing problems in the theme/target layer. Re-render and inspect again.187. Keep the generated manifest beside the SVG. When the destination is PDF, compose the SVG first and run the `pdf-qa` skill on every final PDF page.1920## Commands2122```bash23node scripts/render-mermaid.js --preflight24node scripts/render-mermaid.js \25 --input path/to/diagram.mmd \26 --output path/to/diagram.svg \27 --theme light \28 --target document \29 --title "Order processing" \30 --description "Sequence showing checkout, payment authorization, and fulfillment."31```3233The preflight returns JSON even when unavailable. A render fails closed when `mmdc` is absent. `MMDC_BIN` may point to a preinstalled executable; it must never point to a download wrapper.3435## Completion Gate3637Complete only when:3839- the `.mmd`, `.svg`, and `.svg.manifest.json` all exist and the manifest hashes match;40- the SVG has `role="img"`, a file-scoped `aria-labelledby`, `<title>`, and `<desc>`;41- source meaning is unchanged and theme instructions are absent from the `.mmd`;42- the SVG is responsive within the selected target width;43- visual inspection finds no clipping, overlap, broken glyph, contrast, or readability defect;44- a PDF destination has also passed the `pdf-qa` skill after document composition.4546If rendering cannot run, return the preserved `.mmd`, the preflight result, and the missing dependency. Do not claim a rendered artifact or visual inspection.
ch4570