# 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.