diagramlisted

# Diagram — draw it together, keep the source Diagrams here are **source files first** (Mermaid by default): diffable, regenerable, and reviewable like code. Renders are previews; the committed source is the artifact. > **Not for data charts.** This skill draws *structural* diagrams — components, > flows, states, schemas, ideas. If the request is a chart/plot/dashboard over > *data* (numbers → bars, lines, points), it does not apply: reach for a > plotting library suited to the stack (matplotlib/plotly, Vega-Lite, Recharts, > or a spreadsheet) rather than forcing the data into Mermaid. ## 1. Pick the notation by diagram type | The user wants to see… | Use | |---|---| | Components/flow/dependencies | Mermaid `flowchart` (`LR` for pipelines, `TB` for hierarchies); add `layout: elk` frontmatter when >15 nodes | | Interactions over time | Mermaid `sequenceDiagram` | | Lifecycle / states | Mermaid `stateDiagram-v2` | | Data model / tables | Mermaid `erDiagram` | | Modules / classes | Mermaid `classDiagram` | | Brainstorm / idea map | Mermaid `mindmap` | | Timeline / plan | Mermaid `gantt` | **Escalations (only when Mermaid genuinely fails the job):** - Dense graph that Mermaid tangles even with `layout: elk` → Graphviz **DOT source**. Render only if `dot` is installed (`command -v dot`); otherwise ship the source and say plainly that no local renderer is available. - Free-form idea sketch with spatial meaning → **Excalidraw JSON** (open and edit at excalidraw.com). No l