diagram-generatorlisted
Install: claude install-skill wu529778790/shenzjd-skills
# Diagram Generator
从自然语言描述生成架构图、流程图、时序图,支持 Mermaid 和 Excalidraw 格式。
## Overview
根据用户描述自动生成可渲染的图表文件。优先使用 Mermaid(语法简洁、渲染广泛),复杂布局用 Excalidraw。生成后自动验证语法正确性。
## When to Use
- 用户想画架构图、流程图、时序图
- 用户提到 diagram、flowchart、architecture、ER diagram
- 用户想可视化系统设计、数据流、API 调用链
- 用户输入 `/diagram-generator`
**When NOT to Use:**
- 用户只是想看代码结构(用 AST 分析)
- 用户想要 UI 原型/线框图(那是另一个领域)
- 用户想要编辑已有图表(提供原始文件即可)
## Core Pattern
### Step 1: 确定图表类型
| 用户描述关键词 | 推荐图表类型 | Mermaid 语法 |
|--------------|-------------|-------------|
| 架构、组件、部署 | 架构图 | `graph TB` |
| 流程、步骤、判断 | 流程图 | `flowchart TD` |
| 调用、请求、响应 | 时序图 | `sequenceDiagram` |
| 表、关系、外键 | ER 图 | `erDiagram` |
| 状态、生命周期 | 状态图 | `stateDiagram-v2` |
| 类、继承、实现 | 类图 | `classDiagram` |
| 甘特图、排期 | 甘特图 | `gantt` |
### Step 2: 收集信息
```bash
# 如果是项目架构图,先扫描项目结构
ls -la
find . -name "*.ts" -o -name "*.go" -o -name "*.py" | head -20
cat package.json 2>/dev/null | python3 -c "import sys,json; d=json.load(sys.stdin); print(list(d.get('dependencies',{}).keys())[:10])" 2>/dev/null
```
提取:
- 项目类型和技术栈
- 模块/服务划分
- 数据流向
- 外部依赖
### Step 3: 生成图表
**方案 A: Mermaid(推荐)**
生成 `.mmd` 文件,可直接在 GitHub/Notion/Typora 渲染:
```mermaid
graph TB
subgraph Frontend
A[React App] --> B[API Client]
end
subgraph Backend
C[Express API] --> D[(PostgreSQL)]
C --> E[Redis Cache]
end
B -->|HTTP| C
```
**方案 B: Excalidraw**
生成 `.excalidraw` JSON 文件,适合需要自定义布局的复杂架构图:
```json
{
"type": "excalidraw",
"version": 2,
"elements": [...]
}
```
### Ste