# mermaidjs-v11

This skill gives your agent Mermaid.js v11 syntax so it can write diagrams as code and render them to SVG, PNG or PDF. Handy when a schema or flow needs a picture, not a paragraph.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 362 installs · ★ 2228
- Author: mrgoonie
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/mrgoonie/claudekit-skills/tree/HEAD/.claude/skills/mermaidjs-v11/SKILL.md
- Updated: 2026-04-03
- HTML: https://affpapa.org/en/nevibecode/skills/mermaidjs-v11

## What it does

The skill ships reference files covering more than 24 diagram types: `flowchart`, `sequenceDiagram`, `classDiagram`, `stateDiagram`, `erDiagram`, `gantt`, `journey`. Your agent pulls the syntax from there and fills in your data. Separate references cover configuration and themes, CLI workflows, and embedding through the JavaScript API.

You can keep a diagram inline in a markdown block tagged `mermaid`, and set the theme in that block's frontmatter. For image files there is the CLI: install `@mermaid-js/mermaid-cli` globally with npm, then run `mmdc -i diagram.mmd -o diagram.svg`. Dark theme and a transparent background come from `-t dark -b transparent`, and custom styling from `--cssFile`.

The CLI path needs Node.js with npm, since `mmdc` is an npm package. Browser rendering is lighter: load `mermaid.min.js` from a CDN and call `mermaid.initialize`. The skill installs into six platforms, and each keeps `SKILL.md` in its own directory, so check that the installer dropped the file where your editor looks for it.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mrgoonie/claudekit-skills mermaidjs-v11
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/mrgoonie/claudekit-skills --path .claude/skills/mermaidjs-v11
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -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/mrgoonie/claudekit-skills/tree/HEAD/.claude/skills/mermaidjs-v11/SKILL.md

## When to use it
- turn a written process description into a flowchart
- diagram an API call sequence
- map database tables into an erDiagram
- lay out a project plan as a Gantt chart
- render a .mmd file to PNG with a transparent background

## Example prompts
- draw a flowchart for this process description
- make a sequenceDiagram for the login flow
- build an erDiagram from these table definitions

## Similar
- [mermaid-diagrams](https://affpapa.org/en/nevibecode/skills/hoodini-mermaid-diagrams.md) — skill · 406 installs
- [mermaid-diagram-generator](https://affpapa.org/en/nevibecode/skills/mermaid-diagram-generator.md) — skill · 331 installs
- [design-doc-mermaid](https://affpapa.org/en/nevibecode/skills/design-doc-mermaid.md) — skill · 80700 installs
- [utility-mermaid-diagrams](https://affpapa.org/en/nevibecode/skills/utility-mermaid-diagrams.md) — skill · 736 installs
- [mermaid-tools](https://affpapa.org/en/nevibecode/skills/mermaid-tools.md) — skill · 1500 installs
- [cli-anything-mermaid](https://affpapa.org/en/nevibecode/skills/cli-anything-mermaid.md) — skill · 519 installs

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