architecture-diagramlisted

# Architecture Diagram Skill 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, or other scientific subjects - Physical objects (vehicles, hardware, anatomy, cross-sections) - Floor plans, narrative journeys, educational / textbook-style visuals - Hand-drawn whiteboard sketches (consider `excalidraw`) - Animated explainers (consider an animation skill) If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below. Based on [Cocoon AI's architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator) (MIT). ## 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 (e.g. `~/architecture-diagram.html`