| name | mermaid-diagram-generator |
| description | Guide on creating and editing Mermaid charts safely. Use when asked to draw a diagram, flowchart, or architecture chart. Triggers on: 'mermaid', 'diagram', 'flowchart', 'visualize'. |
Mermaid Skill
Use this skill to quickly validate Mermaid diagrams by parsing + rendering them with the official Mermaid CLI.
Prerequisites
- Node.js + npm (for
npx).
- First run downloads a headless Chromium via Puppeteer. If Chromium is missing, set
PUPPETEER_EXECUTABLE_PATH.
Tool
Validate a diagram
./tools/validate.sh diagram.mmd [output.svg]
- Parses and renders the Mermaid source.
- Non-zero exit = invalid Mermaid syntax.
- Prints an ASCII preview using
beautiful-mermaid (best-effort; not all diagram types are supported).
- If
output.svg is omitted, the SVG is rendered to a temp file and discarded.
Workflow (short)
- If the diagram will live in Markdown: draft it in a standalone
diagram.mmd first (the tool only validates plain Mermaid files).
- Write/update
diagram.mmd.
- Run
./tools/validate.sh diagram.mmd.
- Fix any errors shown by the CLI.
- Once it validates, copy the Mermaid block into your Markdown file.
