Architecture Diagram

Turn a stabilized design — a list of components and the connections between them — into a polished, self-contained HTML + SVG diagram. Components are boxes, arrows are communication/data flow, dashed boundaries are regions or trust zones. This is the diagramming engine for the whole plugin; the orchestrator and building blocks hand off here when it's time to draw.

Self-contained by design: one HTML file with inline SVG and CSS, a system monospace font (no web-font fetch), and no dependency to render — it draws fully offline. The only external calls are two pinned, SRI-protected CDN scripts that power the optional PNG/PDF export; remove them and the diagram still renders — only the export buttons are lost.

When to reach for this

At step 3 (high-level design) and step 6 (deep-dive) of the reasoning loop, and any time a design is clear enough to draw: the component list and their connections are known. Also for failure-path diagrams (step 5) — showing a degradation flow is part of the design.