architecture-diagramlisted

# 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. ## When NOT to Before the design has stabilized — don't draw boxes that aren't yet justified (that's failure mode #7). A quick ASCII sketch in the conversation is fine for early thinking; render with this skill once the components have earned their place. ## How to build a diagram 1. **Gather the spec** from the design: the list of components (each with a type), the directed connections (with protocol/label), and any region/boundary