---
name: "svg-architecture-diagram"
description: "Interactive drag-and-drop system architecture diagram builder. Pre-loaded with a microservices example. Add nodes, drag to rearrange, and export clean SVG."
metadata:
version: "1.0.0"
runtime:
entrypoint: "arch-diagram.html"
---
# SVG Architecture Diagram
> **Purpose:** An interactive canvas for visualizing system architecture. Pre-loaded with a microservices example (Browser → API Gateway → Auth/Skills services → PostgreSQL/Redis). Drag nodes to rearrange, double-click to rename, add new nodes from the toolbar, and export the result as a clean SVG file.
---
## How to Use
1. **Drag nodes** — click and drag any service box to reposition it
2. **Double-click a node** — rename it inline
3. **Add Node button** — cycles through Client, Service, Database, Cache, External types
4. **Export SVG** — downloads the current diagram as `architecture.svg`
---
## Node Types
| Type | Color | Use For |
|------|-------|---------|
| Client | Blue | Browser, mobile app, CLI |
| Service | Purple | API servers, microservices |
| Database | Green | PostgreSQL, MySQL, SQLite |
| Cache | Amber | Redis, Memcached, CDN |
| External | Red | Third-party APIs, Stripe, AWS |
---
## Connections
Edges are drawn automatically based on a predefined connection list. The edge labels show the protocol (HTTPS, REST, SQL, etc.).
---
## Export Format
The exported SVG is self-contained and renders cleanly in browsers, Figma, Notion, and GitHub READMEs.
---
## Files
### `arch-diagram.html`
```html
System Architecture Diagram
△ System Architecture Diagram
Drag nodes • Double-click to rename • Add & Export