| name | svg-editor |
| description | Create SVG diagrams with professional PPT-quality layout, clear connections, and no overlapping elements. Use when creating flowcharts, architecture diagrams, sequence diagrams, concept diagrams, or charts as SVG, or when fixing layout or styling issues in existing SVGs. |
- User wants to create a flowchart, process diagram, or workflow diagram as SVG
- User wants to create an architecture diagram, system design diagram, or component diagram as SVG
- User wants to create a sequence diagram or interaction diagram as SVG
- User wants to create a concept diagram, mind map, or visual explanation as SVG
- User wants to create a chart, graph, or data visualization as SVG
- User wants to fix overlapping elements, improve connection clarity, or adjust spacing in an existing SVG
- User wants to edit, modify, or update an existing SVG diagram
- User wants an existing SVG upgraded to PPT-presentation quality
🔴 ZERO-TOLERANCE: All geometric computations MUST use Python scripts — never compute coordinates, bounding boxes, path strings, or dimensions manually. See reference/computation-snippets.md for full calling guide and snippet patterns.
Design standards: 16:9 aspect ratio (960×540), PPT-style shadows/gradients, Segoe UI font stack, WCAG AA contrast, 5–8 elements max. See reference/design-standards.md for full details.
Scripts (scripts/): standalone .py files — no package, no orchestrator.
Dependencies: pip install svgwrite networkx matplotlib
(pygraphviz optional — enables hierarchical Graphviz layout; falls back to spring layout if absent)
| Module | Library | Purpose | Key functions |
|---|
svg_builder.py | svgwrite | SVG elements for nodes, edges, labels, title bars | generate_node_svg(), generate_edge_svg(), generate_title_bar(), generate_arrow_marker(), get_shape_dimensions() |
graph_layout.py | networkx | Grid/auto layout, viewBox, overlap resolution | flow_layout(), auto_layout(), resolve_overlaps(), compute_viewbox(), distribute_along_circle() |
chart_builder.py | matplotlib | Bar, line, pie charts as SVG strings | render_bar_chart(), render_line_chart(), render_pie_chart() |
routing.py | custom | Orthogonal/bezier paths, endpoint validation | orthogonal_path(), connection_endpoints(), path_to_svg_d(), bezier_path() |
geometry.py | custom | BBox math, overlap detection | overlap(), find_overlapping(), center(), connection_point() |
labeling.py | custom | Label placement on connections | label_position(), compute_all_labels() |
colors.py | custom | WCAG contrast, PPT palette, gradient/shadow defs | wcag_aa_check(), get_gradient_defs(), get_shadow_filter(), PPT_PALETTE |
SVG assembly pattern: <svg> → <defs> (shadow filter + gradients + arrow marker) → title bar → connections → shapes → labels → </svg>.
Chart shortcut: for bar/line/pie charts, call chart_builder.render_*_chart() which returns a complete standalone SVG — no manual assembly required.
Load reference/computation-snippets.md when you need to compute positions, route connections, generate SVG elements, validate overlaps/contrast, or compute viewBox.
**Objective**: Generate a PPT-quality flowchart as raw SVG. Build node/edge data with grid positions, compute all geometry via scripts, assemble.
Steps:
- Analyze process → identify nodes (rows/cols) and edges. Extract title.
- Build node list with
id, type, text, row, col. Build edge list with from, to, optional label.
- Compute positions, routes, SVG elements, viewBox, and validate all via scripts (load reference/computation-snippets.md).
- Assemble per SVG assembly pattern. Output raw SVG.
Load reference/create-flowchart.md for detailed steps.
**Objective**: Generate a PPT-quality system architecture diagram as raw SVG. Group components into tiers, compute geometry via scripts.
Steps:
- Identify tiers/layers and components. Assign
row per layer, col per component.
- Build node/edge data. Add layer background panels (manual draw).
- Compute positions, routes, SVG elements, viewBox, and validate all via scripts (load reference/computation-snippets.md).
- Assemble and output raw SVG.
Load reference/create-architecture-diagram.md for details.
**Objective**: Generate a PPT-quality sequence diagram as raw SVG. Define participants and messages, compute via scripts.
Steps:
- List participants (all
row:0) and chronological messages.
- Build node/edge data. Add lifelines/activation bars (manual draw).
- Compute positions, routes, SVG elements, viewBox, and validate all via scripts (load reference/computation-snippets.md).
- Assemble and output raw SVG.
Load reference/create-sequence-diagram.md for details.
**Objective**: Generate a PPT-quality concept diagram/mind map as raw SVG. Central node with radial branches, compute via scripts.
Steps:
- Identify central concept and branch nodes. Mark central node.
- Build node/edge data.
- Compute radial positions, routes, SVG elements, viewBox, and validate all via scripts (load reference/computation-snippets.md).
- Assemble and output raw SVG.
Load reference/create-concept-diagram.md for details.
**Objective**: Generate a PPT-quality bar/line/pie chart as raw SVG. Build data series, compute layout via scripts, render chart shapes manually.
Steps:
- Determine chart type and extract data.
- Call
chart_builder.render_bar_chart() / render_line_chart() / render_pie_chart() — returns a complete SVG. No manual axis or path construction needed.
- Compute scales, bar widths, positions via script (load reference/computation-snippets.md). Validate contrast.
- Add legend. Assemble and output raw SVG.
Load reference/create-chart.md for details.
**Objective**: Analyze existing SVG, fix overlapping elements and poor connections. All adjustments via scripts.
Steps:
- Parse SVG, extract bounding boxes.
- Detect overlaps via
geometry.find_overlapping(), detect connection issues via routing.detect_intersections() (load reference/computation-snippets.md).
- Fix via
graph_layout.resolve_overlaps(), re-route via routing.orthogonal_path(), expand viewBox via graph_layout.compute_viewbox().
- Regenerate SVG elements via scripts. Validate and output.
Load reference/analyze-and-fix-layout.md for detailed steps.
**Objective**: Modify an existing SVG — change colors, text, fonts, styling, or add/remove/rearrange elements. All new geometry via scripts.
Load reference/modify-existing-svg.md for detailed steps.
**Objective**: Upgrade an existing SVG to PPT quality — shadows, gradients, title bar, 16:9, PPT typography. All defs/shapes via scripts.
Load reference/modify-existing-svg.md for detailed steps.
**Zero manual coordinate math.** Positions, paths, SVG elements, viewBox, overlaps, contrast — ALWAYS compute via scripts. NEVER add/subtract coordinates, verify alignment, or compute midpoints mentally.
**Trust script output.** Do NOT re-verify script results with mental math. If unsure, run a validation script.
**Assembly-only SVG writing.** Nodes, edges, markers, defs MUST use `svg_builder.generate_node_svg()`, `svg_builder.generate_edge_svg()`, etc. For charts, use `chart_builder.render_*_chart()` — do NOT write chart SVG manually.
When computing geometry, routing, SVG generation, viewBox, or validation → load [reference/computation-snippets.md](reference/computation-snippets.md).
When user describes a process flow with decisions → apply **create-flowchart**.
When user describes a system with tiers/layers → apply **create-architecture-diagram**.
When user describes interactions between actors over time → apply **create-sequence-diagram**.
When user describes a central topic with branches → apply **create-concept-diagram**.
When user provides data for visual representation → apply **create-chart**.
When user provides SVG with overlapping elements → apply **analyze-and-fix-layout**.
When user wants to change colors/text/elements in existing SVG → apply **modify-existing-svg**.
When user wants PPT styling on existing SVG → apply **upgrade-to-ppt-quality**.
When request spans multiple diagram types → apply capabilities sequentially, compose into one SVG.