architecture-diagram

# 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 ## Node construction Every node must have: - Unique `data-node-id` (semantic: `fusion-hcm`, `edi-adaptor`, not `node-7`) - `.node-icon` with inline SVG from the icon registry (or custom-generated following registry c...