technical-svg-diagrams

<objective>
Generate technical SVG diagrams with consistent styling for blog posts and documentation. All diagrams use a unified visual language: grid backgrounds, monospace fonts, muted colors with semantic accents, and clean geometric shapes.
</objective>

<quick_start>
1. Identify diagram type needed (architecture, flow, or component)
2. Read `references/svg-patterns.md` for templates and color palette
3. Generate SVG using the established patterns
4. Save to target directory with descriptive filename
</quick_start>

<design_system>
## Color Palette

| Purpose | Color | Hex |
|---------|-------|-----|
| Background | Light gray | #fafafa |
| Grid lines | Subtle gray | #e5e5e5 |
| Primary text | Dark gray | #333 |
| Secondary text | Medium gray | #666 |
| Muted text | Light gray | #999 |
| Borders/arrows | Gray | #ccc |
| Success/positive | Green | #27ae60 |
| Error/negative | Red | #e74c3c |
| Primary accent | Blue | #3498db |
| Warning/sandbox | Orange | #f39c12 |
| Process step | Purple | #9b59b6 |

## Typography

- **Font family:** `monospace` for all text
- **Title:** 14px bold, #333
- **Subtitle/tag:** 12px, #888, in brackets `[ LIKE_THIS ]`
- **Labels:** 10-11px, color matches element
- **Notes:** 7-8px, #999

## Common Elements

**Grid background:**
```xml
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e5e5e5" stroke-width="0.5"/>
</pattern>
```

**Arrow marker:**
```xml
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
  <path d="M0,0 L0,6 L9,3 z" fill="#ccc"/>
</marker>
```

**Node (circle with inner dot):**
```xml
<circle cx="X" cy="Y" r="35" fill="none" stroke="#ccc" stroke-width="2"/>
<circle cx="X" cy="Y" r="18" fill="#COLOR"/>
```

**Box container:**
```xml
<rect x="X" y="Y" width="W" height="H" fill="none" stroke="#ccc" stroke-width="2"/>
```

**Dashed container (sandbox/isolation):**
```xml
<rect x="X" y="Y" width="W" height="H" fill="n