Architecture Diagram Generator

The Architecture Diagram Generator lets you create structured HTML architecture diagrams directly in Markdown without code blocks. It supports flexible layouts—single column for simple architectures, three-column for complex systems with monitoring and security concerns—organized by semantic layers including User, Application, AI/Logic, Data, and Infrastructure. The tool provides 12 pre-built color styles (Steel Blue, Ember Warm, Neon Dark, and others) matched to different project types, from enterprise banking to startup SaaS. It handles grid-based component layouts, layer-based organization with consistent color semantics, and advanced patterns like pipelines, sidebars, and connectors. Developers and architects use it to document technology stacks, microservices topology, multi-tier applications, CI/CD flows, and system overviews.

Install the skill using the command below and follow the critical rules for diagram creation.