skill

mermaid-diagrams · davila7 — Claude Code skill: text-based software diagrams

Q: How do I install mermaid-diagrams in Claude?

Use the templates CLI: `npx claude-code-templates@latest --skill creative-design/mermaid-diagrams`. Or run `npx skills add davila7/claude-code-templates --skill mermaid-diagrams -a claude-code`. The skill file lands at `~/.claude/skills/mermaid-diagrams/SKILL.md`.

A skill that teaches your agent Mermaid syntax: class, sequence, ERD, C4 and flowchart diagrams. Useful when you need to document architecture or a database schema.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill creative-design/mermaid-diagrams

Open on GitHub

What mermaid-diagrams does

The skill gives the agent a guide to Mermaid syntax and helps pick the right diagram type for the job. It covers class diagrams for domain modeling, sequence diagrams for API and auth flows, flowcharts for algorithms and user journeys, ERDs for database schemas, and C4 diagrams at context, container and component levels. State diagrams, git graphs, Gantt charts and pie charts are in there too.

The structure is simple: the first line declares the diagram type, the rest is the definition. Comments start with %%. Unknown words break a diagram, while wrong parameters fail silently — so validate syntax in Mermaid Live Editor before committing it. Reference files ship alongside: references/class-diagrams.md, references/sequence-diagrams.md, references/flowcharts.md, references/erd-diagrams.md, references/c4-diagrams.md and references/advanced-features.md.

Theming and layout go through frontmatter. Themes are default, forest, dark, neutral and base; layout is dagre or elk; look is classic or handDrawn. Storing .mmd files next to the code pays off, since GitHub and GitLab render Mermaid in Markdown. For PNG or SVG export there is Mermaid CLI: npm install -g @mermaid-js/mermaid-cli, then mmdc -i input.mmd -o output.png.

What it helps with

map a database schema as an ERD before a migration
show an API request flow as a sequence diagram
break a system down into C4 container levels
draw a flowchart for a user journey
document a branching strategy as a git graph

Example prompts for the agent

draw a sequence diagram for the login flow through the API
create an ERD for the USER, ORDER and LINE_ITEM tables
show the service architecture as a C4 container diagram

How to install mermaid-diagrams

1claude-code-templates

npx claude-code-templates@latest --skill creative-design/mermaid-diagrams

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill mermaid-diagrams -a claude-code

3Manually: put the files in place

~/.claude/skills/mermaid-diagrams/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/mermaid-diagrams/

Manually: put the files in place

.agents/skills/mermaid-diagrams/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/mermaid-diagrams/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates mermaid-diagrams

2Manually: put the files in place

.github/skills/mermaid-diagrams/SKILL.md

Platform CLI

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/mermaid-diagrams

Manually: put the files in place

.devin/skills/mermaid-diagrams/SKILL.md

The legacy .windsurf/skills/ path still works

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?

Use the templates CLI: npx claude-code-templates@latest --skill creative-design/mermaid-diagrams. Or run npx skills add davila7/claude-code-templates --skill mermaid-diagrams -a claude-code. The skill file lands at ~/.claude/skills/mermaid-diagrams/SKILL.md.

What does mermaid-diagrams do?

It hands the agent a Mermaid syntax guide and helps choose the right diagram type: class, sequence, flowchart, ERD, C4, state, git graph, Gantt or pie chart.

Where do these diagrams render?

GitHub and GitLab render Mermaid inside Markdown, VS Code needs the Markdown Mermaid extension, and Notion, Obsidian and Confluence support it too. Mermaid CLI handles PNG or SVG export.

Similar skills

Everything for Writing and docs →

mermaid-diagrams by other authors comes first.

mermaid-diagrams hoodini 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. CX Codex +1 406installs utility-mermaid-diagrams product-on-purpose Guides product managers in building valid Mermaid diagrams across 15 supported formats for PRDs and technical specs. CX Codex +1 736installs design-doc-mermaid SpillwaveSolutions Generates Mermaid diagrams and design documents from code or user prompts. Useful for GitHub wiki pages, architecture reviews, and sequence flows. CX Codex +1 80,700installs architecture-diagrams aj-geddes Generates system architecture diagrams, data flows, and C4 models using code formats like Mermaid and PlantUML. Useful when documenting service design directly inside your coding agent. CX Codex +1 2,000installs mermaid-diagram-generator patricio0312rev This skill writes Mermaid diagrams into markdown: flowcharts, sequence diagrams, ERDs, state machines and class diagrams. Handy when docs need a request flow or a schema picture. CX Codex +1 331installs mermaid-expert Seth Hobson A subagent that writes Mermaid diagrams: flowcharts, sequences, ERDs, architecture. Useful when docs or a README need a visual. CX Codex ★ 41,729repo stars pretty-mermaid imxv Renders Mermaid diagrams to SVG, PNG, or ASCII/Unicode without a browser. Useful for docs, READMEs, and terminal output. CX Codex +1 4,500installs

From the same set205

The whole set →

init-project Scaffolds a new project: folders, git, linters, tests and CI. Useful when you want a clean start instead of wiring everything by hand. 1,382installs terraform-specialist A Terraform subagent that builds modules, wires up remote state and hunts drift. Useful once your infrastructure outgrows a single main.tf. 1,349installs backup-before-edit A Claude hook that copies a file with a timestamp before every edit. Useful when the agent rewrites code and you want a way back. 1,328installs containerize-application A slash command that writes the Docker setup for your project: Dockerfile, .dockerignore, docker-compose and Kubernetes manifests. 1,200installs docs-maintenance This command audits documentation, links, structure, and style, then helps plan updates. Use it when Markdown docs need recurring checks. 1,146installs unity-game-developer A Claude subagent for Unity work: C# scripting, physics, UI, mobile optimization and cross-platform builds. 1,122installs supabase-data-explorer This command explores Supabase data and schema, runs read-only SQL queries, and prepares exports or visualizations. Use it when database checks belong in the project workflow. 1,032installs test-runner This hook fires a test command right after Claude edits a file. Handy when you keep forgetting to re-run checks by hand. 1,027installs