01
It starts by itself
diagram source changes. Runs in GitHub Actions or Claude Code routine.
- ↻ diagram source changes
push paths: **/*.drawio, **/*.mmd, **/*.excalidraw
cathrynlavery · 18K installsDiagram Design skill
Runs by itself, when a diagram file changes.
Your diagrams stay neat and on brand.
Install the Diagram Design skill and make it a habit: follow https://gethabit.dev/skills/cathrynlavery/diagram-design.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3It runs by itself
18K installs60K starsMIT licenceSource on GitHub ↗
Diagram Design
by cathrynlavery · 18K installs
The skill
Draws clean, branded diagrams as one web page file.
Only when you ask.
Clearer docs
Your diagrams stay neat and on brand. Clearer docs with less drawing time.
↻ Runs by itselfwhen a diagram file changes
How the habit works.
You don't have to.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
Stops after one diagram per run and at most 2 redraws after a failed check.
- 01
Check the style
The agent resolves the .diagram-design marker or checks references/style-guide.md, and asks you to customize if the tokens are still default.
- 02
Extract the source
For an import it runs the matching extract script, such as scripts/drawio_extract.py, and treats every label as data.
- 03
Pick type and plan
It picks a semantic pattern if behavior matters, then a visual type, and states the type, size preset and cuts before drawing.
- 04
Draw
It copies the closest template from assets/, loads the type reference and redraws the content with the connector rules.
- 05
Run the gates
It runs the taste gate checklist and python3 scripts/self_check.py on the file.
- 06
Report and log
It reports the fidelity ledger of merged or dropped parts and writes the run log.
What it may do.
Nothing more.
It writes only in its own folder and asks you before anything goes out.
- Writes only in**/*.html, loops/diagram-design-loop/**
- Talks tofonts.googleapis.com
- Sendsnothing
- Your OKIt asks you before anything goes out.
Is it for you?
Use it when it fits.
Read both lists. If the left one sounds like you, the Diagram Design skill helps.
Use it when
- ✓ You need an architecture or flow diagram for docs
- ✓ You want to redraw a draw.io or Mermaid file cleanly
- ✓ You want diagrams in your own brand colors
Skip it when
- – A table or a paragraph says the same thing
- – You need a quick plain-text diagram
Diagram Design skill, answered.
Does it convert my draw.io layout one to one?
No. It keeps the components and relationships and redraws the layout from scratch.
Does it export PNG files on its own?
No. Export happens only when you ask for it.
How do I install the Diagram Design skill?
Copy the prompt at the top into your agent. It installs the skill from cathrynlavery/diagram-design and sets up the habit. Or run npx skills add cathrynlavery/diagram-design --skill diagram-design.
Is the Diagram Design skill free?
Yes. It is published under MIT. Habit is free too.
Diagram Design. Now as a habit.
Install the Diagram Design skill and make it a habit: follow https://gethabit.dev/skills/cathrynlavery/diagram-design.md
All cathrynlavery skills →More design skills →
Works in
- Claude Code
- Codex
- Cursor
- ChatGPT
- Claude app
Made by cathrynlavery, published under MIT. Habit links to the original and never changes it. Is this your skill?