← ClaudeAtlas

diagram-generatorlisted

Use when user wants to create architecture diagrams, flowcharts, sequence diagrams, ER diagrams, or visualize system design, workflows, and data pipelines
wu529778790/shenzjd-skills · ★ 0 · AI & Automation · score 68
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