mermaid-diagrams · hoodini — Claude Code skill: Mermaid diagrams
A skill that teaches your agent Mermaid syntax: flowcharts, sequence, class and ER diagrams, Gantt charts. Handy when a diagram has to live inside markdown.
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a claude-codeWhat mermaid-diagrams does
The skill is a syntax reference with worked examples. Flowcharts with decision nodes and subgraphs, sequence diagrams with activation boxes and alt/loop blocks, class diagrams with access modifiers, ER diagrams with ||--o{ cardinality, Gantt charts with task dependencies, plus state, pie, gitGraph, journey and mindmap.
Styling gets its own section: classDef sets fill and text colour per node. There is also a React component that calls mermaid.render and drops the returned SVG into a container. Diagrams go in a code block tagged mermaid, which GitHub, GitLab and most markdown renderers pick up.
The skill installs into six platforms, and the file path differs for each: ~/.claude/skills/mermaid-diagrams/SKILL.md in Claude, .cursor/skills/mermaid-diagrams/SKILL.md in Cursor, .github/skills/mermaid-diagrams/SKILL.md in Copilot. If your team opens the same repo in different editors, you end up keeping a copy in each folder.
What it helps with
- draw a process flowchart straight into markdown
- map a client-server exchange as a sequence diagram
- show database tables and their relations
- plan a project in a Gantt chart with task dependencies
- render an SVG diagram inside a React component
Example prompts for the agent
- draw a flowchart of the order processing flow in Mermaid
- make a sequence diagram for OAuth login
- build an ER diagram for the users, orders and products tables
How to install mermaid-diagrams
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a claude-code2Manually: put the files in place
~/.claude/skills/mermaid-diagrams/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/mermaid-diagrams/
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a codex2Manually: put the files in place
.agents/skills/mermaid-diagrams/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a cursor2Manually: put the files in place
.cursor/skills/mermaid-diagrams/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install hoodini/ai-agents-skills mermaid-diagrams2Manually: put the files in place
.github/skills/mermaid-diagrams/SKILL.md1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a gemini-cli2Platform CLI
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/mermaid-diagramsManually: put the files in place
.devin/skills/mermaid-diagrams/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -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-diagrams
How do I install mermaid-diagrams in Claude?
Run npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a claude-code. The skill file lands at ~/.claude/skills/mermaid-diagrams/SKILL.md.
What does mermaid-diagrams do?
It gives the agent a Mermaid syntax reference: flowcharts, sequence, class, ER, Gantt, state, pie, gitGraph, journey and mindmap. It also covers node styling and a React component for rendering.
Which editors can run this skill?
Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Each one takes its own install flag and keeps SKILL.md in its own folder.
Similar skills
Everything for Writing and docs →mermaid-diagrams by other authors comes first.
