SVG Diagram Builder

Problem

Hand-written SVG diagrams often fail at pixel level: arrows float away from boxes, labels cross lines, Venn labels overflow, table headers lack hierarchy, and light/dark palettes drift. This skill is aimed at structured diagrams such as flowcharts, architecture maps, loop diagrams, Venn diagrams, and parameter tables, where consistency matters more than one-off generation.

How It Works

The skill turns SVG output into a repeatable rule-based workflow:
- Planning: confirm diagram type, content points, theme, aspect ratio, and derive viewBox, center lines, spacing, and color values from the standard.
- Generation: produce a single-file, inline-renderable SVG codebase with rules for structure, typography, connectors, arrows, code hygiene, and tables, including details such as no overlaps, center alignment, fill="none" for open paths, and arrow tips ending close to box edges.
- Review: if the environment can render images, use rsvg-convert or cairosvg to render a PNG and inspect overlaps, text overflow, arrow placement, and label clearance. If not, fall back to coordinate checks for line spacing, centered labels, connector capacity, and table header hierarchy.

Boundaries

It is best for medium-sized structured diagrams and reviewing existing SVGs. It is not reliable for exact data charts, large node graphs over 12 nodes, multi-level mind maps, precise Gantt timelines, realistic illustration, 3D perspective, or maps. Prefer matplotlib, plotly, Mermaid, Graphviz, or dedicated diagram tools for those cases.