Diagram Design

I wanted good-looking diagrams for my blog posts.

I write at littlemight.com. 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. 13 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 13 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.

ArchitectureComponents + connections FlowchartDecision logic SequenceMessages over time

State machineStates + transitions ER / data modelEntities + fields TimelineEvents on an axis

SwimlaneCross-functional flow QuadrantTwo-axis positioning NestedHierarchy by containment

TreeParent → children Layer stackStacked abstractions VennSet overlap

Pyramid / funnelRanked hierarchy or conversion drop-off

Browse the live gallery: open assets/index.html in your browser to flip through all 13 types with light / dark / full-editorial tabs.

Install

# Clone into your Claude Code skills directory
git clone git@github.com:cathrynlavery/diagram-design.git ~/.claude/skills/diagram-design

# Or if you keep skills elsewhere, symlink it
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design ~/.claude/skills/diagram-design

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 fro