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 |

Genera diagrammi dettagliati di architettura a più livelli come artefatti HTML autonomi con icone SVG in linea, layout del contenitore nidificato a griglia CSS, sovrapposizioni di connessione del percorso SVG e legende di connessione codificate a colori. Da utilizzare quando l'utente richiede di creare diagrammi di architettura, diagrammi di infrastruttura, diagrammi di topologia di sistema, diagrammi di rete, elementi visivi dell'architettura cloud, diagrammi di distribuzione, diagrammi di flusso di integrazione o qualsiasi richiesta che coinvolga la rappresentazione visiva dei componenti del sistema, la loro gerarchia di contenimento e le interconnessioni. Si attiva su termini come "diagramma dell'architettura", "diagramma infra", "diagramma di sistema", "topologia", "diagramma di distribuzione", "diagramma di rete", "architettura di integrazione" o quando l'utente fornisce una descrizione del sistema e richiede un oggetto visivo/diagramma. Fonte: mathews-tom/praxis-skills.