# mermaid-diagrams

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 406 installs · ★ 291
- Author: hoodini
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/hoodini/ai-agents-skills/tree/HEAD/skills/mermaid-diagrams/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/hoodini-mermaid-diagrams

## What it does

The skill is a syntax reference with worked examples. Flowcharts with decision nodes and subgraphs, sequence diagrams with activation boxes and `alt`/`loop` blocks, class diagrams with access modifiers, ER diagrams with `||--o{` cardinality, Gantt charts with task dependencies, plus state, pie, gitGraph, journey and mindmap.

Styling gets its own section: `classDef` sets fill and text colour per node. There is also a React component that calls `mermaid.render` and drops the returned SVG into a container. Diagrams go in a code block tagged `mermaid`, which GitHub, GitLab and most markdown renderers pick up.

The skill installs into six platforms, and the file path differs for each: `~/.claude/skills/mermaid-diagrams/SKILL.md` in Claude, `.cursor/skills/mermaid-diagrams/SKILL.md` in Cursor, `.github/skills/mermaid-diagrams/SKILL.md` in Copilot. If your team opens the same repo in different editors, you end up keeping a copy in each folder.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a claude-code
```

2. **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

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a cursor
```

2. **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 hoodini/ai-agents-skills mermaid-diagrams
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add hoodini/ai-agents-skills --skill mermaid-diagrams -a opencode
```

### 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/hoodini/ai-agents-skills/tree/HEAD/skills/mermaid-diagrams/SKILL.md

## When to use it
- draw a process flowchart straight into markdown
- map a client-server exchange as a sequence diagram
- show database tables and their relations
- plan a project in a Gantt chart with task dependencies
- render an SVG diagram inside a React component

## Example prompts
- draw a flowchart of the order processing flow in Mermaid
- make a sequence diagram for OAuth login
- build an ER diagram for the users, orders and products tables

## 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
- [mermaid-diagram-generator](https://affpapa.org/en/nevibecode/skills/mermaid-diagram-generator.md) — skill · 331 installs
- [mermaid-tools](https://affpapa.org/en/nevibecode/skills/mermaid-tools.md) — skill · 1500 installs
- [mermaid-expert](https://affpapa.org/en/nevibecode/agents/mermaid-expert.md) — subagent · ★ 41729
- [mermaidjs-v11](https://affpapa.org/en/nevibecode/skills/mermaidjs-v11.md) — skill · 362 installs

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

From the same set: [hoodini/ai-agents-skills](https://affpapa.org/en/nevibecode/by/hoodini/ai-agents-skills.md) — 5 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