architecture-diagram

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Architecture Diagram Generator

架构图生成器

Generate professional HTML architecture diagrams with collision-free layout, clear connections, and unified styling.

生成无布局冲突、连接清晰、样式统一的专业HTML架构图。

Execution Steps

执行步骤

Step 1: Understand Architecture Content

步骤1：理解架构内容

Analyze user input to identify:

Architecture modules and components
Hierarchical relationships (entry layer, core layer, infrastructure layer)
Connections between components

分析用户输入，识别以下信息：

架构模块与组件
层级关系（接入层、核心层、基础设施层）
组件间的连接关系

Step 2: Layout Planning (Required Output)

步骤2：布局规划（必须输出）

Before writing HTML, output layout planning tables:

undefined

编写HTML前，先输出布局规划表：

undefined

Layout Planning

Group Coordinates

ID	Name	left	top	width	height	right	bottom
G1	xxx	230	90	160	120	390	210

ID	Name	left	top	width	height	right	bottom
G1	xxx	230	90	160	120	390	210

Component Coordinates

ID	Group	left	top	width	height
C1	G1	246	116	128	40

undefined

ID	Group	left	top	width	height
C1	G1	246	116	128	40

undefined

Step 3: Collision Detection (Required)

步骤3：碰撞检测（必须执行）

undefined

undefined

Collision Detection

Group Pair	Result
G1 vs G2	G1.right(390) < G2.left(420) OK, gap=30px

Max group right must < 1140px (for right info area)

undefined

Group Pair	Result
G1 vs G2	G1.right(390) < G2.left(420) OK, gap=30px

Max group right must < 1140px (for right info area)

undefined

Step 4: Apply Style Rules

步骤4：应用样式规则

详细样式规范见
references/style-guide.md

核心规则：

组件尺寸：小型 100-120px，标准 130-160px，大型 170-220px
坐标必须是 10 的倍数
右侧预留 260px 给信息卡片

详细样式规范见
references/style-guide.md

核心规则：

组件尺寸：小型 100-120px，标准 130-160px，大型 170-220px
坐标必须是 10 的倍数
右侧预留 260px 给信息卡片

Step 5: Connection Rules

步骤5：连接规则

详细布局规则见
references/layout-rules.md

锚点计算（连线必须连接到组件边缘，不能是中心）

锚点	X 坐标	Y 坐标	说明
左中	left	top + height/2	组件左边框中点
右中	right (=left+width)	top + height/2	组件右边框中点
上中	left + width/2	top	组件上边框中点
下中	left + width/2	bottom (=top+height)	组件下边框中点

示例：组件 left=100, top=50, width=120, height=40

右中锚点：(100+120=220, 50+40/2=70)
下中锚点：(100+120/2=160, 50+40=90)

锚点	X 坐标	Y 坐标	说明
左中	left	top + height/2	组件左边框中点
右中	right (=left+width)	top + height/2	组件右边框中点
上中	left + width/2	top	组件上边框中点
下中	left + width/2	bottom (=top+height)	组件下边框中点

示例：组件 left=100, top=50, width=120, height=40

右中锚点：(100+120=220, 50+40/2=70)
下中锚点：(100+120/2=160, 50+40=90)

路径类型（根据组件相对位置选择）

场景	起点	终点	代码
A在B左边，同行	A右中	B左中	`<line x1="A.right" y1="A.cy" x2="B.left" y2="B.cy" />`
A在B上边，同列	A下中	B上中	`<line x1="A.cx" y1="A.bottom" x2="B.cx" y2="B.top" />`
跨行跨列	A右中/下中	B左中/上中	`<path d="M A锚点 L 拐点 L B锚点" />`

重要：起点和终点必须是组件边缘的锚点，不是组件中心！

场景	起点	终点	代码
A在B左边，同行	A右中	B左中	`<line x1="A.right" y1="A.cy" x2="B.left" y2="B.cy" />`
A在B上边，同列	A下中	B上中	`<line x1="A.cx" y1="A.bottom" x2="B.cx" y2="B.top" />`
跨行跨列	A右中/下中	B左中/上中	`<path d="M A锚点 L 拐点 L B锚点" />`

重要：起点和终点必须是组件边缘的锚点，不是组件中心！

连线颜色（根据语义选择）

语义	颜色	色值
主流程	灰色	#94a3b8
数据流	绿色	#059669
依赖	蓝色	#2563eb
配置	青色	#0d9488
控制	红色	#e11d48
事件	紫色	#7c3aed

语义	颜色	色值
主流程	灰色	#94a3b8
数据流	绿色	#059669
依赖	蓝色	#2563eb
配置	青色	#0d9488
控制	红色	#e11d48
事件	紫色	#7c3aed

Step 6: Pre-generation Checklist

步骤6：生成前检查清单

[ ] 坐标是 10 的倍数
[ ] 同行组件间距 >= 30px
[ ] 组件不超出分组边界
[ ] 最大 right < 1140px
[ ] 拐点在空白区域

[ ] 坐标是 10 的倍数
[ ] 同行组件间距 >= 30px
[ ] 组件不超出分组边界
[ ] 最大 right < 1140px
[ ] 拐点在空白区域

Step 7: Generate HTML

步骤7：生成HTML

必须使用
references/html-template.md
中的完整模板

