{"manifest":{"name":"SVG Architecture Diagram","version":"1.0.0","description":"Interactive drag-and-drop system architecture diagram builder. Pre-loaded with a microservices example. Add nodes, drag to rearrange, and export clean SVG.","tags":["visualization","architecture","diagram","devops","tool","svg"],"standard":"agentskills.io","standard_version":"1.0","content_checksum":"5641150e47f5c41bc509548a3d917b784ee6d619bd6a025b75e3f2309a836778","bundle_checksum":"37a524c7a165a77b0ae0446fb161c991321f64b65b411f787d365524dd4dcc88","metadata":{"runtime":{"entrypoint":"arch-diagram.html"}},"files":[{"path":"arch-diagram.html","name":"arch-diagram.html","mime_type":"text/html","checksum":"e4e8c4723467c23123ad6b9470111f7d30130077fbc1d4671bc8f5572ea1514e"}]},"files":{"SKILL.md":"# SVG Architecture Diagram\n\n> **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.\n\n---\n\n## How to Use\n\n1. **Drag nodes** — click and drag any service box to reposition it\n2. **Double-click a node** — rename it inline\n3. **Add Node button** — cycles through Client, Service, Database, Cache, External types\n4. **Export SVG** — downloads the current diagram as `architecture.svg`\n\n---\n\n## Node Types\n\n| Type | Color | Use For |\n|------|-------|---------|\n| Client | Blue | Browser, mobile app, CLI |\n| Service | Purple | API servers, microservices |\n| Database | Green | PostgreSQL, MySQL, SQLite |\n| Cache | Amber | Redis, Memcached, CDN |\n| External | Red | Third-party APIs, Stripe, AWS |\n\n---\n\n## Connections\n\nEdges are drawn automatically based on a predefined connection list. The edge labels show the protocol (HTTPS, REST, SQL, etc.).\n\n---\n\n## Export Format\n\nThe exported SVG is self-contained and renders cleanly in browsers, Figma, Notion, and GitHub READMEs.\n","arch-diagram.html":"\n\n\n\n\nSystem Architecture Diagram\n\n\n\n\n