架构图绘制

暗色主题 SVG 架构图/云架构/基础设施图表

架构图绘制技能

生成专业的暗色主题技术架构图，输出为内嵌 SVG 图形的独立 HTML 文件。无需外部工具、无需 API 密钥、无需渲染库 —— 只需编写 HTML 文件并在浏览器中打开即可。

适用范围

最适用于：

其他主题请优先考虑：

如果该主题有更专业的技能可用，请优先选择。如果没有合适的技能，本技能也可作为通用 SVG 图表的兜底方案 —— 只是输出会带有下文所述的暗色科技美学风格。

基于 Cocoon AI 的 architecture-diagram-generator（MIT 协议）。

工作流程

输出位置

将图表保存到用户指定的路径，或默认保存到当前工作目录：

./[project-name]-architecture.html

预览

保存后，建议用户打开文件：

# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html

设计体系与视觉语言

配色方案（语义映射）

使用特定的 rgba 填充色与十六进制描边色对组件进行分类：

字体与背景

技术实现细节

组件渲染

组件为圆角矩形（rx="6"），描边 1.5px。为防止箭头透过半透明填充显示出来，使用双层矩形遮罩技术：

连接规则

间距与布局逻辑

文档结构

生成的 HTML 文件采用四部分布局：

信息卡片模式

  

    

    
Title
  
  

    
• Item one
    
• Item two
  

输出要求

模板参考

加载完整 HTML 模板以获取精确的结构、CSS 和 SVG 组件示例：

skill_view(name="architecture-diagram", file_path="templates/template.html")

模板包含每种组件类型（前端、后端、数据库、云、安全）、箭头样式（标准、虚线、曲线）、安全组、区域边界和图例的可运行示例 —— 生成图表时请将其作为结构参考。