architecture-diagram

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Architecture Diagram Skill

架构图绘制技能

Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.

创建包含内嵌SVG图形和CSS样式的独立HTML格式专业技术架构图。

Design System

设计规范

Color Palette

配色方案

Use these semantic colors for component types:

Component Type	Fill (rgba)	Stroke
Frontend	`rgba(8, 51, 68, 0.4)`	`#22d3ee` (cyan-400)
Backend	`rgba(6, 78, 59, 0.4)`	`#34d399` (emerald-400)
Database	`rgba(76, 29, 149, 0.4)`	`#a78bfa` (violet-400)
AWS/Cloud	`rgba(120, 53, 15, 0.3)`	`#fbbf24` (amber-400)
Security	`rgba(136, 19, 55, 0.4)`	`#fb7185` (rose-400)
Message Bus	`rgba(251, 146, 60, 0.3)`	`#fb923c` (orange-400)
External/Generic	`rgba(30, 41, 59, 0.5)`	`#94a3b8` (slate-400)

为不同组件类型使用以下语义化颜色：

组件类型	填充色 (rgba)	描边色
前端	`rgba(8, 51, 68, 0.4)`	`#22d3ee` (cyan-400)
后端	`rgba(6, 78, 59, 0.4)`	`#34d399` (emerald-400)
数据库	`rgba(76, 29, 149, 0.4)`	`#a78bfa` (violet-400)
AWS/云服务	`rgba(120, 53, 15, 0.3)`	`#fbbf24` (amber-400)
安全	`rgba(136, 19, 55, 0.4)`	`#fb7185` (rose-400)
消息总线	`rgba(251, 146, 60, 0.3)`	`#fb923c` (orange-400)
外部/通用	`rgba(30, 41, 59, 0.5)`	`#94a3b8` (slate-400)

Typography

排版规范

Use JetBrains Mono for all text (monospace, technical aesthetic):

html

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

Font sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels.

所有文本使用JetBrains Mono字体（等宽字体，符合技术审美）：

html

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

字体大小：组件名称为12px，子标签为9px，注释为8px，微型标签为7px。

Visual Elements

视觉元素

Background:

#020617

(slate-950) with subtle grid pattern:

svg

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

Component boxes: Rounded rectangles (

rx="6"

) with 1.5px stroke, semi-transparent fills.

Security groups: Dashed stroke (

stroke-dasharray="4,4"

), transparent fill, rose color.

Region boundaries: Larger dashed stroke (

stroke-dasharray="8,4"

), amber color,

rx="12"

Arrows: Use SVG marker for arrowheads:

svg

<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
</marker>

Arrow z-order: Draw connection arrows early in the SVG (after the background grid) so they render behind component boxes. SVG elements are painted in document order, so arrows drawn first will appear behind shapes drawn later.

Masking arrows behind transparent fills: Since component boxes use semi-transparent fills (

rgba(..., 0.4)

), arrows behind them will show through. To fully mask arrows, draw an opaque background rect (e.g.,

fill="#0f172a"

) at the same position before drawing the semi-transparent styled rect on top:

svg

<!-- Opaque background to mask arrows -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="#0f172a"/>
<!-- Styled component 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"/>

