← ClaudeAtlas

diagram-stylerlisted

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.
ch4570/vulpora · ★ 1 · Data & Documents · score 67
Install: claude install-skill ch4570/vulpora
# Diagram Styler Apply a visual layer to Mermaid source without changing its semantic model. ## Workflow 1. Confirm that the input `.mmd` is the preserved source of truth. If meaning must change, return to the `mermaid-diagrams` skill. 2. Read [references/rendering-contract.md](references/rendering-contract.md). Select `light` or `dark` and a `document`, `presentation`, or `dark-ui` target. 3. Run the renderer preflight. Never invoke `npx`, install packages, or use a network renderer. 4. Render with [scripts/render-mermaid.js](scripts/render-mermaid.js), providing a meaningful title and one-sentence description. 5. Inspect the SVG at its target width for clipped labels, overlapping edges, unreadable contrast, broken glyphs, and excessive density. 6. Fix semantic layout problems in the `.mmd`; fix palette or sizing problems in the theme/target layer. Re-render and inspect again. 7. 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 ```bash 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 preinstalle