Editorial diagrams
your designer won't hate.
29 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 idea, two passes. Left: what a generic prompt returns. Right: redrawn in an editorial system, matched to a brand.
“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
A skill, not a service. It reads references only when a request matches, then draws one file.
29 visual types
Architecture, flowchart, sequence, loop, radar, quadrant, pyramid, gantt, swimlane, timeline, ER and more — each with a real grammar.
Brand-matched in ~60s
Point it at your website; it reads your palette and fonts, maps them to paper, ink, accent and link, and applies them everywhere.
Self-contained HTML + SVG
One file that opens double-clicked, offline, with no build step and no dependencies beyond web fonts.
Imports draw.io & Mermaid
Point it at a source and it redraws (not converts) at the size, detail and audience your destination needs.
Optional accessible motion
Reveal, step and loop modes when an explanation benefits. Static stays the default; reduced-motion always resolves to a full frame.
Accessible by default
Every diagram ships a resolving accessible name, title and description, so screen readers announce the figure, not a blank SVG.
Twenty-nine plates, one system
Browse the live gallery →
Install
One skill, three hosts. Pick yours and paste.
# 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-designEditable install? git clone the repo and symlink skills/diagram-design. Saved profiles in ~/.diagram-design/profiles/ survive updates.
Then just ask
Your agent picks the type, states its plan, and draws one file. No syntax to learn.
- >_“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