draw architecture diagram

---

name: dark-architecture-diagram description: Create professional, dark-themed SVG architecture diagrams as standalone HTML files matching a specific design system with precise color tokens, typography, and component patterns. Use when the user asks for system architecture diagrams, infrastructure diagrams, technical diagrams showing system components, layer diagrams, or any diagram that should use the dark "cyberpunk-engineering" aesthetic with colored layer boundaries, numbered step circles, and card-based component layouts. Also use when the user says "用全景图风格", "暗色架构图", "dark architecture", or references this diagram style.

---

Dark Architecture Diagram

Create standalone HTML files containing SVG architecture diagrams in a dark, technical aesthetic. The style is "cyberpunk-engineering" — dark slate backgrounds, colored layer boundaries, monospace typography, and glowing accents. Every diagram produced with this skill should look like it belongs in the same design system.

When to Use

This skill applies when creating technical architecture diagrams that need:

Multi-layer system visualization (e.g., presentation → logic → data)

Component relationship mapping with flow arrows

Numbered execution step sequences

Dark theme with high contrast and color-coded layers

Core Design Philosophy

The design language communicates hierarchy through color temperature and opacity rather than size alone. Each architectural layer gets a unique hue. Cards within layers use the layer's color at low opacity for fills and full saturation for strokes. Text hierarchy is maintained through a strict 5-level grayscale system. The overall feeling should be "a well-lit control room at night" — dark but highly readable.

File Structure

Always produce a single standalone HTML file with embedded

Design Token Summary

Read references/design-tokens.md for the complete token specification. Key tokens:

| Token | Value | Usage | |-------|-------|-------| | Background | #020617 | Page and SVG background | | Card Fill | #0f172a | All card/box backgrounds | | Grid/Border | #1e293b | Subtle grid lines, card borders | | Text L1 (title) | #f8fafc | Main titles only | | Text L2 (heading) | #e2e8f0 | Section headings, step labels | | Text L3 (body) | #94a3b8 | Body text, descriptions | | Text L4 (muted) | #64748b | Secondary info, captions | | Text L5 (ghost) | #475569 | Footnotes, de-emphasized |

Layer Color System

Each architectural layer is assigned a dedicated hue. When creating a new diagram, map your layers to these colors in order of visual priority:

| Role | Color | Hex | Typical Use | |------|-------|-----|-------------| | Product/Presentation | Pink | #f472b6 | Top-level user-facing layer | | Channel/Access | Cyan | #22d3ee | Entry points, routing | | Orchestrator/Core | Orange | #fb923c | Central coordination | | Domain/Service | Purple | #a78bfa | Business domain modules | | Capability/Tools | Green | #34d399 | Infrastructure capabilities | | Memory/State | Yellow | #fbbf24 | State, caching, memory | | Platform/Cross-cut | Rose | #fb7185 | Cross-cutting concerns | | Safety/Security | Red | #ef4444 | Security boundaries | | Steps/Flow | Sky Blue | #0ea5e9 | Numbered execution steps | | Gateway | Light Blue | #38bdf8 | API gateways, auth |

Component Patterns

Read references/component-patterns.md for the full component library. Key patterns:

Layer Boundary

{emoji} {Layer Name}
{description}

Card Component

{emoji} {Title}
{description}
{metadata}

Numbered Step Circle

{N}
{Step Name}

Flow Arrows

LLM Execution Zone (Dashed Boundary)

Typography Rules

Font stack: 'JetBrains Mono', 'PingFang SC', monospace

Title (page header): 22px, weight 700, color #f8fafc

Layer label: 11px, weight 700, layer color

Card title: 10-11px, weight 600, layer color

Body text: 8-9px, weight 400, #94a3b8

Caption/metadata: 7-8px, weight 400, #64748b

Ghost text: 6-7px, weight 400-600, #475569

SVG Conventions

viewBox: Use a large viewBox (e.g., 0 0 1420 1400) for detail; the SVG scales responsively via width: 100%; height: auto

Grid pattern: 40×40 grid with #1e293b stroke at 0.5 opacity

Border radius: rx="12" for layer boundaries, rx="8" for cards, rx="6" for small items, rx="4" for tags/chips

Arrow markers: Define in — neutral (#64748b), orange, cyan variants

Gradients: Use linearGradient for special zones (orchestrator, LLM domain) — always subtle (0.02–0.15 opacity)

Stroke patterns: solid for primary boundaries, stroke-dasharray="6,3" for LLM zones, stroke-dasharray="4,3" for placeholder/expandable areas

Spacing: 15-25px between layers, 10-15px between cards within a layer

L-shape routing: Route arrows with right-angle bends to avoid crossing content — never diagonal through other components

Summary Cards (Below Diagram)

Include a grid of summary cards below the SVG for key architectural decisions:

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 18px 20px; }

Each card has a colored dot matching its layer, a title, and bullet points.

Header Pattern

Always include a header with a pulsing cyan dot and subtitle:

.header h1::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  animation: pulse 2s infinite;
}

Checklist

Before finalizing any diagram, verify:

[ ] Background is #020617, not black or dark gray

[ ] All cards use #0f172a fill with colored overlay

[ ] Text hierarchy follows the 5-level system

[ ] Each layer has a unique color from the palette

[ ] Numbered steps use #0ea5e9 filled circles with white text

[ ] Arrows use L-shape routing, no diagonal crossing

[ ] Font is JetBrains Mono + PingFang SC

[ ] Grid pattern is defined and applied to background rect

[ ] All rx values follow the size convention (12/8/6/4)

[ ] Footer text uses #475569 at 10px