架构图绘制
暗色主题 SVG 架构图/云架构/基础设施图表
架构图绘制技能
生成专业的暗色主题技术架构图，输出为内嵌 SVG 图形的独立 HTML 文件。无需外部工具、无需 API 密钥、无需渲染库 —— 只需编写 HTML 文件并在浏览器中打开即可。
适用范围
最适用于：
软件系统架构（前端 / 后端 / 数据库层）
云基础设施（VPC、区域、子网、托管服务）
微服务 / 服务网格拓扑
数据库 + API 关系图、部署图
任何符合暗色网格背景风格的科技基础设施主题
其他主题请优先考虑：
物理、化学、数学、生物等科学主题
实物对象（车辆、硬件、解剖图、剖面图）
平面图、叙事旅程、教材/教科书风格配图
手绘白板草图（可考虑 excalidraw）
动画解说（可考虑动画技能）
如果该主题有更专业的技能可用，请优先选择。如果没有合适的技能，本技能也可作为通用 SVG 图表的兜底方案 —— 只是输出会带有下文所述的暗色科技美学风格。
基于 Cocoon AI 的 architecture-diagram-generator（MIT 协议）。
工作流程
用户描述其系统架构（组件、连接、技术）
按照下述设计体系生成 HTML 文件
使用 write_file 保存为 .html 文件（例如 ~/architecture-diagram.html）
用户在任何浏览器中打开 —— 可离线运行，无依赖
输出位置
将图表保存到用户指定的路径，或默认保存到当前工作目录：
./[project-name]-architecture.html
预览
保存后，建议用户打开文件：
# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html
设计体系与视觉语言
配色方案（语义映射）
使用特定的 rgba 填充色与十六进制描边色对组件进行分类：
| 组件类型 | 填充（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（等宽字体），从 Google Fonts 加载
字号：12px（名称）、9px（子标签）、8px（注释）、7px（微小标签）
背景：Slate-950（#020617）搭配微妙的 40px 网格图案
技术实现细节
组件渲染
组件为圆角矩形（rx="6"），描边 1.5px。为防止箭头透过半透明填充显示出来，使用双层矩形遮罩技术：
先绘制不透明的背景矩形（#0f172a）
再在上方绘制半透明的样式化矩形
连接规则
Z 轴顺序：在 SVG 中*尽早*绘制箭头（网格之后），使其渲染在组件框后面
箭头：通过 SVG markers 定义
安全流：使用玫红色虚线（#fb7185）
边界框：
*安全组：*虚线（4,4），玫红色
*区域：*大虚线（8,4），琥珀色，rx="12"
间距与布局逻辑
标准高度：60px（服务）；80-120px（大型组件）
垂直间距：组件之间最小 40px
消息总线：必须放置在服务之间的*空隙中*，不得与之重叠
图例位置：至关重要。必须放置在所有边界框之外。计算所有边界框的最低 Y 坐标，并将图例放置在至少低于该坐标 20px 的位置。
文档结构
生成的 HTML 文件采用四部分布局：
页眉：带脉冲圆点指示器的标题与副标题
主 SVG：图表包含在圆角边框卡片内
摘要卡片：图表下方三张卡片的网格，用于展示概要信息
页脚：极简元数据
信息卡片模式
输出要求
单一文件：一个自包含的 .html 文件
无外部依赖：所有 CSS 和 SVG 必须内联（Google Fonts 除外）
不使用 JavaScript：所有动画（如脉冲圆点）均使用纯 CSS 实现
兼容性：必须在任何现代 Web 浏览器中正确渲染
模板参考
加载完整 HTML 模板以获取精确的结构、CSS 和 SVG 组件示例：
skill_view(name="architecture-diagram", file_path="templates/template.html")
模板包含每种组件类型（前端、后端、数据库、云、安全）、箭头样式（标准、虚线、曲线）、安全组、区域边界和图例的可运行示例 —— 生成图表时请将其作为结构参考。
评论区