Diagram Design
Editorial diagrams your designer won't hate.
14 types. One Claude Code skill. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram.
No Figma. No generic rounded boxes. No 30-minute color-picking sessions.
Why I built it
I write at littlemight.com (and run BestSelf.co on the side). Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or just skip the diagram.
So I built a Claude Code skill for it. Fourteen types, editorial quality, matches your brand in 60 seconds by reading your website.
The highest-quality move is usually deletion. Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10.
What it makes
All 14 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images.
Architecture
Components + connections | 
Flowchart
Decision logic | 
Sequence
Messages over time |
State machine
States + transitions | 
ER / data model
Entities + fields | 
Timeline
Events on an axis |
Swimlane
Cross-functional flow | 
Quadrant
Two-axis positioning | 
Nested
Hierarchy by containment |
Tree
Parent → children | 
Layer stack
Stacked abstractions | 
Venn
Set overlap |
Pyramid / funnel
Ranked hierarchy or drop-off | 
Consultant 2×2
Scenario matrix · named cells | |
Browse the live gallery: open skills/diagram-design/assets/index.html in your browser to flip through all 14 diagrams with light / dark / full-editorial tabs.
Install
# Clone the repo somewhere, then symlink the inner skill into Claude Code's skills dir
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design
The real skill lives at skills/diagram-design/ inside the repo (so the same tree works as a Claude Code plugin, a Codex plugin, and a standalone skill). The symlink points Claude Code at that inner directory.
Restart Claude Code. The skill registers as diagram-design and activates whenever you ask Claude to make a diagram.
Alternative: install as a plugin
Quicker to install — but the skill lives in the plugin cache, so edits to references/style-guide.md don't survive plugin updates. Pick this if you just want to try it out; use the clone route above if you plan to customize the style guide by hand.
Claude Code:
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
Claude Cowork: Customize → Directory → Plugins → + → paste cathrynlavery/diagram-design → Sync, then install from the Personal list.