architecture-diagramlisted

Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, or any technical diagram showing system components and their relationships.
aiskillstore/marketplace · ★ 329 · DevOps & Infrastructure · score 82

Install: claude install-skill aiskillstore/marketplace

# Architecture Diagram Skill Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling. ## Design System ### Color Palette Use these semantic colors for component types: | Component Type | Fill (rgba) | Stroke | |---------------|-------------|--------| | Frontend | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) | | Backend | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) | | Database | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) | | AWS/Cloud | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) | | Security | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) | | Message Bus | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) | | External/Generic | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) | ### Typography Use JetBrains Mono for all text (monospace, technical aesthetic): ```html <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> ``` Font sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels. ### Visual Elements **Background:** `#020617` (slate-950) with subtle grid pattern: ```svg <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"> <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/> </pattern> ``` **Component boxes:** Rounded rectangles (`rx="6"`) with 1.5px stroke, semi-transparent fills. **Security groups:** Dashed stroke (`stroke-dash