mermaid-skill
A Claude Code skill that builds diagrams of 23 types from a syntax reference bundled in the repository, called with /mermaid.
- 299 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill only writes diagram text and holds a reference; it runs no commands or network calls.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/mermaid-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill only writes diagram text and holds a reference; it runs no commands or network calls.
This is third-party code. Review the repository files before installing.
What it does
The `mermaid` skill for Claude Code writes Mermaid diagrams on request, for example `/mermaid create a flowchart for user login process`. It covers 23 types: flowcharts, state, class, ER, architecture, sequence, Gantt, timelines, Git graphs, pie and XY charts, Sankey, mindmaps, kanban and ZenUML. The `references/` folder holds a syntax reference for each type, and the agent consults it while drawing. A GitHub Action pulls documentation from the official mermaid-js/mermaid repository every week.
Who it is for. Developers and technical writers who ask Claude Code to draw a process, database or API diagram directly in a repository.
Good fit when
- Documentation needs a flowchart of the user login process.
- An online store database is drawn as an ER diagram.
- The order of calls during API authentication is explained with a sequence diagram.
- A project plan is shown as a Gantt chart in a README.
Not a fit when
- The diagram must arrive as an SVG or PNG file: the README does not describe rendering.
- The work happens outside Claude Code: the skill is built around that agent's `/mermaid` command.
- Syntax must match the very latest Mermaid release: the reference updates weekly.
Example request
/mermaid draw a sequence diagram for API authenticationLimitations
The skill targets Claude Code and installs by copying the `.claude/skills/mermaid` folder into a project or by adding a git submodule. The README describes no rendering: the result stays Mermaid text, and a Markdown viewer or another tool has to display it. The reference updates through a GitHub Action once a week, so drift from a new Mermaid release is possible between syncs. The last commit in the repository is from August 2026.
How to disable. Delete the `.claude/skills/mermaid` folder from the project. If you used a submodule, remove it together with the symbolic link.
FAQ
How do I call the skill?
Type `/mermaid` in Claude Code and describe the diagram, for example `/mermaid ER diagram for an e-commerce database`.
Which diagram types are supported?
There are 23 types. The README groups them into flow and process, structural, temporal, data visualization, organization and technical ones such as Packet and ZenUML.
Can I install it without copying files?
Add the repository as a submodule with `git submodule add` under `.claude/skills/mermaid-skill` and symlink `mermaid-skill/.claude/skills/mermaid`.
Where does the reference come from?
A GitHub Action syncs documentation from the mermaid-js/mermaid repository weekly.
Is anything needed besides the folder?
No. According to the README the `.claude/skills/mermaid` folder in the project is enough, and no extra packages are mentioned.
Discussion
No questions or reviews yet.
Related
SkillsA skill that generates and renders Mermaid diagrams as SVG, PNG or ASCII: 15 themes and several diagram types, locally without a browser
Oh-my-mermaid
oh-my-mermaid
Turns a codebase into Mermaid architecture diagrams for Claude Code: the /omm-scan command and the omm view viewer. The README is in five languages
A skill that draws a clickable Mermaid diagram in HTML: how a feature, a data flow or database tables work, with code per node
Mindrally skills collection
Claude Code Skills Collection
Over two hundred coding-guideline skills for frameworks and languages, converted from Cursor rules to SKILL.md
HumanLayer Skills
HumanLayer skills
Seven HumanLayer skills for Claude Code and Codex: the rpi research, design and implementation loop, visual PRs, CLAUDE.md rewrites and agentic loops
Claude Code Skills and Agents
Claude Code Skills & Agents
A Claude Code plugin bundling skills and sub-agents: deep research, image generation, GitHub work, code review and model switching
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| mermaid-skill (this card) | no | 299 | ||
| Pretty Mermaid | no | 1,565 | renders diagrams to SVG, PNG and ASCII with themes; mermaid-skill supplies a 23-type syntax reference | |
| MCP Mermaid | no | not required | 647 | an MCP server with syntax checks and export; mermaid-skill works as a skill without a server |
README in short
Install by copying the folder or as a submodule, call it with `/mermaid`, and a table lists the types by category.