What problem does it solve? Creating clear, consistent technical architecture diagrams usually requires external diagramming tools, licenses, or rendering services. This Skill produces professional system, cloud, and infrastructure diagrams as standalone 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 a consistent dark-themed palette with defined fills and strokes. - Complete Layout Rules: Provides spacing, z-order, arrow, boundary, and legend placement conventions so diagrams render cleanly without overlapping elements. - Reusable HTML Template: Ships a working template with examples of every component type, arrow style, security group, region boundary, and legend for direct adaptation. - Use Case: Describe your microservice topology (API gateway, services, Postgres, Redis, message queue) and receive a single self-contained HTML file you can open in any browser or attach to documentation. ## Quick Start Ask the agent to generate an architecture diagram of your system describing its components and connections, and save it as an HTML file in your workspace.
