draw architecture diagram

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.

三水清@ksky521

Install

openclaw skills install @ksky521/dark-architecture-diagram

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 <style> and inline SVG. No external dependencies except the Google Fonts link for JetBrains Mono. The SVG uses a viewBox for responsive scaling.

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Diagram Title]</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* See references/design-tokens.md for full token list */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'JetBrains Mono', 'PingFang SC', monospace;
  background: #020617;
  color: #e2e8f0;
  min-height: 100vh;
}
</style>
</head>
<body>
<!-- Header, SVG diagram, optional summary cards, footer -->
</body>
</html>

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

svg

<rect x="40" y="30" width="1120" height="130" rx="12" fill="none" stroke="{layer-color}" stroke-width="1.5" stroke-opacity="0.3"/>
<rect x="40" y="30" width="1120" height="130" rx="12" fill="rgba({layer-rgb},0.08)"/>
<text x="60" y="55" fill="{layer-color}" font-size="11" font-weight="700">{emoji} {Layer Name}</text>
<text x="{offset}" y="55" fill="#64748b" font-size="9">{description}</text>

Card Component

svg

<rect x="60" y="70" width="160" height="72" rx="8" fill="#0f172a"/>
<rect x="60" y="70" width="160" height="72" rx="8" fill="rgba({layer-rgb},0.3)" stroke="{layer-color}" stroke-width="1"/>
<text ... fill="{layer-color}" font-size="11" font-weight="600">{emoji} {Title}</text>
<text ... fill="#94a3b8" font-size="8">{description}</text>
<text ... fill="#64748b" font-size="7">{metadata}</text>

Numbered Step Circle

svg

<circle cx="100" cy="380" r="14" fill="#0ea5e9" stroke="none"/>
<text x="100" y="384" fill="#fff" font-size="10" font-weight="700" text-anchor="middle">{N}</text>
<text x="100" y="405" fill="#e2e8f0" font-size="9" font-weight="600" text-anchor="middle">{Step Name}</text>

Flow Arrows

svg

<!-- Standard arrow -->
<line x1="..." y1="..." x2="..." y2="..." stroke="#64748b" stroke-width="1" marker-end="url(#arrowhead)"/>

<!-- Colored semantic arrow -->
<line ... stroke="#a78bfa" stroke-width="1.2" marker-end="url(#arrowhead)"/>

<!-- Dashed async/optional arrow -->
<line ... stroke="#fbbf24" stroke-width="1" stroke-dasharray="3,2" marker-end="url(#arrowhead)"/>

LLM Execution Zone (Dashed Boundary)

svg

<rect ... rx="10" fill="url(#llmGrad)" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="6,3" stroke-opacity="0.6"/>

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 <defs> — 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:

css

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

css

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

Checklist

Before finalizing any diagram, verify: