SVG Diagrams

---
name: svg-diagrams
description: Turn described processes and relationships into clear, self-contained SVG flowcharts and system diagrams.
---
# SVG Diagrams
Translate supplied relationships into a readable static vector diagram.

## Model before drawing
- Extract nodes, directed relationships, and branch conditions from the user's description. Do not invent steps or imply that correlation is causation.
- Distinguish sequence, containment, and dependency. Choose a consistent visual meaning for each connector style.
- For uncertain relationships, ask one focused question or mark the relationship as unconfirmed. Do not silently pick a direction.

## Draw
- Use the requested dimensions or a landscape viewBox. Measure the longest labels before choosing node sizes, and allow at least 16 pixels of text padding.
- Align primary steps along one axis. Route feedback loops outside the main row, leaving clear space for labels and arrowheads.
- Make arrowheads end at node boundaries rather than underneath nodes. Label branch conditions near the relevant connector without overlapping other labels.
- Use a small palette and make the diagram understandable without relying on color alone. Prefer a few readable nodes to a dense graph squeezed onto one page.
- Export editable SVG with an accessible title and description, explicit width and height, and a viewBox. Escape text in XML. Use no scripts, remote resources, or HTML foreignObject elements.

## Check
Verify every source node and edge appears exactly as intended. Check arrow direction, branch labels, dangling connectors, text bounds, and overlaps in a rendered preview when possible. If you cannot render, distinguish structural checks from unperformed visual checks.

## Deliver
Write diagram.svg in a new output folder, plus a brief node-and-edge list so the relationships can be reviewed. Do not claim the depicted system was implemented or tested merely because a diagram was drawn.