What problem does it solve? Creating professional-looking technical architecture diagrams usually requires dedicated diagramming tools, accounts, or rendering libraries. This Skill produces polished, dark-themed architecture and cloud infrastructure diagrams as single self-contained HTML files with inline SVG, requiring no external tools, API keys, or JavaScript. ## Core Features & Use Cases - Semantic Color System: Predefined fill and stroke palettes categorize components by type (frontend, backend, database, cloud, security, message bus, external) for instantly readable diagrams. - Complete Design System: Includes typography rules, grid backgrounds, arrow styles, security group boundaries, region containers, and legend placement logic. - Ready-to-Use Template: Ships with a full HTML template containing working examples of every component type, arrow style, and boundary pattern. - Use Case: Describe your system (e.g., React frontend, FastAPI backend, PostgreSQL database on AWS) and receive a single .html file you can open in any browser, share with teammates, or embed in documentation. ## Quick Start Ask the AI to generate an architecture diagram of your system as an HTML file, describing your components, their connections, and the technologies used.
