/diagram
Create and validate Mermaid diagrams. Use when creating, editing, or reviewing Mermaid diagrams in markdown files.
Claude Code
$ npx -y skills add bendrucker/claude --skill diagram --agent claude-code
Codex
$ npx skills add bendrucker/claude --skill diagram -a codex -y
Cursor
$ npx skills add bendrucker/claude --skill diagram -a cursor -y
Gemini CLI
$ npx skills add bendrucker/claude --skill diagram -a gemini-cli -y
GitHub Copilot
$ npx skills add bendrucker/claude --skill diagram -a github-copilot -y
OpenCode
$ npx skills add bendrucker/claude --skill diagram -a opencode -y
Windsurf
$ npx skills add bendrucker/claude --skill diagram -a windsurf -y
SKILL.md
diagram.SKILL.mdname: mermaid description: Create and validate Mermaid diagrams. Use when creating, editing, or reviewing Mermaid diagrams in markdown files. user-invocable: true
Mermaid Diagrams
Write Mermaid diagrams in markdown that parse cleanly. The work is done when the validator exits 0 on every file you touched:
bun ${CLAUDE_SKILL_DIR}/scripts/validate.ts <file.md>...It prints each failing block's line and parser message. Add `--json` for structured output.
Diagram Types
| Type | Directive | Use For | Reference | |------|-----------|---------|-----------| | Flowchart | `flowchart TB` | Process flows, decision trees, architecture | [flowchart.md](./references/flowchart.md) | | Sequence | `sequenceDiagram` | API interactions, message passing, protocols | [sequence.md](./references/sequence.md) | | State | `stateDiagram-v2` | State machines, lifecycles | [state.md](./references/state.md) | | ER | `erDiagram` | Database schemas, entity relationships | [er.md](./references/er.md) |
Write node and message labels in a few words, with full descriptions in the surrounding prose.
Other skills on claude.
cli
Type-safe CLI argument parsing with commander and @commander-js/extra-typings, the standard parser for this repo's Bun scripts.…
prose-lab
Turn the user's labels on repo prose, or their notes from reviewing a document in Plannotator, into calibrated Vale rules.
activity
Report real device usage from ActivityWatch. Covers per-app time, window titles, and active vs idle spans. Use when asked "what…
agent-team
Orchestrating Claude Code agent teams. Use when creating teams, spawning teammates, assigning tasks, configuring teammate modes,…
handoff
Hand the current conversation off to a fresh background agent that picks up the work immediately, so you can step away and track…
More skills from other plugins.
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
ask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
Questions about diagram.
- Which coding agents can use diagram?
- diagram installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.

