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

架构图技能

创建专业的、自包含的 HTML 文件格式的技术架构图，内置内联 SVG 图形和 CSS 样式。

设计系统

颜色调色板

使用以下语义颜色表示组件类型：

排版

所有文本使用 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>

箭头层叠顺序： 连接箭头在 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,  height=60  → 结束于 y=130
间距:   y=130 至 y=170   → 40px 间隙，在 y=140 放置总线（20px 高）
组件 B: y=170, height=60  → 结束于 y=230

错误： 在 y=160 放置消息总线，而组件 B 从 y=170 开始（导致重叠）

正确： 在 y=140 放置消息总线，位于 40px 间隙（y=130 至 y=170）的居中位置

图例放置

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

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

示例：

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

错误： 图例位于 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 动画）

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