architecture-diagram

What problem does it solve?

Creating clear, professional architecture diagrams is time-consuming and error-prone when done manually; this Skill converts structured component lists, containment hierarchies, and connection semantics into polished, shareable visual artifacts so teams can quickly reason about system topology and data flows.

Core Features & Use Cases

• Standalone HTML output: Produces self-contained HTML files with inline SVG icons, CSS Grid layout, and an embedded JS connection renderer so diagrams can be opened or exported without external dependencies.
• Semantic connections & legends: Supports realtime, batch, event, control, and default connection types with color-coded lines, arrowhead markers, labels, orthogonal routing, and corridor-based lane allocation to avoid overlaps.
• Zone & layout patterns: Builds nested zone hierarchies (Region → VPC → Subnet, three-column integration, hub-and-spoke) with explicit grid-template-columns, zone depth styling, and provider theming (AWS/Azure/GCP/OCI/Generic).
• Icon registry & fallbacks: Uses a catalog of inline SVG icons and deterministic rules for creating matching fallback icons when a requested symbol is missing.
• Error handling & exports: Includes guidance for missing template assets, Playwright rendering caveats, and actionable fixes for routing or icon failures.

Quick Start

Generate a self-contained HTML architecture diagram for API Gateway, User Service, Order Service, PostgreSQL, and Redis and save the result as an HTML file.