Architecture Diagram Generation Skill

Create professional technical architecture diagrams, output as standalone HTML files containing inline SVG graphics and CSS styles.

Trigger Conditions

Proactively use this skill when users mention any of the following scenarios:

"Draw an architecture diagram" / "Generate an architecture diagram" / "Draw a diagram"
"System architecture" / "Deployment architecture" / "Technical architecture"
"Draw a flowchart" / "Component relationship diagram" / "Topology diagram"
"infrastructure diagram" / "architecture diagram"
Users paste code and request architecture analysis
Users describe system components and their relationships

Workflow

Step 1: Collect Information

If users do not provide a complete architecture description, proactively ask for the following information:

What main components/services does the system include?
Connection relationships and data flow between components?
Which tech stacks and cloud services are used?
Are there security groups, network partitions, or other boundaries?

If users provide code repositories or project files, analyze and extract architecture information automatically.

Step 2: Generate Architecture Diagram

Generate HTML files using this skill's design specifications and templates based on the collected information.

Step 3: Output Results

Output a complete

.html

file that can be directly opened in a browser.

Design System

Theme System

Architecture diagrams support Dark and Light two themes, with one-click switching via the toggle button on the right side of the header. User preferences are saved to localStorage and automatically restored on next opening.

Implementation: CSS custom properties +

data-theme

