spinediagramslisted
Install: claude install-skill wasulajr/spinediagrams
# Architecture Diagram SVG Skill
Produces fixed-width (1600 px) SVG architecture diagrams with:
- A title / subtitle header band at the top
- A **6-column grid** with **up to 3 rows** of technology containers (each container holds colour-coded component nodes)
- **Orthogonal single-spine edge routing**. All connection lines travel through the spine zone(s) between adjacent rows so they never pass through container bodies.
- A status-colour legend at the bottom
## Workflow
1. **Understand the diagram.** Identify the technology containers (lanes), the components inside each, and the connections between them.
2. **Build the config dict** (see format below).
3. **Run the engine** and save the SVG.
4. **Present the file** to the user.
## Engine location
```
<skill_dir>/scripts/svg_engine.py
```
Import or call it directly:
```python
# Option A: import
import sys
sys.path.insert(0, "<skill_dir>/scripts")
from svg_engine import Diagram
d = Diagram(config) # config is a dict (see format below)
svg = d.render()
with open("output.svg", "w") as f:
f.write(svg)
# Option B: CLI (config must be written to a JSON file first)
# python <skill_dir>/scripts/svg_engine.py config.json output.svg
```
## Config format
```python
config = {
"title": "Main Title — Optional subtitle", # " — " (em dash) splits title from subtitle
"num_cols": 6, # optional, default 6; increase for more lanes per row
"aspect": "16:9", # optional, default "16:9". Also accepts "4:3" o