核心 CSS 类

css

.box / .box.source / .box.dashed  /* 组件 */
.group / .tag.teal/.blue/.green/.red/.violet  /* 分组 */
.enclosure  /* 基础设施层 */
.legend  /* 图例 */
.connection  /* 连线悬停高亮 */
.flow  /* 连线流动动画 */

css

.box / .box.source / .box.dashed  /* 组件 */
.group / .tag.teal/.blue/.green/.red/.violet  /* 分组 */
.enclosure  /* 基础设施层 */
.legend  /* 图例 */
.connection  /* 连线悬停高亮 */
.flow  /* 连线流动动画 */

连线生成

html

<!-- 水平连线：A右中 → B左中 -->
<line x1="A.left+A.width" y1="A.top+A.height/2"
      x2="B.left" y2="B.top+B.height/2"
      stroke="#94a3b8" stroke-width="1.5" marker-end="url(#ah)"
      class="connection flow" />

<!-- 垂直连线：A下中 → B上中（注意：终点Y是B.top，不是B.left） -->
<line x1="A.left+A.width/2" y1="A.top+A.height"
      x2="B.left+B.width/2" y2="B.top"
      stroke="#94a3b8" stroke-width="1.5" marker-end="url(#ah)"
      class="connection flow" />

```
connection
```
：悬停时加粗 + 发光高亮
```
flow
```
：2秒平滑流动动画
关键：垂直连线终点是
```
B.top
```
（上边框），x坐标是
```
B.left+B.width/2
```
（水平中点）

html

<!-- 水平连线：A右中 → B左中 -->
<line x1="A.left+A.width" y1="A.top+A.height/2"
      x2="B.left" y2="B.top+B.height/2"
      stroke="#94a3b8" stroke-width="1.5" marker-end="url(#ah)"
      class="connection flow" />

<!-- 垂直连线：A下中 → B上中（注意：终点Y是B.top，不是B.left） -->
<line x1="A.left+A.width/2" y1="A.top+A.height"
      x2="B.left+B.width/2" y2="B.top"
      stroke="#94a3b8" stroke-width="1.5" marker-end="url(#ah)"
      class="connection flow" />

```
connection
```
：悬停时加粗 + 发光高亮
```
flow
```
：2秒平滑流动动画
关键：垂直连线终点是
```
B.top
```
（上边框），x坐标是
```
B.left+B.width/2
```
（水平中点）

层级关系

group(z-index:1) < svg(z-index:3) < box(z-index:5)

图例规则

只显示实际使用的连线类型
颜色必须与连线 stroke 颜色一致
标签根据架构类型适配

只显示实际使用的连线类型
颜色必须与连线 stroke 颜色一致
标签根据架构类型适配

Step 8: Post-generation Verification

步骤8：生成后验证

[ ] 所有组件可见，无遮挡
[ ] 连线清晰，无断裂
[ ] 图例与连线颜色一致
[ ] 响应式缩放正常

[ ] 所有组件可见，无遮挡
[ ] 连线清晰，无断裂
[ ] 图例与连线颜色一致
[ ] 响应式缩放正常

Architecture Type Adaptation

架构类型适配

Architecture Type	Layer Suggestion	Core Components
Frontend (Vue/React)	Entry, Router, Pages, Components, State, Utils	Router, Views, Components, Store, API
Microservice	Gateway, Service, Governance, Infrastructure	Gateway, Service Cluster, Registry, Config
Backend Layered	Presentation, Control, Service, Persistence	Controller, Service, DAO, Database
Deployment	Access, Compute, Storage	LB, Server Cluster, DB Cluster

架构类型	层级建议	核心组件
前端 (Vue/React)	Entry, Router, Pages, Components, State, Utils	Router, Views, Components, Store, API
微服务	Gateway, Service, Governance, Infrastructure	Gateway, Service Cluster, Registry, Config
后端分层	Presentation, Control, Service, Persistence	Controller, Service, DAO, Database
部署	Access, Compute, Storage	LB, Server Cluster, DB Cluster

Quick Reference

快速参考

Resource	Purpose
`references/html-template.md`	完整 HTML 模板
`references/style-guide.md`	颜色系统、组件尺寸
`references/layout-rules.md`	坐标约束、碰撞检测
`examples/vue-frontend-example.md`	Vue 3 前端架构示例
`examples/microservice-example.md`	微服务架构示例

资源	用途
`references/html-template.md`	完整 HTML 模板
`references/style-guide.md`	颜色系统、组件尺寸
`references/layout-rules.md`	坐标约束、碰撞检测
`examples/vue-frontend-example.md`	Vue 3 前端架构示例
`examples/microservice-example.md`	微服务架构示例

Key Principles

核心原则

先规划后编码 - 输出坐标表再写 HTML
验证碰撞 - 计算 right/bottom 并检查间距
使用标准尺寸 - 遵循尺寸模板
保持连线整洁 - 使用定义的锚点和路径类型
预留空间 - 右侧预留 260px 信息区

先规划后编码 - 输出坐标表再写 HTML
验证碰撞 - 计算 right/bottom 并检查间距
使用标准尺寸 - 遵循尺寸模板
保持连线整洁 - 使用定义的锚点和路径类型
预留空间 - 右侧预留 260px 信息区