# Architecture Diagram > Generate dark-themed SVG architecture diagrams as self-contained HTML. - Skill: `furkangonel/architecture-diagram` (Agent Skill) - Install (CLI): `npx skillmds@latest add furkangonel/architecture-diagram` - Raw SKILL.md: https://api.skillmd.com/api/skills/furkangonel/architecture-diagram/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: furkangonel (https://skillmd.com/u/furkangonel) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/furkangonel/architecture-diagram --- # Architecture Diagram SOP ## When to Use - User wants to visualize system architecture, microservices, cloud infrastructure - User asks for a data flow diagram, sequence diagram, or ERD - User says "draw", "diagram", "visualize", "architecture chart", "system map" --- ## Color Palette (Dark Theme) | Node Type | Fill | Stroke | Label Color | |----------------|-----------|-----------|-------------| | Service / API | `#1e3a5f` | `#4a9eff` | `#a8d4ff` | | Database | `#1a3d2b` | `#4caf50` | `#a8e6b0` | | Queue / Broker | `#3d2a00` | `#ff9800` | `#ffd180` | | External / SaaS| `#2d1f3d` | `#9c27b0` | `#ce93d8` | | User / Client | `#2a2a2a` | `#9e9e9e` | `#e0e0e0` | | Load Balancer | `#1f2d3d` | `#00bcd4` | `#80deea` | Background: `#0d0d1a` Arrow color: `#555577` Font family: `'Inter', 'Segoe UI', sans-serif` --- ## SVG Structure Template Produce a **self-contained HTML file** (or inline SVG) with this skeleton: ```html ``` --- ## Worked Example — 3-Tier Web App ```svg Browser React SPA Load Balancer nginx · SSL termination API Service FastAPI · x3 replicas PostgreSQL Primary · RDS Redis Queue BullMQ · jobs ``` --- ## Best Practices ### Layout - Left-to-right data flow is most readable - Group related services with a subtle `` background (fill opacity 0.05) - Maintain ~80px vertical gap and ~60px horizontal gap between nodes - Add a subtitle under the main title: deployment env (prod/staging) and date ### Labels - Line 1: Component name — bold, larger font (11–13px) - Line 2: Tech stack / port / replica count — lighter, smaller font (9–10px) - Arrow labels: use `` midpoint with small font (8–9px), fill `#666688` ### Arrows - Use straight `` for simple left→right flows - Use `` with cubic bezier for non-orthogonal connections - Bidirectional: add `marker-start` and `marker-end` - Label arrows when the relationship isn't obvious (e.g., "async", "REST", "gRPC") ### Grouping with Zones ```svg AWS VPC · us-east-1 ``` --- ## Agent Instructions 1. Ask clarifying questions if the architecture is ambiguous: "What services connect to what?" 2. Infer node types from names: "Postgres" → database, "Kafka" → queue, "Stripe" → external 3. Always output a complete, copy-pasteable HTML file — not a fragment 4. Default canvas: 900×600 for medium complexity; scale up to 1200×800 for large systems 5. After rendering, briefly describe the data flow in 2–3 sentences 6. Offer to add missing components (caching, CDN, monitoring) if the design seems incomplete