Architecture Diagram

--- name: Architecture Diagram slug: architecture-diagram category: DevOps description: Generates dark-themed SVG architecture, cloud, or infrastructure diagrams as standalone HTML files. Ideal for system architectures, microservices, and deployment visualizations without dependencies. github: "https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/architecture-diagram" language: Python stars: 185 forks: 8 install: "npx degit https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/architecture-diagram ~/.claude/skills/architecture-diagram" installs_to: ~/.claude/skills/architecture-diagram source_path: poirot/backend/agents/skill/builtin_skills/creative/architecture-diagram/SKILL.md collection_size: 37 category_size: 798 collection_url: "https://dirskills.com/collections/HezaoHezao/poirot" added: 2026-08-11T07:20:43.546Z last_synced: 2026-08-11T07:20:43.546Z canonical_url: "https://dirskills.com/skills/architecture-diagram" --- # Architecture Diagram Generates dark-themed SVG architecture, cloud, or infrastructure diagrams as standalone HTML files. Ideal for system architectures, microservices, and deployment visualizations without dependencies. **Install:** ```bash npx degit https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/architecture-diagram ~/.claude/skills/architecture-diagram ``` ## README # Architecture Diagram ## Overview Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser. ## Scope **Best suited for:** - Software system architecture (frontend / backend / database layers) - Cloud infrastructure (VPC, regions, subnets, managed services) - Microservice / service-mesh topology - Database + API map, deployment diagrams - Anything with a tech-infra subject that fits a dark, grid-backed aesthetic **Look elsewhere first for:** - Physics, chemistry, math, biology → use `concept-diagrams` - Floor plans, educational visuals → use `concept-diagrams` - Hand-drawn sketches → use excalidraw ## Workflow 1. User describes their system architecture (components, connections, technologies) 2. Generate the HTML file following the design system below 3. Save with `write_file` to a `.html` file 4. User opens in any browser — works offline, no dependencies ``` write_file("architecture.html", "") ``` ### Output Location ```bash # Default to current working directory ./[project-name]-architecture.html ``` ## Design System ### Aesthetic - **Dark background**: deep navy or black (#0a0a1a, #111) - **Grid pattern**: subtle dot or line grid in background - **Neon accents**: luminous colors for different component types - **Monospace labels**: for technical authenticity - **Rounded corners**: on boxes (rx=6) - **Glow effects**: subtle box-shadow on key components ### Color Palette ```css :root { --bg: #0a0a1a; --grid: #1a1a2e; /* Component types */ --c-frontend: #00D9FF; /* cyan */ --c-backend: #50C878; /* green */ --c-database: #F5A623; /* orange */ --c-external: #C4A7E7; /* purple */ --c-queue: #FF6B6B; /* red */ --c-cache: #FFD700; /* gold */ --text: #E0E0E0; --text-dim: #888; --border: #333; } ``` ### SVG Template ```html Architecture Diagram ``` ## Diagram Patterns ### Layered Architecture - Frontend (top) → Backend (middle) → Database (bottom) - Horizontal layers with vertical connections ### Microservice Topology - Central API gateway + surrounding services - Bidirectional connections for sync, one-way for async ### Cloud Infrastructure - VPC as a large container box - Subnets as inner boxes - Managed services as icons (S3, Lambda, RDS) ### Data Flow - Left-to-right flow - Different line styles for sync (solid) vs async (dashed) ## Pitfalls - **Too many components**: keep to 5-10 boxes max. More = unreadable. Split into multiple diagrams if needed. - **Crossing lines**: route connections to minimize crossings. Use right-angle paths. - **No legend**: if using color-coded component types, include a legend. - **Font sizing**: labels must be readable. 13px minimum for component names.