Architecture Diagram Generator

Produces self-contained .html files: inline SVG icons, CSS Grid nested zones, JS-driven SVG connection overlay with color-coded semantic line types and arrowhead markers. Zero external dependencies.

Workflow

1. Parse user input → extract: components (with descriptions), containment hierarchy (zones/nesting), connections (with semantic types), and any provider context
2. Read references/icons.md — select or create icons for each component
3. Read references/layout-patterns.md — choose topology pattern, set grid-template-columns
4. Read references/connections.md — define connection array with types, side-forcing, routing
5. Start from assets/template.html — use its CSS/JS structure as the base
6. Assemble the HTML:
   • Set {{DIAGRAM_TITLE}}, {{BG_COLOR}}, {{MAX_WIDTH}}
   • Populate {{LEGEND_ITEMS}} — one entry per connection type used
   • Build zone hierarchy as nested div.zone > span.zone-label + div.zone-content
   • Place nodes with data-node-id, each containing: .node-icon (inline SVG), .node-title, .node-desc
   • Populate the connections JS array
   • Apply provider theming if applicable
7. Output final .html to the working directory or user-specified path