Back to Details

architecture-diagram-zh

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

架构图生成技能

Architecture Diagram Generation Skill

创建专业的技术架构图，输出为独立的 HTML 文件，包含内联 SVG 图形和 CSS 样式。
Create professional technical architecture diagrams, output as standalone HTML files containing inline SVG graphics and CSS styles.

触发条件

Trigger Conditions

当用户提到以下任何场景时，主动使用此技能：
  • "画一个架构图" / "生成架构图" / "画个图"
  • "系统架构" / "部署架构" / "技术架构"
  • "画一个流程图" / "组件关系图" / "拓扑图"
  • "infrastructure diagram" / "architecture diagram"
  • 用户粘贴了代码并要求分析架构
  • 用户描述了系统组件和它们之间的关系
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

根据收集到的信息，使用本技能的设计规范和模板生成 HTML 文件。
Generate HTML files using this skill's design specifications and templates based on the collected information.

第三步：输出结果

Step 3: Output Results

输出一个完整的、可直接在浏览器中打开的 
.html
文件。
Output a complete 
.html
file that can be directly opened in a browser.

设计系统

Design System

主题系统

Theme System

架构图支持 深色（Dark） 和 浅色（Light） 两种主题，通过页眉右侧的切换按钮一键切换。用户选择会保存到 localStorage，下次打开自动恢复。
实现方式： CSS 自定义属性 + 
data-theme
属性切换。SVG 元素通过 CSS class（
text-primary
、
text-secondary
、
mask-bg
、
grid-line
、
arrowhead-color
）适配主题。
关键原则：
  • 组件描边色（青/绿/紫/琥珀/玫红/橙）在两种主题下保持不变，确保视觉一致性
  • 仅切换背景、文字、网格、边框等基础色
  • 使用 CSS 
    transition
    实现平滑切换动画
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)

融合 Cursor 暖色深底 + Claude 暖白文字。温暖不冰冷，告别冷蓝色 slate。
元素颜色
页面背景
#141413
(温暖近黑)
卡片背景
rgba(20, 20, 19, 0.5)
遮罩背景
#1a1a18
(暖深色)
边框
rgba(38, 37, 30, 0.2)
(oklab 暖边框)
主文字
#faf9f5
(Ivory 暖白)
副文字
#b0aea5
(暖银)
网格线
rgba(38, 37, 30, 0.12)
箭头头
rgba(38, 37, 30, 0.45)
Combines Cursor's warm dark background + Claude's warm white text. Warm and not cold,告别冷蓝色 slate.
ElementColor
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

融合 Claude 羊皮纸 
#f5f4ed
+ Airtable 深海军蓝文字。
元素颜色
页面背景
#f5f4ed
(羊皮纸)
卡片背景
rgba(250, 249, 245, 0.85)
遮罩背景
#faf9f5
(Ivory)
边框
#f0eee6
(暖奶油)
主文字
#141413
(暖近黑)
副文字
#5e5d59
(橄榄灰)
网格线
#f0eee6
(暖奶油)
箭头头
#87867f
(石灰)
Combines Claude's parchment 
#f5f4ed
+ Airtable's dark navy text.
ElementColor
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

按组件类型使用语义化颜色：
组件类型填充色 (rgba)描边色典型用途
前端
rgba(20, 50, 62, 0.4)
#22d3ee
(青色)		客户端应用、UI、浏览器
后端
rgba(18, 72, 55, 0.4)
#34d399
(翡翠绿)		服务器、API、微服务
数据库
rgba(72, 30, 100, 0.4)
#a78bfa
(紫色)		数据库、存储、缓存
云服务
rgba(110, 50, 18, 0.35)
#fbbf24
(琥珀色)		AWS/阿里云/腾讯云服务
安全组件
rgba(130, 25, 50, 0.4)
#fb7185
(玫红色)		认证、安全组、加密
消息队列
rgba(251, 146, 60, 0.3)
#fb923c
(橙色)		Kafka、RabbitMQ、事件总线
外部/通用
rgba(38, 37, 30, 0.35)
#94a3b8
(石板灰)		外部系统、第三方服务
AI/智能
rgba(80, 30, 120, 0.4)
#c084fc
(亮紫)		AI 服务、LLM、模型
Use semantic colors by component type:
Component TypeFill Color (rgba)Stroke ColorTypical 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

