Diagram Designdiagramdesign.dev 17k+ GitHub
DrawingEditorial diagrams
Runs onClaude Code · Codex · Pi
OutputHTML + inline SVG

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.

Install the skill View on GitHub
Hit #1 on GitHub Trending 17k+ stars Open source · MIT
Fig. 01 · the skill at workclick to play · 33s demo

The model had the content.
It was missing the taste.

Same content, two passes: a generic prompt, then redrawn and brand-matched.

Fig. 02aFirst pass · generic prompt
A generic first-pass diagram: pastel rounded boxes in a row, random colors, no visual hierarchy.
Fig. 02bRedrawn · matched to a brand
The same content redrawn: editorial layout, one accent, real hierarchy, fewer nodes, matched to a client brand.
  • 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.
  • Deletion. Every box that didn’t earn its place is gone. Same idea, less noise.

“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.

29 visual types

Architecture, flowchart, sequence, loop, radar, quadrant, pyramid, gantt, ER and more — each a real type with its own rules, not one box style restyled 29 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

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.

Install

One skill, three hosts. Click a card to copy.

Claude Code
# add + install
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
Then enable auto-update once in /plugin → Marketplaces.
Pi
# install from GitHub
pi install https://github.com/cathrynlavery/diagram-design
Run /reload in an open Pi session.
Codex
# add + install
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design
Codex refreshes Git marketplaces at startup.

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
Fig. 03 · one turnno syntax · one file
agent session
> 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