| name | svg-generate |
| description | Creates static, editable SVG diagrams such as flowcharts, architecture diagrams, decision trees, matrices, and risk maps. Use for deterministic non-data-driven diagrams; use D3 for interactive data visualizations and infographic-builder for sourced visual narratives. |
| compatibility | Requires file write access and Python 3 for bundled structural validation. Visual inspection requires an SVG-capable browser or renderer. |
| metadata | {"category":"diagram-generation"} |
SVG Diagram Generation
Create raw, editable SVG without adding a rendering library. Follow the target project's design tokens and output conventions when present.
Workflow
-
Determine the diagram's audience, question, output path, dimensions, and required labels.
-
Choose the simplest suitable structure: flow, tree, layered architecture, matrix, map, timeline, or relationship diagram.
-
Write SVG with:
- a responsive
viewBox;
- non-empty
<title> and <desc> elements;
- semantic
<g> groups with unique descriptive IDs;
- selectable text and a system font stack;
- explicit arrow markers and labeled connections;
- project colors or CSS custom properties when available;
- redundant labels or shapes when color carries meaning.
-
Save to the user-requested or project-appropriate .svg path. Do not assume a deliberation directory.
-
Validate structurally:
python3 <skill-directory>/scripts/validate_svg.py <output.svg>
-
Render or open the SVG when supported. Inspect clipping, overlap, reading order, contrast, label size at delivery dimensions, and light/dark context where relevant.
-
Repair structural or visual failures and repeat validation before delivery.
Diagram guidance
- Decision matrix: options as rows, criteria as columns, with text labels in addition to color.
- Trade-off map: labeled axes and points; use size only when it encodes a defined value.
- Risk map: label probability, impact, quadrants, and every plotted risk.
- Flowchart: use distinct process and decision shapes with labeled conditions.
- Architecture diagram: show boundaries, direction, protocols, and trust or ownership zones that matter to the question.
Use context-dependent spacing, typography, and palette rather than universal hard-coded styling. Keep decorative detail subordinate to comprehension.
