mermaid-skill — Claude Code skill: diagrams and installation
This skill writes Mermaid diagrams and exports them as PNG, SVG, or PDF. Use it for API flows, architecture maps, database schemas, and similar diagrams.
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a claude-codeWhat mermaid-skill does
The skill creates .mmd files for flowcharts, sequence diagrams, class diagrams, ER diagrams, state machines, Gantt charts, and other Mermaid formats. It relies on Mermaid’s automatic layout and can render through mmdc locally or through the Kroki API.
It checks the diagram before rendering, then reviews the exported image for clipped labels, dense layouts, and poor orientation. Local rendering requires @mermaid-js/mermaid-cli plus a headless Chrome browser; without that browser, mmdc export fails, so Kroki with curl is the practical fallback.
For CI or Docker, the skill includes a Puppeteer configuration for the --no-sandbox issue. It can revise the same .mmd and output files through a review loop, then hand the current diagram to Mermaid Live for browser editing.
What it helps with
- turn an API flow into a
.mmddiagram - map an authentication sequence
- model database links as an ER diagram
- render Mermaid as PNG, SVG, or PDF
Example prompts for the agent
- Create an architecture diagram in
architecture.mmdand export it as SVG. - Draw the authentication flow between the client, API, and database, then validate it.
- Build an ER diagram from these tables and save the result as
schema.png.
How to install mermaid-skill
1Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a claude-code2Manually: put the files in place
~/.claude/skills/mermaid-skill/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/mermaid-skill/
1Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a codex2Manually: put the files in place
.agents/skills/mermaid-skill/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a cursor2Manually: put the files in place
.cursor/skills/mermaid-skill/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Agents365-ai/365-skills mermaid-skill2Manually: put the files in place
.github/skills/mermaid-skill/SKILL.md1Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a gemini-cli2Platform CLI
gemini skills install https://github.com/Agents365-ai/365-skills --path plugins/mermaid/skills/mermaid-skillManually: put the files in place
.devin/skills/mermaid-skill/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Agents365-ai/365-skills --skill mermaid-skill -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about mermaid-skill
How do I install mermaid-skill in Claude Code?
Run npx skills add Agents365-ai/365-skills --skill mermaid-skill -a claude-code, then check ~/.claude/skills/mermaid-skill/SKILL.md.
What does mermaid-skill do?
It writes Mermaid source files, validates their syntax, and renders diagrams to PNG, SVG, or PDF through mmdc or Kroki.
What is required for local Mermaid rendering?
Local rendering needs @mermaid-js/mermaid-cli and a headless Chrome browser. If Chrome is unavailable, mmdc export fails; Kroki with curl avoids that dependency.
