mermaidjs-v11 — Claude Code skill: Mermaid diagrams from text
This skill gives your agent Mermaid.js v11 syntax so it can write diagrams as code and render them to SVG, PNG or PDF. Handy when a schema or flow needs a picture, not a paragraph.
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a claude-codeWhat mermaidjs-v11 does
The skill ships reference files covering more than 24 diagram types: flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, journey. Your agent pulls the syntax from there and fills in your data. Separate references cover configuration and themes, CLI workflows, and embedding through the JavaScript API.
You can keep a diagram inline in a markdown block tagged mermaid, and set the theme in that block's frontmatter. For image files there is the CLI: install @mermaid-js/mermaid-cli globally with npm, then run mmdc -i diagram.mmd -o diagram.svg. Dark theme and a transparent background come from -t dark -b transparent, and custom styling from --cssFile.
The CLI path needs Node.js with npm, since mmdc is an npm package. Browser rendering is lighter: load mermaid.min.js from a CDN and call mermaid.initialize. The skill installs into six platforms, and each keeps SKILL.md in its own directory, so check that the installer dropped the file where your editor looks for it.
What it helps with
- turn a written process description into a flowchart
- diagram an API call sequence
- map database tables into an erDiagram
- lay out a project plan as a Gantt chart
- render a .mmd file to PNG with a transparent background
Example prompts for the agent
- draw a flowchart for this process description
- make a sequenceDiagram for the login flow
- build an erDiagram from these table definitions
How to install mermaidjs-v11
1Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a claude-code2Manually: put the files in place
~/.claude/skills/mermaidjs-v11/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/mermaidjs-v11/
1Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a codex2Manually: put the files in place
.agents/skills/mermaidjs-v11/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a cursor2Manually: put the files in place
.cursor/skills/mermaidjs-v11/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install mrgoonie/claudekit-skills mermaidjs-v112Manually: put the files in place
.github/skills/mermaidjs-v11/SKILL.md1Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a gemini-cli2Platform CLI
gemini skills install https://github.com/mrgoonie/claudekit-skills --path .claude/skills/mermaidjs-v11Manually: put the files in place
.devin/skills/mermaidjs-v11/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -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 mermaidjs-v11
How do I install mermaidjs-v11 in Claude?
Run npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a claude-code. The skill file then sits at ~/.claude/skills/mermaidjs-v11/SKILL.md.
What does mermaidjs-v11 do?
It hands your agent Mermaid.js v11 syntax plus references for diagram types, configuration, CLI use and web embedding. The agent writes the diagram code; you render it in a browser or with mmdc.
How do I render diagrams to image files?
Use the CLI package: npm install -g @mermaid-js/mermaid-cli, then mmdc -i diagram.mmd -o diagram.svg. That path requires Node.js with npm.
