Editorial diagrams
your designer won't hate.
44 diagram types, drawn by your coding agent as self-contained HTML + SVG, then brand-matched to your own site in about a minute. No Figma. No rounded-box slop.
The model had the content.
It was missing the taste.
Same content, two passes: Claude on its own, then Claude with the skill.
- One accent, not six. Color points at the single node that matters, nothing else.
- Real hierarchy. Type weight and grouping carry the meaning, not a rainbow of fills.
- Structure you can read. Every stage answers the same three questions: intent, guardrail, outcome. Read across a row and you see the whole system.
“The model already understood the content. What it was missing was taste, so I wrote the taste down.”
Cathryn Lavery · a generic tool asks “where should this box go?” This one asks “does this box deserve to exist?”
What you get
It runs inside the agent you already use. Nothing new to open, nothing to export.
44 visual types
Architecture, Sankey, heatmap, exploded axonometric, database schema and more. Each is a real type with its own rules, not one box style restyled 44 ways.
Brand-matched in ~60s
Point it at your site. It reads your colors and fonts and applies them to every diagram it draws.
Self-contained HTML + SVG
One file. Opens double-clicked, offline. No build step, no dashboard, nothing to host.
Imports draw.io, Mermaid & Excalidraw
Point it at a source and it redraws (not converts) at the size, detail and audience your destination needs.
Optional accessible motion
Diagrams can animate when it helps the explanation. Static is the default.
Accessible by default
Screen readers announce each diagram’s title and description, not a blank rectangle.
New: two axonometric types
One 2:1 projection, two jobs. Static by default, with animated examples.
Exploded axonometric
Parts of one object pulled apart along one axis: a teardown, an unboxing, assembly order. Every part sits at an equal gap, and every coordinate comes from one projection function.
Axonometric plan
One floor or site seen from above at an angle: rooms with furniture, buildings by phase. Walls are cut at desk height so every room reads from a single view.
Forty-four diagrams, one system
Browse the live gallery →Install
Start with the first card. Click any card to copy.
# one command, every skills host
npx skills add cathrynlavery/diagram-design# add + install
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design# add + install
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design# install from GitHub
pi install https://github.com/cathrynlavery/diagram-design# add + install
copilot plugin marketplace add cathrynlavery/diagram-design
copilot plugin install diagram-design@diagram-design# add + install
droid plugin marketplace add https://github.com/cathrynlavery/diagram-design
droid plugin install diagram-design@diagram-design --scope userKiro and OpenCode take the skills/diagram-design folder directly, see the README. Editable install? git clone the repo and symlink skills/diagram-design. Saved profiles in ~/.diagram-design/profiles/ survive updates.
Then just ask
Describe what you want in a sentence. No syntax, no config.
- >_“Make me an architecture diagram of my app: frontend, backend, database, Redis cache.”
- >_“I need a quadrant of Q2 projects by impact vs effort.”
- >_“onboard diagram-design to https://yoursite.com”
- >_“redraw this .drawio file for my deck.”
# copy a scaffold and edit
cp skills/diagram-design/assets/template.html my-diagram.html> make me an architecture diagram of my app
reads your brand · picks type: architecture
states the plan, then draws
wrote architecture.html one file, opens offline