diagram-designlisted
Install: claude install-skill Avinava/document-design-system
# Diagram Design
A diagram earns its place when the **arrangement itself carries meaning** that a sentence or a list cannot carry as fast.
That is the whole test. Boxes-and-arrows restating a numbered list is slower than the list. A flowchart of a linear three-step process is worse than three sentences. Before drawing anything, say what the reader will understand from the *shape* that they would not get from the prose.
If the answer is "nothing," write the prose.
## The standard
The highest-quality move is usually deletion. Every node earns its place. Target density around 4/10 — a diagram that fills its frame is almost always doing too much.
The accent color is reserved for the one or two things the reader should look at first. Everything else is ink and hairlines.
*(This standard is adapted from [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design), MIT. See Credits.)*
## Choosing a form
Match the form to the relationship being shown, not to the data you happen to have.
| The reader needs to understand | Form |
|---|---|
| How parts are arranged and what talks to what | Architecture / system map |
| How something moves through steps, with branches | Flow |
| Who calls whom, in what order, over time | Sequence |
| What states exist and what transitions between them | State machine |
| How entities relate and what they hold | Data model |
| What happened when, and in what order | Timeline |
| How responsibility is divided across actors | Sw