Skip to content
mcp/skillhub

Agent Skill

Diagram Design skill

diagram-designcathrynlavery/diagram-designskills/diagram-design/SKILL.md

Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, exploded axonometric, axonometric plan, Venn, pyramid/funnel, treemap and marimekko, heatmap, bar and dumbbell, waterfall, line (slopegraph, ridgeline, streamgraph, bump), Gantt and scatter charts (bubble, beeswarm), high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, service blueprint, deployment, dependency graph, UML class, story map, or database schema diagrams as HTML/SVG/PNG, with .drawio, Mermaid, and .excalidraw import, plus lifecycle phase maps, block decomposition trees, and onboarding guidance.

60kMIT

always on

211 tokname + description

once used

7,160 tokSKILL.md body

bundled files

2866 scripts

repo stars

60kGitHub

Install the Diagram Design skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/cathrynlavery/diagram-design.git /tmp/diagram-design
mkdir -p ~/.claude/skills
cp -R /tmp/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description211 tok
When the agent uses itThe SKILL.md instructions7,160 tok
Only if opened286 bundled files (5.0 MB)varies

Until it is used, diagram-design costs about 6.5× less than the median MCP server we measured (1,362 tokens on every turn). Skills vs MCP study

Checks

  • Ships scripts the agent can run. Read them before installing.
  • The instructions are over 5,000 tokens, the Agent Skills specification's guideline for SKILL.md.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Diagram Design
  • 0. First-time setup — style guide gate
  • 1. Philosophy
  • 2. When to Use
  • 3. Selection: semantic pattern, then visual type
  • Visual-type guide (45)
  • Confirm before drawing
  • 4. Universal Anti-patterns
  • 5. Design System
  • Semantic roles (at a glance)
  • 6. Core SVG Primitives
  • Mandatory connector rules
  • 7. Layout & Spacing
  • Complexity budget (per diagram)
  • 8. Summary Card Pattern
  • 9. Pre-Output Checklist (Taste Gate)
  • 10. Templates & Variants
  • To create a new diagram
  • 11. Importing an Existing Diagram (draw.io), Mermaid, and Excalidraw
  • Output dials — format, size, detail level, audience
  • 12. Output
  • Accessible SVG contract
  • Exporting to PNG / SVG