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'.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
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.
