mermaid-diagram-specialist — Claude Code skill: how to install
Generates Markdown-ready Mermaid diagrams for flowcharts, ERDs, sequence diagrams, and C4 architecture. Useful for technical writers and system architects.
npx claude-code-templates@latest --skill development/mermaid-diagram-specialistWhat mermaid-diagram-specialist does
This skill guides Claude Code in turning system requirements and raw workflows into Markdown Mermaid syntax. It starts by selecting the appropriate diagram type based on your goals: flowcharts for branching logic, sequence diagrams for API exchanges, ERDs for database schemas, or C4 models for high-level infrastructure. It also covers state machines, Gantt schedules, and Git branches.
The instructions enforce precise Mermaid conventions. Output includes explicit node shapes such as cylinders for databases or diamonds for decisions, directional layout settings like TD and LR, and exact arrow types for synchronous or asynchronous messaging. For data models, it formats field types alongside primary and foreign key constraints.
You must provide clear technical specifications or process steps upfront. Without well-defined inputs, the model has to guess relationships and states. The skill produces standard plain text Mermaid code, so no local rendering libraries or heavy binaries are needed.
What it helps with
- map branching workflow logic with decision nodes
- document relational database schemas with keys and cardinality
- illustrate synchronous and asynchronous API calls across services
- visualize software architecture using C4 conventions
Example prompts for the agent
- Create a sequence diagram for a multi-step user checkout and payment callback
- Build an ERD for an accommodation rental platform with users, bookings, and reviews
- Generate a flowchart showing the date verification and booking confirmation flow
How to install mermaid-diagram-specialist
1claude-code-templates
npx claude-code-templates@latest --skill development/mermaid-diagram-specialist2Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill mermaid-diagram-specialist -a claude-code3Manually: put the files in place
~/.claude/skills/mermaid-diagram-specialist/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/mermaid-diagram-specialist/
Manually: put the files in place
.agents/skills/mermaid-diagram-specialist/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/mermaid-diagram-specialist/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates mermaid-diagram-specialist2Manually: put the files in place
.github/skills/mermaid-diagram-specialist/SKILL.mdPlatform CLI
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/mermaid-diagram-specialistManually: put the files in place
.devin/skills/mermaid-diagram-specialist/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.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-diagram-specialist
How to install mermaid-diagram-specialist in Claude Code?
Run npx claude-code-templates@latest --skill development/mermaid-diagram-specialist in your project terminal. Alternatively, place the skill definition file at ~/.claude/skills/mermaid-diagram-specialist/SKILL.md.
Which diagram formats does this skill support?
It handles flowcharts, sequence diagrams, entity-relationship diagrams, C4 models, class diagrams, state machines, Gantt charts, Git graphs, and user journeys.
What inputs are needed to produce accurate diagrams?
You need system specifications, step-by-step logic, or entity relationship details. Brand color palettes and existing documentation can be supplied optionally.
