Ubuntu
100 lines
3.0 KiB
Markdown
100 lines
3.0 KiB
Markdown
---
|
||
name: architecture-diagram
|
||
description: 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 文本**（推荐）
|
||
```markdown
|
||
```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。
|