architecture-diagram

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.

When the user doesn't specify flow semantics, default all connections to default type and omit the legend.

| assets/template.html missing | File deleted or skill directory incomplete | Regenerate from skill defaults: reconstruct the CSS/JS skeleton using the structure documented in this SKILL.md and the reference files |

Generate detailed layered architecture diagrams as self-contained HTML artifacts with inline SVG icons, CSS Grid nested container layout, SVG path connection overlays, and color-coded connection legends. Use when the user asks to create architecture diagrams, infrastructure diagrams, system topology diagrams, network diagrams, cloud architecture visuals, deployment diagrams, integration flow diagrams, or any request involving visual representation of system components, their containment hierarchy, and interconnections. Triggers on terms like "architecture diagram", "infra diagram", "system diagram", "topology", "deployment diagram", "network diagram", "integration architecture", or when the user provides a system description and asks for a visual/diagram. Source: mathews-tom/praxis-skills.