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 |

Genere diagramas de arquitectura en capas detallados como artefactos HTML autónomos con íconos SVG en línea, diseño de contenedor anidado CSS Grid, superposiciones de conexión de ruta SVG y leyendas de conexión codificadas por colores. Úselo cuando el usuario solicite crear diagramas de arquitectura, diagramas de infraestructura, diagramas de topología del sistema, diagramas de red, imágenes de arquitectura de nube, diagramas de implementación, diagramas de flujo de integración o cualquier solicitud que implique representación visual de los componentes del sistema, su jerarquía de contención e interconexiones. Se activa en términos como "diagrama de arquitectura", "diagrama de infraestructura", "diagrama de sistema", "topología", "diagrama de implementación", "diagrama de red", "arquitectura de integración" o cuando el usuario proporciona una descripción del sistema y solicita un diagrama/visual. Fuente: mathews-tom/praxis-skills.