---

name: architecture-diagram description: >- Create a professional, dark-themed software/system architecture diagram as a single self-contained HTML file with inline SVG. Use when asked to visualize system components, layers, services, or how parts of a codebase fit together. keywords: [architecture diagram, system design, svg, html, components, layers]

Architecture Diagram

Produce ONE self-contained HTML document (embedded CSS + inline SVG, no JavaScript, no external images; Google Fonts link is allowed). It must render correctly when opened directly in a browser.

Visual design system

• Background #020617 with a subtle 40px grid pattern.
• Font: JetBrains Mono (monospace) via Google Fonts.
• Component boxes: rounded rects (rx="6"), 1.5px stroke, semi-transparent fills. Colour components by role:
  • facade / developer surface: fill rgba(8,51,68,0.4), stroke #22d3ee
  • core contracts: fill rgba(6,78,59,0.4), stroke #34d399
  • plugins / providers: fill rgba(120,53,15,0.3), stroke #fbbf24
  • execution environment / capabilities: fill rgba(76,29,149,0.4), stroke #a78bfa
  • observation / event bus: fill rgba(251,146,60,0.3), stroke #fb923c
  • external / generic: fill rgba(30,41,59,0.5), stroke #94a3b8
• Component name at 11px white bold; sublabel at 8-9px #94a3b8.
• Arrows via an SVG marker arrowhead; draw connecting arrows before boxes so they sit behind them.

Layout rules

• Lay the system out as labelled horizontal bands stacked top-to-bottom, one band per architectural layer, with each layer's components inside its band.
• Keep ≥40px vertical gaps between stacked rows; never overlap boxes.
• Add a short header (title + subtitle) and a small legend mapping each colour to a layer. Place the legend outside every band.

Output

Return the complete HTML document as a single string. Do not include commentary outside the HTML.