# mermaid-skill

This skill writes Mermaid diagrams and exports them as PNG, SVG, or PDF. Use it for API flows, architecture maps, database schemas, and similar diagrams.

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

## What it does

The skill creates `.mmd` files for flowcharts, sequence diagrams, class diagrams, ER diagrams, state machines, Gantt charts, and other Mermaid formats. It relies on Mermaid’s automatic layout and can render through `mmdc` locally or through the Kroki API.

It checks the diagram before rendering, then reviews the exported image for clipped labels, dense layouts, and poor orientation. Local rendering requires `@mermaid-js/mermaid-cli` plus a headless Chrome browser; without that browser, `mmdc` export fails, so Kroki with `curl` is the practical fallback.

For CI or Docker, the skill includes a Puppeteer configuration for the `--no-sandbox` issue. It can revise the same `.mmd` and output files through a review loop, then hand the current diagram to Mermaid Live for browser editing.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Agents365-ai/365-skills mermaid-skill
```

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

### Gemini CLI

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

2. **Platform CLI**
```bash
gemini skills install https://github.com/Agents365-ai/365-skills --path plugins/mermaid/skills/mermaid-skill
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Agents365-ai/365-skills --skill mermaid-skill -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/Agents365-ai/365-skills/tree/HEAD/plugins/mermaid/skills/mermaid-skill/SKILL.md

## When to use it
- turn an API flow into a `.mmd` diagram
- map an authentication sequence
- model database links as an ER diagram
- render Mermaid as PNG, SVG, or PDF

## Example prompts
- Create an architecture diagram in `architecture.mmd` and export it as SVG.
- Draw the authentication flow between the client, API, and database, then validate it.
- Build an ER diagram from these tables and save the result as `schema.png`.

## Similar
- [mcp-builder](https://affpapa.org/en/nevibecode/skills/mcp-builder.md) — skill · 130949 installs
- [claude-api](https://affpapa.org/en/nevibecode/skills/claude-api.md) — skill · 74198 installs
- [lark-im](https://affpapa.org/en/nevibecode/skills/lark-im.md) — skill · 472900 installs
- [lark-event](https://affpapa.org/en/nevibecode/skills/lark-event.md) — skill · 466800 installs
- [caveman-discover](https://affpapa.org/en/nevibecode/skills/caveman-discover.md) — skill · 104400 installs
- [migration](https://affpapa.org/en/nevibecode/skills/migration.md) — skill · 103900 installs

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