所有文字使用 JetBrains Mono 等宽字体（技术风格）：
html
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
排版规范（参考 Cursor 紧凑间距 + Claude 宽松行高）：
  • 标题：
    letter-spacing: -0.02em
    , 
    line-height: 1.6
  • 副标题：
    letter-spacing: 0.04em
  • 字体大小：12px 组件名称，9px 子标签，8px 注释文字，7px 极小标签
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

背景： 深色模式 
#141413
(温暖近黑) / 浅色模式 
#f5f4ed
(羊皮纸)，带微妙网格纹理：
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>
组件方框： 圆角矩形（
rx="8"
），1.5px 描边，半透明填充。
阴影系统（Claude ring shadow + Cursor ambient）：
  • 深色模式：
    rgba(0,0,0,0.14) 0px 4px 16px, rgba(38,37,30,0.1) 0px 0px 0px 1px
  • 浅色模式：
    rgba(0,0,0,0.05) 0px 4px 24px, rgba(38,37,30,0.08) 0px 0px 0px 1px
圆角体系：
  • 组件方框：
    8px
    （Cursor 标准）
  • 卡片/图表容器：
    12px
    （Airtable 按钮 / Claude 舒适圆角）
  • 标签徽章：
    6px
    （Webflow 紧凑）
安全组： 虚线描边（
stroke-dasharray="4,4"
），透明填充，玫红色。
区域边界： 大虚线描边（
stroke-dasharray="8,4"
），琥珀色，
rx="12"
。
箭头： 使用 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>
箭头层级（Z-order）： 连接箭头要在 SVG 中较早绘制（背景网格之后），这样它们会渲染在组件方框之下。SVG 元素按文档顺序绘制。
透明填充遮罩技巧： 组件方框使用半透明填充，箭头在后面会透出来。为了完全遮住箭头，在半透明样式矩形之前绘制一个不透明背景矩形。使用 
class="mask-bg"
以适配主题：
svg
<!-- 不透明背景遮盖箭头（自动适配主题） -->
<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="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>
认证/安全流： 玫红色虚线（
#fb7185
）。
消息队列/事件总线： 组件间的小型连接元素，橙色（
#fb923c
描边，
rgba(251, 146, 60, 0.3)
填充）：
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>
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

关键： 垂直堆叠组件时确保间距正确，避免重叠：
  • 标准组件高度： 服务 60px，较大组件 80-120px
  • 组件间最小垂直间距： 40px
  • 内联连接器（消息队列）： 放在组件间的间隙中，不要重叠
示例布局：
组件 A: y=70,  height=60  → 结束于 y=130
间隙:    y=130 到 y=170   → 40px 间隙，消息队列放 y=140 (20px 高)
组件 B: y=170, height=60  → 结束于 y=230
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

关键： 图例必须放在所有边界框（区域边界、集群边界、安全组）之外。
  • 计算所有边界结束的位置（y 坐标 + 高度）
  • 图例至少放在最低边界下方 20px 处
  • 如需要则扩展 SVG viewBox 高度
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

  1. 页眉 - 项目标题（带脉冲指示灯动画）、副标题
  2. 主 SVG 架构图 - 包含在圆角边框卡片中
  3. 信息摘要卡片 - 图表下方的 3 张卡片网格，展示关键架构细节
  4. 页脚 - 最小化元数据行
  1. Header - Project title (with pulse indicator animation), subtitle
  2. Main SVG Architecture Diagram - Contained in a rounded border card
  3. Information Summary Cards - 3-card grid below the diagram, displaying key architecture details
  4. Footer - Minimized metadata line

组件方框模板

Component Box Template

