nanocode/skills/architecture-diagram/SKILL.md

name, description

name	description
architecture-diagram	Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files. ⚠️ IMPORTANT - This skill consumes AI tokens and should ONLY be used when explicitly requested. For most diagram needs, use Mermaid syntax or ASCII art instead (no token cost).

Architecture Diagram Generator

生成精美的深色主题系统架构图（独立 HTML/SVG 文件）。

⚠️ 使用警告

本 skill 消耗 AI token（DeepSeek/Moonshot），除非明确要求，否则不要使用。

优先使用以下免费方式：

1. Mermaid 文本（推荐）

   ```mermaid
   flowchart TD
       A[前端] --> B[后端]
       B --> C[(数据库)]
   

2. ASCII 艺术（极简场景）

   +--------+     +--------+     +--------+
   | 前端   | --> | 后端   | --> | 数据库 |
   +--------+     +--------+     +--------+
   

何时使用本 skill：

• ✅ 明确要求"精美架构图"、"专业可视化"、"深色主题"
• ✅ 需要导出独立 HTML 文件（给客户展示）
• ✅ 需要截图用于小红书/公众号/技术分享
• ✅ 复杂架构，Mermaid/ASCII 无法表达

工作方式

1. 接收用户描述（系统组件、关系、类型）
2. 调用 AI API（DeepSeek/Moonshot）生成 SVG 代码
3. 嵌入模板生成独立 HTML 文件
4. 返回文件路径

设计系统

配色方案

组件类型	填充色	边框色
前端	rgba(8, 51, 68, 0.4)	#22d3ee (青色)
后端	rgba(6, 78, 59, 0.4)	#34d399 (绿色)
数据库	rgba(76, 29, 149, 0.4)	#a78bfa (紫色)
云服务	rgba(120, 53, 15, 0.3)	#fbbf24 (琥珀色)
安全	rgba(136, 19, 55, 0.4)	#fb7185 (玫瑰色)
消息队列	rgba(251, 146, 60, 0.3)	#fb923c (橙色)
通用/外部	rgba(30, 41, 59, 0.5)	#94a3b8 (灰色)

视觉规范

• 背景: #020617 (深蓝黑) + 网格图案
• 字体: JetBrains Mono (技术感等宽字体)
• 组件: 圆角矩形，半透明填充，1.5px 边框
• 连线: 灰色箭头，层级在组件下方
• 图例: 放置在边界框外部

使用方法

用户: "画 fumamxCRM 的架构图，要求精美的深色主题"
→ 使用本 skill

用户: "fumamxCRM 有哪些表？"
→ 不使用本 skill，直接回答

用户: "画个简单的流程图"
→ 优先使用 Mermaid

输出格式

生成自包含的 HTML 文件：

• 内嵌 CSS（无外部样式表，除 Google Fonts）
• 内联 SVG（无外部图片）
• 无 JavaScript（纯 CSS 动画）
• 可直接在浏览器打开

Token 成本

复杂度	预估 Token	费用（DeepSeek）
简单（3-5组件）	~2K	¥0.003
中等（6-10组件）	~4K	¥0.006
复杂（10+组件）	~8K+	¥0.012+

参考

基于 https://github.com/Cocoon-AI/architecture-diagram-generator 移植，适配 DeepSeek/Moonshot API。