diagram-stylerlisted
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