What problem does it solve? Creating polished technical architecture diagrams usually requires dedicated diagramming tools, accounts, or rendering libraries. This Skill produces professional dark-themed system 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: Maps component types (frontend, backend, database, cloud, security, message bus, external) to consistent rgba fills and hex strokes for instant visual categorization. - Complete Design System: Provides typography rules, grid backgrounds, arrow styles, security group and region boundaries, spacing logic, and legend placement guidelines. - Ready-to-Use Template: Ships a full HTML template with working examples of every component type, arrow style, and boundary pattern. - Use Case: Describe your microservice deployment (React frontend, FastAPI backend, PostgreSQL, AWS S3 and CloudFront) and receive a single .html file you can open in any browser or share with your team. ## Quick Start Ask the agent to generate an architecture diagram of your system, describing the components, connections, and technologies, and save it as an HTML file.
