# Architecture Diagram

> 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.

- Skill: `agentera/architecture-diagram` (Agent Skill)
- Install (CLI): `npx skillmds@latest add agentera/architecture-diagram`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agentera/architecture-diagram/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: agentera (https://skillmd.com/u/agentera)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agentera/architecture-diagram

---


# 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.