Back to Details

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:
  1. Architecture modules and components
  2. Hierarchical relationships (entry layer, core layer, infrastructure layer)
  3. Connections between components
分析用户输入，识别以下信息：
  1. 架构模块与组件
  2. 层级关系（接入层、核心层、基础设施层）
  3. 组件间的连接关系

Step 2: Layout Planning (Required Output)

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

Before writing HTML, output layout planning tables:
undefined
编写HTML前，先输出布局规划表：
undefined

Layout Planning

Layout Planning

Group Coordinates

Group Coordinates

IDNamelefttopwidthheightrightbottom
G1xxx23090160120390210
IDNamelefttopwidthheightrightbottom
G1xxx23090160120390210

Component Coordinates

Component Coordinates

IDGrouplefttopwidthheight
C1G124611612840
undefined
IDGrouplefttopwidthheight
C1G124611612840
undefined

Step 3: Collision Detection (Required)

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

undefined
undefined

Collision Detection

Collision Detection

Group PairResult
G1 vs G2G1.right(390) < G2.left(420) OK, gap=30px
Max group right must < 1140px (for right info area)
undefined
Group PairResult
G1 vs G2G1.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
详细布局规则见 
references/layout-rules.md

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

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

锚点X 坐标Y 坐标说明
左中lefttop + height/2组件左边框中点
右中right (=left+width)top + height/2组件右边框中点
上中left + width/2top组件上边框中点
下中left + width/2bottom (=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 坐标说明
左中lefttop + height/2组件左边框中点
右中right (=left+width)top + height/2组件右边框中点
上中left + width/2top组件上边框中点
下中left + width/2bottom (=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
中的完整模板
必须使用 
references/html-template.md
中的完整模板

核心 CSS 类

核心 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)
group(z-index:1) < svg(z-index:3) < box(z-index:5)

图例规则

图例规则

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

Step 8: Post-generation Verification

步骤8：生成后验证

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

Architecture Type Adaptation

架构类型适配

Architecture TypeLayer SuggestionCore Components
Frontend (Vue/React)Entry, Router, Pages, Components, State, UtilsRouter, Views, Components, Store, API
MicroserviceGateway, Service, Governance, InfrastructureGateway, Service Cluster, Registry, Config
Backend LayeredPresentation, Control, Service, PersistenceController, Service, DAO, Database
DeploymentAccess, Compute, StorageLB, Server Cluster, DB Cluster
架构类型层级建议核心组件
前端 (Vue/React)Entry, Router, Pages, Components, State, UtilsRouter, Views, Components, Store, API
微服务Gateway, Service, Governance, InfrastructureGateway, Service Cluster, Registry, Config
后端分层Presentation, Control, Service, PersistenceController, Service, DAO, Database
部署Access, Compute, StorageLB, Server Cluster, DB Cluster

Quick Reference

快速参考

ResourcePurpose
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

核心原则

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