// 创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。
| name | architecture-diagram-zh |
| description | 创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。 |
| license | MIT |
| metadata | {"version":"2.1","author":"Architecture Diagram Skill (中文版)"} |
创建专业的技术架构图，输出为独立的 HTML 文件，包含内联 SVG 图形和 CSS 样式。
当用户提到以下任何场景时，主动使用此技能：
如果用户没有提供完整的架构描述，主动询问以下信息：
如果用户提供了代码库或项目文件，自行分析提取架构信息。
根据收集到的信息，使用本技能的设计规范和模板生成 HTML 文件。
输出一个完整的、可直接在浏览器中打开的 .html 文件。
架构图支持 深色（Dark） 和 浅色（Light） 两种主题，通过页眉右侧的切换按钮一键切换。用户选择会保存到 localStorage，下次打开自动恢复。
实现方式： CSS 自定义属性 + data-theme 属性切换。SVG 元素通过 CSS class（text-primary、text-secondary、mask-bg、grid-line、arrowhead-color）适配主题。
关键原则：
transition 实现平滑切换动画融合 Cursor 暖色深底 + Claude 暖白文字。温暖不冰冷，告别冷蓝色 slate。
| 元素 | 颜色 |
|---|---|
| 页面背景 | #141413 (温暖近黑) |
| 卡片背景 | rgba(20, 20, 19, 0.5) |
| 遮罩背景 | #1a1a18 (暖深色) |
| 边框 | rgba(38, 37, 30, 0.2) (oklab 暖边框) |
| 主文字 | #faf9f5 (Ivory 暖白) |
| 副文字 | #b0aea5 (暖银) |
| 网格线 | rgba(38, 37, 30, 0.12) |
| 箭头头 | rgba(38, 37, 30, 0.45) |
融合 Claude 羊皮纸 #f5f4ed + Airtable 深海军蓝文字。
| 元素 | 颜色 |
|---|---|
| 页面背景 | #f5f4ed (羊皮纸) |
| 卡片背景 | rgba(250, 249, 245, 0.85) |
| 遮罩背景 | #faf9f5 (Ivory) |
| 边框 | #f0eee6 (暖奶油) |
| 主文字 | #141413 (暖近黑) |
| 副文字 | #5e5d59 (橄榄灰) |
| 网格线 | #f0eee6 (暖奶油) |
| 箭头头 | #87867f (石灰) |
按组件类型使用语义化颜色：
| 组件类型 | 填充色 (rgba) | 描边色 | 典型用途 |
|---|---|---|---|
| 前端 | rgba(20, 50, 62, 0.4) | #22d3ee (青色) | 客户端应用、UI、浏览器 |
| 后端 | rgba(18, 72, 55, 0.4) | #34d399 (翡翠绿) | 服务器、API、微服务 |
| 数据库 | rgba(72, 30, 100, 0.4) | #a78bfa (紫色) | 数据库、存储、缓存 |
| 云服务 | rgba(110, 50, 18, 0.35) | #fbbf24 (琥珀色) | AWS/阿里云/腾讯云服务 |
| 安全组件 | rgba(130, 25, 50, 0.4) | #fb7185 (玫红色) | 认证、安全组、加密 |
| 消息队列 | rgba(251, 146, 60, 0.3) | #fb923c (橙色) | Kafka、RabbitMQ、事件总线 |
| 外部/通用 | rgba(38, 37, 30, 0.35) | #94a3b8 (石板灰) | 外部系统、第三方服务 |
| AI/智能 | rgba(80, 30, 120, 0.4) | #c084fc (亮紫) | AI 服务、LLM、模型 |
所有文字使用 JetBrains Mono 等宽字体（技术风格）：
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
排版规范（参考 Cursor 紧凑间距 + Claude 宽松行高）：
letter-spacing: -0.02em, line-height: 1.6letter-spacing: 0.04em背景： 深色模式 #141413 (温暖近黑) / 浅色模式 #f5f4ed (羊皮纸)，带微妙网格纹理：
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" class="grid-line" stroke-width="0.5"/>
</pattern>
组件方框： 圆角矩形（rx="8"），1.5px 描边，半透明填充。
阴影系统（Claude ring shadow + Cursor ambient）：
rgba(0,0,0,0.14) 0px 4px 16px, rgba(38,37,30,0.1) 0px 0px 0px 1pxrgba(0,0,0,0.05) 0px 4px 24px, rgba(38,37,30,0.08) 0px 0px 0px 1px圆角体系：
8px（Cursor 标准）12px（Airtable 按钮 / Claude 舒适圆角）6px（Webflow 紧凑）安全组： 虚线描边（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" class="arrowhead-color" />
</marker>
箭头层级（Z-order）： 连接箭头要在 SVG 中较早绘制（背景网格之后），这样它们会渲染在组件方框之下。SVG 元素按文档顺序绘制。
透明填充遮罩技巧： 组件方框使用半透明填充，箭头在后面会透出来。为了完全遮住箭头，在半透明样式矩形之前绘制一个不透明背景矩形。使用 class="mask-bg" 以适配主题：
<!-- 不透明背景遮盖箭头（自动适配主题） -->
<rect x="X" y="Y" width="W" height="H" rx="6" class="mask-bg"/>
<!-- 半透明样式组件叠加在上面 -->
<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>
关键： 垂直堆叠组件时确保间距正确，避免重叠：
示例布局：
组件 A: y=70, height=60 → 结束于 y=130
间隙: y=130 到 y=170 → 40px 间隙，消息队列放 y=140 (20px 高)
组件 B: y=170, height=60 → 结束于 y=230
关键： 图例必须放在所有边界框（区域边界、集群边界、安全组）之外。
<!-- 带主题适配的完整组件方框 -->
<rect x="X" y="Y" width="W" height="H" rx="6" class="mask-bg"/>
<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" class="text-primary" font-size="11" font-weight="600" text-anchor="middle">组件名称</text>
<text x="CENTER_X" y="Y+36" class="text-secondary" font-size="9" text-anchor="middle">技术说明</text>
关键： 使用 CSS class 而非硬编码颜色值，以支持主题切换：
class="mask-bg" - 不透明遮罩背景（深色: #1a1a18，浅色: #faf9f5）class="text-primary" - 主文字（深色: #faf9f5，浅色: #141413）class="text-secondary" - 副文字（深色: #b0aea5，浅色: #5e5d59）class="grid-line" - 网格线描边class="arrowhead-color" - 箭头头部填充fill="#22d3ee"）不使用 class，在两种主题下保持不变<div class="card">
<div class="card-header">
<div class="card-dot COLOR"></div>
<h3>卡片标题</h3>
</div>
<ul>
<li>- 要点一</li>
<li>- 要点二</li>
</ul>
</div>
text-anchor="middle" 居中对齐复制并自定义 assets/template.html 模板。关键自定义点：
<title> 和页眉文字1000 x 680）始终生成一个独立的 .html 文件，包含：
前端框架 + 后端 API + 数据库 + 缓存 + 认证
API 网关 + 多个微服务 + 消息队列 + 服务注册发现 + 分布式数据库
CDN + 负载均衡 + 容器编排 + 云数据库 + 对象存储 + 监控
API 网关 + 函数计算 + 云数据库 + 对象存储 + 消息队列
数据源 + 数据采集 + 流处理 + 数据仓库 + 可视化
AI 全能图表生成器（扩展版）。一键生成 35+ 种设计美观的图表 HTML 文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成 XX 图"、"做个架构图/流程图/思维导图/时序图/甘特图/漏斗图/桑基图/用户旅程/商业模式画布/SWOT/竞品分析/产品路线图/组织架构/ER 图/C4 图/BPMN/状态机/决策树/泳道图/部署图/网络拓扑/威胁建模/价值链/OKR 树/韦恩图/热力图/KPI 看板/信息图/概念图"、"帮我可视化"、"XX 风格的图表"、"换成 XX 风格"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。
生成设计美观的图表 HTML 文件。支持 10 种图表类型：流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成商业模式画布"、"做个架构图"、"画 ER 图"、"帮我画个流程图"、"生成用户旅程图"、"做个思维导图"、"竞品分析图"、"SWOT 分析图"、"产品路线图"、"组织架构图"、"商业模式画布"、"XX 风格的图表"、"帮我可视化"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。
将文本内容进行逻辑拆解，生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文，一次可拆解多张图。