architecture-diagram

架构图技能

创建专业的技术架构图，并将其制作为包含内嵌 SVG 图形和 CSS 样式的独立 HTML 文件。

设计系统

调色板

针对不同类型的组件使用以下语义颜色：

组件类型	填充色（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）

字体排印

所有文本都使用 JetBrains Mono（等宽字体，营造技术风格）：

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

字号：组件名称为 12px，次级标签为 9px，注释为 8px，极小标签为 7px。

视觉元素

背景： #020617（slate-950），搭配细腻的网格图案：

<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 marker 设置箭头：

<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"）：

<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)）：

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

间距规则

重要： 垂直堆叠组件时，应留出适当间距，避免重叠：

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

垂直布局示例：

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

错误： 当组件 B 从 y=170 开始时，将消息总线放在 y=160（会导致重叠） 正确： 将消息总线放在 y=140，居于 40px 间隙（y=130 至 y=170）的中央

图例位置

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

• 计算所有边界的结束位置（y 坐标 + 高度）
• 图例至少应位于最低边界下方 20px
• 如有需要，增大 SVG viewBox 的高度以容纳图例

示例：

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

错误： 图例位于 y=470，处于结束位置为 y=490 的集群边界内 正确： 图例位于 y=510，在集群边界下方，并相应增大 viewBox 高度

布局结构

1. 页眉 - 标题、带脉动效果的圆点指示器和副标题
2. 主 SVG 图 - 放在圆角边框卡片中
3. 摘要卡片 - 图表下方的 3 张卡片，列出关键信息
4. 页脚 - 简短的元数据行

组件框样式

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

信息卡片样式

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

模板

复制并自定义 assets/template.html 中的模板。主要自定义项：

1. 更新 <title> 和页眉文本
2. 根据需要修改 SVG viewBox 尺寸（默认值：1000 x 680）
3. 添加、删除或重新定位组件框
4. 绘制组件之间的连接箭头
5. 更新三张摘要卡片
6. 更新页脚元数据

输出

始终生成一个独立完整的 .html 文件，其中包含：

• 嵌入式 CSS（除 Google Fonts 外，不使用外部样式表）
• 内联 SVG（不使用外部图像）
• 无需 JavaScript（使用纯 CSS 动画）

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