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>

箭头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,  height=60  → 结束于 y=130
间距:    y=130 到 y=170   → 40px 间距，总线放置在 y=140 (20px 高)
组件 B: y=170, height=60  → 结束于 y=230

错误： 当组件B起始于y=170时，将消息总线放置在y=160（导致重叠）

正确： 将消息总线放置在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动画）

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