architecture-diagram

architecture-diagram is a design-system skill for producing polished, dark-themed technical architecture diagrams as self-contained HTML files with inline SVG and CSS. It solves the problem of hand-drawing consistent system, infrastructure, cloud, security, or network topology diagrams by encoding a complete visual language: a semantic color palette per component type (frontend, backend, database, cloud, security, message bus, external), JetBrains Mono typography, a slate background with a subtle grid, and conventions for arrows, security groups, region boundaries, and event buses.

The skill provides precise layout rules to avoid common rendering problems: minimum vertical gaps to prevent overlaps, z-ordering so arrows render behind boxes, an opaque-mask technique so arrows do not bleed through semi-transparent fills, and legend placement outside boundary boxes with viewBox expansion. Generated diagrams ship with a built-in export toolbar offering copy-to-clipboard, high-DPI PNG download, and PDF export via html2canvas and jsPDF. Those two libraries are loaded from a pinned jsDelivr CDN with Subresource Integrity hashes and crossorigin set, and the skill explicitly instructs not to alter the SRI hashes so generated output stays tamper-resistant against CDN compromise.

It targets engineers, architects, and technical writers who need repeatable, presentation-quality diagrams without a dedicated diagramming tool. The output is static HTML/SVG rendered locally in a browser; the only network dependency is the two integrity-pinned CDN scripts used for image and PDF export, and the clipboard export requires a user gesture and a secure context.