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 |

Générez des diagrammes d'architecture en couches détaillés sous forme d'artefacts HTML autonomes avec des icônes SVG en ligne, une disposition de conteneurs imbriqués en grille CSS, des superpositions de connexion de chemin SVG et des légendes de connexion à code couleur. À utiliser lorsque l'utilisateur demande à créer des diagrammes d'architecture, des diagrammes d'infrastructure, des diagrammes de topologie de système, des diagrammes de réseau, des visuels d'architecture cloud, des diagrammes de déploiement, des diagrammes de flux d'intégration ou toute demande impliquant une représentation visuelle des composants du système, leur hiérarchie de confinement et leurs interconnexions. Se déclenche sur des termes tels que « diagramme d'architecture », « diagramme infra », « diagramme système », « topologie », « diagramme de déploiement », « diagramme de réseau », « architecture d'intégration » ou lorsque l'utilisateur fournit une description du système et demande un visuel/un diagramme. Source : mathews-tom/praxis-skills.