svg
<!-- 带主题适配的完整组件方框 -->
<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">组件名称</text>
<text x="CENTER_X" y="Y+36" class="text-secondary" font-size="9" text-anchor="middle">技术说明</text>
关键： 使用 CSS class 而非硬编码颜色值，以支持主题切换：
  • class="mask-bg"
    - 不透明遮罩背景（深色: 
    #1a1a18
    ，浅色: 
    #faf9f5
    ）
  • class="text-primary"
    - 主文字（深色: 
    #faf9f5
    ，浅色: 
    #141413
    ）
  • class="text-secondary"
    - 副文字（深色: 
    #b0aea5
    ，浅色: 
    #5e5d59
    ）
  • class="grid-line"
    - 网格线描边
  • class="arrowhead-color"
    - 箭头头部填充
  • 组件描边色和彩色标签（如 
    fill="#22d3ee"
    ）不使用 class，在两种主题下保持不变
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>卡片标题</h3>
  </div>
  <ul>
    <li>- 要点一</li>
    <li>- 要点二</li>
  </ul>
</div>
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

  • 所有组件标签、注释、卡片内容使用中文
  • 技术专有名词保留英文（如 PostgreSQL、Kubernetes、OAuth 2.0）
  • 混合排版时，中文字符之间无空格，中英文之间加空格
  • 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

  • 中文字符宽度约为英文的 2 倍，组件方框宽度需相应增加
  • 标准中文标签组件宽度建议：140-180px（英文为 110-140px）
  • 使用 
    text-anchor="middle"
    居中对齐
  • 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

  • 三张卡片分别展示：
    1. 技术栈概要（核心技术选型）
    2. 关键设计决策（架构特点）
    3. 安全与运维要点（安全、监控等）
  • 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

复制并自定义 
assets/template.html
模板。关键自定义点：
  1. 更新 
    <title>
    和页眉文字
  2. 根据需要调整 SVG viewBox 尺寸（默认：
    1000 x 680
    ）
  3. 添加/删除/重新定位组件方框
  4. 绘制组件间的连接箭头
  5. 更新三张摘要卡片
  6. 更新页脚元数据
Copy and customize the 
assets/template.html
template. Key customization points:
  1. Update 
    <title>
    and header text
  2. Adjust SVG viewBox dimensions as needed (default: 
    1000 x 680
    )
  3. Add/remove/reposition component boxes
  4. Draw connection arrows between components
  5. Update the three summary cards
  6. Update footer metadata

输出要求

Output Requirements

始终生成一个独立的 
.html
文件，包含：
  • 内嵌 CSS（除 Google Fonts 外无外部样式表）
  • CSS 自定义属性定义双主题（深色/浅色）
  • 内联 SVG（无外部图片），SVG 文字使用 CSS class 适配主题
  • 少量 JavaScript 用于主题切换和 localStorage 持久化
  • 页眉右侧包含太阳/月亮图标切换按钮
  • 文件可直接在任何现代浏览器中打开
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 应用架构

Web Application Architecture

前端框架 + 后端 API + 数据库 + 缓存 + 认证
Frontend framework + Backend API + Database + Cache + Authentication

微服务架构

Microservices Architecture

API 网关 + 多个微服务 + 消息队列 + 服务注册发现 + 分布式数据库
API Gateway + Multiple Microservices + Message Queue + Service Discovery + Distributed Database

云原生架构

Cloud-Native Architecture

CDN + 负载均衡 + 容器编排 + 云数据库 + 对象存储 + 监控
CDN + Load Balancing + Container Orchestration + Cloud Database + Object Storage + Monitoring

Serverless 架构

Serverless Architecture

API 网关 + 函数计算 + 云数据库 + 对象存储 + 消息队列
API Gateway + Function Compute + Cloud Database + Object Storage + Message Queue

数据流架构

Data Flow Architecture

数据源 + 数据采集 + 流处理 + 数据仓库 + 可视化
Data Source + Data Collection + Stream Processing + Data Warehouse + Visualization