cathrynlavery / diagram-design

Diagram Design · an agent skill · 44 diagram types

Fit the diagram to where it’s going.

Same source, different diagrams. Four dials set the deliverable, the canvas and its type ramp, how much of the source survives, and the wording — and every import ends with a fidelity ledger of what got merged, collapsed or dropped.

$ npx skills add cathrynlavery/diagram-design
Browse the gallery View source
order-path.html · illustrativehtml · doc-wide · balanced · mixed

One accent for the one thing to look at first · 1px hairlines · no shadows · every coordinate on a 4px grid

The four dials · same source fileset: html · doc-wide · balanced · mixed
Format4
html
  • html
  • svg
  • png
  • html+png

The deliverable

Size10
doc-wide
  • doc-inline
  • doc-wide
  • slide-16x9
  • + 7 more

The viewBox and the type ramp

Detail3
balanced ≤12
  • faithful ≤24
  • balanced ≤12
  • simplified ≤7

How much of the source survives

Audience3
mixed
  • engineer
  • mixed
  • executive

The wording, not the count

One node, three audiences

engineer
Auth ServiceJWT · RS256 · :8443
mixed
Auth Servicetoken check
executive
Sign-in 

The README’s own example of the audience dial: the same node, worded three ways.

Fidelity ledger

Detail: balanced · 12 source nodes → 8 drawn
Collapsed: "Token valid?" decision → edge label on Gateway → Auth
Dropped:   1 sticky note ("legacy path, to be retired"), unconnected in source
Kept in full: the request path (Web/Mobile → Gateway → Orders → Postgres)

Verbatim from the README. You know the source; you’d notice anyway.

What the detail dial removes first

01Decorationsfirst to go
02Duplicatesthen
03Leaf clustersthen
04Infrastructurelast

For docs that live in Git and change every sprint, Mermaid is still the better fit. Diagram Design is for the diagram you are going to publish.From the README’s own comparison