diagram-contract

Every diagram that lands in a document follows one shape: a text DSL source beside the document and a committed SVG rendered from it. This skill picks the tool, applies the house palette, and produces both artifacts so the image carries on github.com. ## Pick the tool Reach up the table only when the default cannot carry the domain. The default is the first row. | Purpose | Tool | |---|---| | Structure, class, relations, small-to-medium flow, state, timeline | **nomnoml** (default) | | Architecture, system, module dependencies, container maps | **D2** | | Very large dense DAG, hundreds of nodes | Graphviz DOT | | Byte, bit, or on-disk layout | bytefield-svg | | Quantitative chart, only with sourced real figures | Vega-Lite | ## Author it Five steps, each with a checkable done condition. 1. **Choose the shape.** A comparison, trade-off, or decision matrix is a Markdown table. For a quantitative comparison whose real numbers cannot be sourced, a table is the required form, not a chart. Done when the choice between table and diagram is made and stated. 2. **Write the source** into `assets/<kebab-slug>.<ext>` beside the document that will embed it, opening with the house header below when the tool is nomnoml. Done when the file exists on disk and, for nomnoml, the header is the first block in it. 3. **Render** with the matching command under [Render commands](#render-commands). Done when the command exits zero and the SVG exists beside its source. 4. **Embed** as `![<what i...