Диаграммы архитектуры систем в HTML и SVG

★ 7.7 · design

architecture-diagram is a Claude Code skill that generates professional system architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling. It applies a strict design system: a dark #020617 background, JetBrains Mono typography, and a semantic color palette covering seven component types — frontend, backend, database, AWS/Cloud, security, message bus, and external. The skill handles cloud infrastructure, network topology, Kubernetes clusters, microservices, security groups, and region boundaries, with precise spacing rules and SVG draw-order logic to prevent overlaps. A ready-to-customize assets/template.html with a 1000×680 viewBox is included, along with patterns for component boxes, arrows, legends, and summary cards. Ideal for engineering teams and architects who need to document and visually communicate technical infrastructure.