Ubuntu
3.0 KiB
3.0 KiB
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），除非明确要求，否则不要使用。
优先使用以下免费方式：
-
Mermaid 文本（推荐）
```mermaid flowchart TD A[前端] --> B[后端] B --> C[(数据库)] -
ASCII 艺术（极简场景）
+--------+ +--------+ +--------+ | 前端 | --> | 后端 | --> | 数据库 | +--------+ +--------+ +--------+
何时使用本 skill：
- ✅ 明确要求"精美架构图"、"专业可视化"、"深色主题"
- ✅ 需要导出独立 HTML 文件（给客户展示）
- ✅ 需要截图用于小红书/公众号/技术分享
- ✅ 复杂架构，Mermaid/ASCII 无法表达
工作方式
- 接收用户描述（系统组件、关系、类型）
- 调用 AI API（DeepSeek/Moonshot）生成 SVG 代码
- 嵌入模板生成独立 HTML 文件
- 返回文件路径
设计系统
配色方案
| 组件类型 | 填充色 | 边框色 |
|---|---|---|
| 前端 | 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。