mermaid
"Must read guide on creating/editing mermaid charts with valiation tools"
Resources
1Install
npx skillscat add mitsuhiko/agent-stuff/mermaid Install via the SkillsCat registry.
About this skill
This skill validates Mermaid diagrams by parsing and rendering them via a CLI tool, checking syntax correctness and generating an ASCII preview. It helps prevent errors when integrating diagrams into Markdown by ensuring files are valid before use. Developers should use it during diagram creation or editing to identify issues early.
SKILL.md
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.svgis 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.mmdfirst (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.
Install
npx skillscat add mitsuhiko/agent-stuff/mermaid Install via the SkillsCat registry.