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 |

Generieren Sie detaillierte geschichtete Architekturdiagramme als eigenständige HTML-Artefakte mit Inline-SVG-Symbolen, verschachteltem CSS-Raster-Containerlayout, SVG-Pfadverbindungsüberlagerungen und farbcodierten Verbindungslegenden. Verwenden Sie diese Option, wenn der Benutzer Architekturdiagramme, Infrastrukturdiagramme, Systemtopologiediagramme, Netzwerkdiagramme, visuelle Darstellungen der Cloud-Architektur, Bereitstellungsdiagramme, Integrationsflussdiagramme oder eine andere Anforderung zur visuellen Darstellung von Systemkomponenten, ihrer Einschlusshierarchie und Verbindungen erstellen möchte. Wird bei Begriffen wie „Architekturdiagramm“, „Infradiagramm“, „Systemdiagramm“, „Topologie“, „Bereitstellungsdiagramm“, „Netzwerkdiagramm“, „Integrationsarchitektur“ ausgelöst oder wenn der Benutzer eine Systembeschreibung bereitstellt und nach einem Bild/Diagramm fragt. Quelle: mathews-tom/praxis-skills.