svg-diagramlisted

# SVG Diagram Skill — Production-Grade Handbook Read this entire file before drawing any diagram. Then consult `references/` for detailed specs and complete examples. --- ## Step 1: Diagram Type Decision **Determine the diagram type first, then choose the technical approach.** | User Intent | Type | Approach | |-------------|------|----------| | Message interaction, call chains, sequence | Sequence diagram | Hand-written SVG | | Step flows, decision branches | Flowchart | Hand-written SVG | | Component containment, system architecture | Structure diagram | Hand-written SVG | | Abstract concepts, mechanism explanation | Illustrative diagram | HTML + inline SVG (interactive) | | Database table structures, ER diagrams | ERD | mermaid.js (see references/erd.md) | | State transitions, lifecycle | State machine diagram | Hand-written SVG (see references/state-machine.md) | | Chronological events, milestones | Timeline diagram | Hand-written SVG (see references/timeline.md) | | Controls needed | Interactive diagram | HTML widget (see references/interactive.md) | **Mandatory split rules (exceed these limits → split into multiple diagrams):** - Sequence participants > 6 → split into "overview + sub-flow" - Horizontal flow nodes > 5 → switch to vertical or split - Structure nesting > 3 levels → split into "system-level + component-level" - Flows with loops → never draw circular, use HTML stepper (see references/interactive.md) --- ## Step 2: Canvas & Coordinate System ``` view