attribute switching. SVG elements adapt to themes via CSS classes (

text-primary

text-secondary

mask-bg

grid-line

arrowhead-color

Key Principles:

Component stroke colors (cyan/green/purple/amber/rose/Orange) remain unchanged in both themes to ensure visual consistency
Only switch basic colors such as background, text, grid, and borders
Use CSS
```
transition
```
to achieve smooth switching animations

Dark Theme (Default)

Combines Cursor's warm dark background + Claude's warm white text. Warm and not cold,告别冷蓝色 slate.

Element	Color
Page Background	`#141413` (Warm near-black)
Card Background	`rgba(20, 20, 19, 0.5)`
Mask Background	`#1a1a18` (Warm dark)
Border	`rgba(38, 37, 30, 0.2)` (oklab warm border)
Primary Text	`#faf9f5` (Ivory warm white)
Secondary Text	`#b0aea5` (Warm silver)
Grid Line	`rgba(38, 37, 30, 0.12)`
Arrowhead	`rgba(38, 37, 30, 0.45)`

Light Theme

Combines Claude's parchment

#f5f4ed

+ Airtable's dark navy text.

Element	Color
Page Background	`#f5f4ed` (Parchment)
Card Background	`rgba(250, 249, 245, 0.85)`
Mask Background	`#faf9f5` (Ivory)
Border	`#f0eee6` (Warm cream)
Primary Text	`#141413` (Warm near-black)
Secondary Text	`#5e5d59` (Olive gray)
Grid Line	`#f0eee6` (Warm cream)
Arrowhead	`#87867f` (Lime gray)

Component Color Scheme

Use semantic colors by component type:

Component Type	Fill Color (rgba)	Stroke Color	Typical Use Cases
Frontend	`rgba(20, 50, 62, 0.4)`	`#22d3ee` (Cyan)	Client applications, UI, browsers
Backend	`rgba(18, 72, 55, 0.4)`	`#34d399` (Emerald green)	Servers, APIs, microservices
Database	`rgba(72, 30, 100, 0.4)`	`#a78bfa` (Purple)	Databases, storage, caching
Cloud Services	`rgba(110, 50, 18, 0.35)`	`#fbbf24` (Amber)	AWS/AliCloud/Tencent Cloud services
Security Components	`rgba(130, 25, 50, 0.4)`	`#fb7185` (Rose red)	Authentication, security groups, encryption
Message Queue	`rgba(251, 146, 60, 0.3)`	`#fb923c` (Orange)	Kafka, RabbitMQ, event buses
External/General	`rgba(38, 37, 30, 0.35)`	`#94a3b8` (Slate gray)	External systems, third-party services
AI/Intelligent	`rgba(80, 30, 120, 0.4)`	`#c084fc` (Bright purple)	AI services, LLM, models

Font Specifications

All text uses JetBrains Mono monospaced font (technical style):

html

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">

Typesetting specifications (refer to Cursor's compact spacing + Claude's loose line height):

Title:
```
letter-spacing: -0.02em
```
,
```
line-height: 1.6
```
Subtitle:
```
letter-spacing: 0.04em
```
Font sizes: 12px for component names, 9px for sub-labels, 8px for comment text, 7px for tiny labels

Visual Elements

Background: Dark mode

#141413

(Warm near-black) / Light mode

#f5f4ed

(Parchment), with subtle grid texture:

svg

<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" class="grid-line" stroke-width="0.5"/>
</pattern>

Component Boxes: Rounded rectangles (

rx="8"

), 1.5px stroke, semi-transparent fill.

Shadow System (Claude ring shadow + Cursor ambient):

Dark mode:

rgba(0,0,0,0.14) 0px 4px 16px, rgba(38,37,30,0.1) 0px 0px 0px 1px

Light mode:

rgba(0,0,0,0.05) 0px 4px 24px, rgba(38,37,30,0.08) 0px 0px 0px 1px

Rounded Corner System:

Component boxes:
```
8px
```
(Cursor standard)
Card/diagram containers:
```
12px
```
(Airtable button / Claude comfortable rounded corners)
Label badges:
```
6px
```
(Webflow compact)

Security Groups: Dashed stroke (

stroke-dasharray="4,4"

), transparent fill, rose red.

Area Boundaries: Large dashed stroke (

stroke-dasharray="8,4"

), amber,

rx="12"

Arrows: Define arrowheads using SVG marker:

svg

<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" class="arrowhead-color" />
</marker>

Arrow Hierarchy (Z-order): Connection arrows should be drawn earlier in the SVG (after the background grid), so they render beneath component boxes. SVG elements are drawn in document order.

Transparent Fill Mask Technique: Component boxes use semi-transparent fill, so arrows behind will show through. To completely cover arrows, draw an opaque background rectangle before the semi-transparent style rectangle. Use

class="mask-bg"

to adapt to themes:

svg

<!-- Opaque background covers arrows (auto theme adaptation) -->
<rect x="X" y="Y" width="W" height="H" rx="6" class="mask-bg"/>
<!-- Semi-transparent style component overlayed on top -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>

Authentication/Security Flows: Rose red dashed lines (

#fb7185

Message Queue/Event Bus: Small connection elements between components, orange (

#fb923c

stroke,

rgba(251, 146, 60, 0.3)

fill):

svg

<rect x="X" y="Y" width="120" height="20" rx="4" fill="rgba(251, 146, 60, 0.3)" stroke="#fb923c" stroke-width="1"/>
<text x="CENTER_X" y="Y+14" fill="#fb923c" font-size="7" text-anchor="middle">Kafka / RabbitMQ</text>

Spacing Rules

Key: Ensure correct spacing when stacking components vertically to avoid overlap:

Standard Component Height: 60px for services, 80-120px for larger components
Minimum Vertical Spacing Between Components: 40px
Inline Connectors (Message Queue): Place in gaps between components, do not overlap

Example Layout:

Component A: y=70,  height=60  → Ends at y=130
Gap:    y=130  to y=170   → 40px gap, message queue placed at y=140 (20px height)
Component B: y=170, height=60  → Ends at y=230

Legend Placement

Key: Legends must be placed outside all boundary boxes (area boundaries, cluster boundaries, security groups).

Calculate the end position of all boundaries (y coordinate + height)
Place legends at least 20px below the lowest boundary
Extend SVG viewBox height if needed

Page Layout Structure

Header - Project title (with pulse indicator animation), subtitle
Main SVG Architecture Diagram - Contained in a rounded border card
Information Summary Cards - 3-card grid below the diagram, displaying key architecture details
Footer - Minimized metadata line

Component Box Template

svg

<!-- Complete component box with theme adaptation -->
<rect x="X" y="Y" width="W" height="H" rx="6" class="mask-bg"/>
<rect x="X" y="Y" width="W" height="H" rx="6" fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
<text x="CENTER_X" y="Y+20" class="text-primary" font-size="11" font-weight="600" text-anchor="middle">Component Name</text>
<text x="CENTER_X" y="Y+36" class="text-secondary" font-size="9" text-anchor="middle">Technical Description</text>

Key: Use CSS classes instead of hard-coded color values to support theme switching:

```
class="mask-bg"
```
- Opaque mask background (Dark:
```
#1a1a18
```
, Light:
```
#faf9f5
```
)
```
class="text-primary"
```
- Primary text (Dark:
```
#faf9f5
```
, Light:
```
#141413
```
)
```
class="text-secondary"
```
- Secondary text (Dark:
```
#b0aea5
```
, Light:
```
#5e5d59
```
)
```
class="grid-line"
```
- Grid line stroke
```
class="arrowhead-color"
```
- Arrowhead fill
Component stroke colors and color labels (e.g.,
```
fill="#22d3ee"
```
) do not use classes, remain unchanged in both themes

Information Summary Card Template

html

<div class="card">
  <div class="card-header">
    <div class="card-dot COLOR"></div>
    <h3>Card Title</h3>
  </div>
  <ul>
    <li>- Key Point 1</li>
    <li>- Key Point 2</li>
  </ul>
</div>

Chinese Adaptation Rules

Text Typography

All component labels, comments, and card content use Chinese
Technical terms remain in English (e.g., PostgreSQL, Kubernetes, OAuth 2.0)
No spaces between Chinese characters, add spaces between Chinese and English characters when mixing

Text Width

Chinese characters are approximately twice as wide as English characters, component box widths need to be increased accordingly
Recommended width for standard Chinese label components: 140-180px (110-140px for English)
Use
```
text-anchor="middle"
```
for center alignment

Diagram Title

Header title format: "[Project Name] System Architecture" or "[Project Name] Deployment Architecture"
Subtitle briefly describes system type and key features

Information Cards

The three cards respectively display:
1. Tech Stack Overview (core technology selection)
2. Key Design Decisions (architecture characteristics)
3. Security and Operation Key Points (security, monitoring, etc.)

Using Templates

Copy and customize the

assets/template.html

template. Key customization points:

Update
```
<title>
```
and header text
Adjust SVG viewBox dimensions as needed (default:
```
1000 x 680
```
)
Add/remove/reposition component boxes
Draw connection arrows between components
Update the three summary cards
Update footer metadata

Output Requirements

Always generate a standalone

.html

file containing:

Inline CSS (no external stylesheets except Google Fonts)
CSS custom properties defining dual themes (dark/light)
Inline SVG (no external images), SVG text uses CSS classes to adapt to themes
Minimal JavaScript for theme switching and localStorage persistence
Sun/moon icon toggle button on the right side of the header
File can be directly opened in any modern browser

Common Architecture Type References

Web Application Architecture

Frontend framework + Backend API + Database + Cache + Authentication

Microservices Architecture

API Gateway + Multiple Microservices + Message Queue + Service Discovery + Distributed Database

Cloud-Native Architecture

CDN + Load Balancing + Container Orchestration + Cloud Database + Object Storage + Monitoring

Serverless Architecture

API Gateway + Function Compute + Cloud Database + Object Storage + Message Queue

Data Flow Architecture

Data Source + Data Collection + Stream Processing + Data Warehouse + Visualization

architecture-diagram-zh

NPX Install

Tags

SKILL.md Content (Chinese)