name: architecture-diagram description: 创建专业、暗色调的架构图，作为独立的HTML文件，包含SVG图形。当用户需要系统架构图、基础设施图、云架构可视化、安全图、网络拓扑图或任何显示系统组件及其关系的技术图时使用。 license: MIT metadata: version: “1.0” author: Cocoon AI (hello@cocoon-ai.com)

架构图技能

创建专业技术架构图作为自包含的HTML文件，内嵌SVG图形和CSS样式。

设计系统

色彩板

使用这些语义颜色为组件类型：

组件类型	填充 (rgba)	描边
前端	`rgba(8, 51, 68, 0.4)`	`#22d3ee` (青色-400)
后端	`rgba(6, 78, 59, 0.4)`	`#34d399` (翡翠绿-400)
数据库	`rgba(76, 29, 149, 0.4)`	`#a78bfa` (紫罗兰-400)
AWS/云	`rgba(120, 53, 15, 0.3)`	`#fbbf24` (琥珀色-400)
安全	`rgba(136, 19, 55, 0.4)`	`#fb7185` (玫瑰色-400)
消息总线	`rgba(251, 146, 60, 0.3)`	`#fb923c` (橙色-400)
外部/通用	`rgba(30, 41, 59, 0.5)`	`#94a3b8` (板岩灰-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 （板岩灰-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 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>

箭头z顺序： 连接箭头在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
内联连接器（消息总线）： 放置在组件之间的间隙中，不重叠

示例垂直布局：

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

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

图例放置

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

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

示例：

Kubernetes 集群：y=30, 高度=460 → 结束于 y=490
图例应从：y=510 或以下开始
SVG viewBox 高度：至少 560 以适应图例

错误： 图例在 y=470 内，集群边界在 y=490 结束 正确： 图例在 y=510，低于集群边界，viewBox高度扩展

布局结构

标题 - 带有脉冲点指示器的标题，副标题
主SVG图 - 包含在圆角边框卡片中
摘要卡片 - 图下方的3张卡片网格，包含关键细节
页脚 - 最小的元数据行

组件框模式

<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">标签</text>
<text x="CENTER_X" y="Y+36" fill="#94a3b8" font-size="9" text-anchor="middle">子标签</text>

信息卡片模式

<div class="card">
  <div class="card-header">
    <div class="card-dot COLOR"></div>
    <h3>标题</h3>
  </div>
  <ul>
    <li>• 项目一</li>
    <li>• 项目二</li>
  </ul>
</div>

模板

复制并自定义 assets/template.html 模板。关键自定义点：

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

输出

始终生成一个单独的自包含 .html 文件：

嵌入式CSS（除了Google字体外，没有外部样式表）
内联SVG（没有外部图像）
不需要JavaScript（纯CSS动画）

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