architecture-diagramlisted

# Architecture Diagram — Self-Contained HTML+SVG Diagrams Create professional technical architecture diagrams as **single self-contained HTML files** with inline SVG graphics and CSS styling. The output renders correctly when opened directly in any modern browser — no build step, no JavaScript framework, no external images. ## When to use - System, infrastructure, cloud, security, or network-topology diagrams. - A shareable, presentation-ready visual artifact is the deliverable. - Dark-theme technical aesthetic is desired. For methodology (what to draw at each level), pair with `architecture/c4-model`; for lightweight in-repo text diagrams, use `tooling/mermaid`. This skill covers the **rendered artifact** case. ## Workflow 1. Copy `resources/template.html` as the starting point. 2. Customize the `<title>`, header text, and footer metadata. 3. Adjust the SVG `viewBox` if needed (default `1000 x 680`). 4. Add/reposition component boxes using the component pattern below. 5. Draw connection arrows early in the SVG (after the background grid) so they render behind boxes. 6. Update the three summary cards and legend. 7. Deliver one `.html` file. ## Design system ### Semantic color palette | Component type | Fill (rgba) | Stroke | |----------------|-------------|--------| | Frontend | `rgba(8, 51, 68, 0.4)` | `#22d3ee` | | Backend | `rgba(6, 78, 59, 0.4)` | `#34d399` | | Database | `rgba(76, 29, 149, 0.4)` | `#a78bfa` | | AWS/Cloud | `rgba(120, 53, 15, 0.3)` | `#fbbf24`