← ClaudeAtlas

diagram-designlisted

Design editorial-quality diagrams as self-contained inline SVG — architecture diagrams, flows, sequences, state machines, data models, timelines, layer stacks, quadrants, comparisons, and system maps. Use when explaining how a system is arranged, how a process moves, how components depend on each other, or how options compare; when a Mermaid or draw.io diagram needs to be converted into a document's design system; or when an existing diagram looks auto-generated and needs editorial judgment. Do not use for quantitative charts of measured data (use chart-design), for the surrounding report structure (use analytical-document-design), for UI mockups or wireframes, or for producing editable .drawio files.
Avinava/document-design-system · ★ 2 · Web & Frontend · score 73
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