Diagram
Picks mermaid vs drawio by complexity, writes the diagram into your docs, previews via MCP.
Test report
- Verdict
- Tested · Works
- Score
- Tested
- Jul 15, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Aug 10, 2026 · 3360c7b
Asked for a login-flow diagram twice: the baseline response (skill ignored) reproduced the exact ASCII-art anti-pattern the skill explicitly forbids, while following the skill body produced a real, committed docs/auth-flow.md with a properly typed mermaid sequenceDiagram block. Default mermaid path needs nothing beyond the copied skill folder; only the drawio branch needs the separate .mcp.json drawio server, which isn't copied by the assignment's plain skill-folder install.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 9/10
- Docs & honesty 4/5
What Diagram does
Decides mermaid-vs-drawio using inline heuristics (swimlanes, custom shapes, layout precision), writes the diagram source into the target doc, and for drawio previews it live via the drawio MCP server before the user exports a PNG. Triggers on 'diagram', '/diagram', or any flowchart/architecture/sequence/state diagram request; defaults to mermaid so the common case needs no extra tooling.
How to install Diagram
git clone https://github.com/domengabrovsek/claude.git
cd claude
mkdir -p ~/.claude/skills
cp -r skills/diagram ~/.claude/skills/diagram
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Diagram
-
/diagramPicks mermaid vs drawio by complexity, writes the diagram into your docs, previews via MCP.
It also activates on plain-language prompts like these:
-
draw a sequence diagram of the login flow for our docs -
make a flowchart showing how requests move through our architecture -
add an architecture diagram into this markdown file
Frequently asked questions
- Is the Diagram skill free?
- Yes. The skill itself is free from domengabrovsek/claude. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Diagram work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 15, 2026. Verdict: Tested · Works. Asked for a login-flow diagram twice: the baseline response (skill ignored) reproduced the exact ASCII-art anti-pattern the skill explicitly forbids, while following the skill body produced a real, committed docs/auth-flow.md with a properly typed mermaid sequenceDiagram block. Default mermaid path needs nothing beyond the copied skill folder; only the drawio branch needs the separate .mcp.json drawio server, which isn't copied by the assignment's plain skill-folder install.
- What is the Diagram SkillProof Score?
- 9.2/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 4/5.
- How do I install Diagram?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Diagram with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.