# mermaid-diagrams

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.

- skill · `type=skill` · Claude Code · 1180 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/mermaid-diagrams
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/mermaid-diagrams

## What it 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`.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill creative-design/mermaid-diagrams
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill mermaid-diagrams -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/mermaid-diagrams/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/mermaid-diagrams/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/mermaid-diagrams/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/mermaid-diagrams/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates mermaid-diagrams
```

2. **Manually: put the files in place**
- File: `.github/skills/mermaid-diagrams/SKILL.md`

### Gemini CLI

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

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/mermaid-diagrams/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/mermaid-diagrams

## When to use it
- 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
- 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

## Similar
- [utility-mermaid-diagrams](https://affpapa.org/en/nevibecode/skills/utility-mermaid-diagrams.md) — skill · 736 installs
- [design-doc-mermaid](https://affpapa.org/en/nevibecode/skills/design-doc-mermaid.md) — skill · 80700 installs
- [architecture-diagrams](https://affpapa.org/en/nevibecode/skills/architecture-diagrams.md) — skill · 2000 installs
- [mermaid-diagram-generator](https://affpapa.org/en/nevibecode/skills/mermaid-diagram-generator.md) — skill · 331 installs
- [mermaid-expert](https://affpapa.org/en/nevibecode/agents/mermaid-expert.md) — subagent · ★ 41729
- [pretty-mermaid](https://affpapa.org/en/nevibecode/skills/pretty-mermaid.md) — skill · 4500 installs

## Other versions with the same name
- [mermaid-diagrams · hoodini](https://affpapa.org/en/nevibecode/skills/hoodini-mermaid-diagrams.md) — 406 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 224 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md