Auth/security flows: Dashed lines in rose color (

#fb7185

Message buses / Event buses: Small connector elements between services. Use orange color (

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

背景：

#020617

(slate-950)，带有细微网格图案：

svg

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

组件框：圆角矩形（

rx="6"

），1.5px描边，半透明填充。

安全组：虚线描边（

stroke-dasharray="4,4"

），透明填充，玫瑰色。

区域边界：较粗虚线描边（

stroke-dasharray="8,4"

），琥珀色，

rx="12"

。

箭头：使用SVG标记定义箭头头部：

svg

<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
</marker>

箭头层级：在SVG中提前绘制连接箭头（在背景网格之后），使其显示在组件框下方。SVG元素按文档顺序绘制，因此先绘制的箭头会出现在后绘制的图形下方。

透明填充下的箭头遮挡处理：由于组件框使用半透明填充（

rgba(..., 0.4)

），下方的箭头会透出来。要完全遮挡箭头，请在绘制半透明样式的矩形之前，在相同位置绘制一个不透明的背景矩形（例如

fill="#0f172a"

）：

svg

<!-- 用于遮挡箭头的不透明背景 -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="#0f172a"/>
<!-- 上方的样式化组件 -->
<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>

Spacing Rules

间距规则

CRITICAL: When stacking components vertically, ensure proper spacing to avoid overlaps:

Standard component height: 60px for services, 80-120px for larger components
Minimum vertical gap between components: 40px
Inline connectors (message buses): Place IN the gap between components, not overlapping

Example vertical layout:

Component A: y=70,  height=60  → ends at y=130
Gap:         y=130 to y=170   → 40px gap, place bus at y=140 (20px tall)
Component B: y=170, height=60  → ends at y=230

Wrong: Placing a message bus at y=160 when Component B starts at y=170 (causes overlap) Right: Placing a message bus at y=140, centered in the 40px gap (y=130 to y=170)

重要提示： 垂直堆叠组件时，需确保合适的间距以避免重叠：

标准组件高度：服务类组件为60px，大型组件为80-120px
组件间最小垂直间距：40px
内嵌连接器（消息总线）：放置在组件之间的间距中，不得重叠

垂直布局示例：

组件A: y=70,  高度=60  → 结束于y=130
间距:   y=130 到 y=170 → 40px间距，将总线放置在y=140（高度20px）
组件B: y=170, 高度=60  → 结束于y=230

错误示例： 将消息总线放置在y=160，而组件B起始于y=170（导致重叠） 正确示例： 将消息总线放置在y=140，居中于40px的间距（y=130到y=170）

Legend Placement

图例放置规则

CRITICAL: Place legends OUTSIDE all boundary boxes (region boundaries, cluster boundaries, security groups).

Calculate where all boundaries end (y position + height)
Place legend at least 20px below the lowest boundary
Expand SVG viewBox height if needed to accommodate

Example:

Kubernetes Cluster: y=30, height=460 → ends at y=490
Legend should start at: y=510 or below
SVG viewBox height: at least 560 to fit legend

Wrong: Legend at y=470 inside a cluster boundary that ends at y=490 Right: Legend at y=510, below the cluster boundary, with viewBox height extended

重要提示： 图例需放置在所有边界框（区域边界、集群边界、安全组）之外。

计算所有边界的结束位置（y坐标 + 高度）
图例需放置在最低边界下方至少20px处
如有需要，扩展SVG的viewBox高度以容纳图例

示例：

Kubernetes集群: y=30, 高度=460 → 结束于y=490
图例应起始于: y=510或更低位置
SVG viewBox高度: 至少560以容纳图例

错误示例： 图例位于y=470，在结束于y=490的集群边界内部 正确示例： 图例位于y=510，在集群边界下方，同时扩展viewBox高度

Layout Structure

布局结构

Header - Title with pulsing dot indicator, subtitle
Main SVG diagram - Contained in rounded border card
Summary cards - Grid of 3 cards below diagram with key details
Footer - Minimal metadata line

头部 - 带有脉冲点指示器的标题、副标题
主SVG图 - 包含在圆角边框卡片中
摘要卡片 - 图表下方的3个网格卡片，展示关键详情
页脚 - 极简元数据行

Component Box Pattern

组件框模板

svg

<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" fill="white" font-size="11" font-weight="600" text-anchor="middle">LABEL</text>
<text x="CENTER_X" y="Y+36" fill="#94a3b8" font-size="9" text-anchor="middle">sublabel</text>

svg

<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" fill="white" font-size="11" font-weight="600" text-anchor="middle">LABEL</text>
<text x="CENTER_X" y="Y+36" fill="#94a3b8" font-size="9" text-anchor="middle">sublabel</text>

Info Card Pattern

信息卡片模板

html

<div class="card">
  <div class="card-header">
    <div class="card-dot COLOR"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>

html

<div class="card">
  <div class="card-header">
    <div class="card-dot COLOR"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>

Template

模板

Copy and customize the template at

assets/template.html

. Key customization points:

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

复制并自定义

assets/template.html

中的模板。关键自定义点：

更新
```
<title>
```
和头部文本
如有需要，修改SVG的viewBox尺寸（默认：
```
1000 x 680
```
）
添加/移除/重新定位组件框
绘制组件之间的连接箭头
更新三个摘要卡片
更新页脚元数据

Output

输出要求

Always produce a single self-contained

.html

file with:

Embedded CSS (no external stylesheets except Google Fonts)
Inline SVG (no external images)
No JavaScript required (pure CSS animations)

The file should render correctly when opened directly in any modern browser.

始终生成单个独立的

.html

文件，包含：

内嵌CSS（除Google Fonts外无外部样式表）
内嵌SVG（无外部图片）
无需JavaScript（纯CSS动画）

文件在任何现代浏览器中直接打开都应能正确渲染。