diagram-design

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	Org chart Ownership + routing	Venn Set overlap
Layer stack Stacked abstractions	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 [email protected]: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