Diagram 智能图表助手
核心原则
- 五阶段工作流: 需求理解 → 结构规划 → 设计构思 → 生成图表 → 迭代修改
- 增量修改优先: 只修改需要修改的部分，保留原图表完整性
- 主动澄清需求: 不确定时先问，不要猜测用户意图
- 等待用户回答: 使用 AskUserQuestion 后必须停止等待，绝对禁止自己假设答案继续执行
技术方案
静态 HTML + CDN
生成独立的 HTML 文件，内嵌 React 18 + Tailwind CSS 4 + html2canvas：
- 零依赖，只需浏览器
- 跨平台，Windows/Mac/Linux 通用
- 一键导出 PNG
任务识别与路由
支持的图表类型
| 类型 | 英文 | 适用场景 |
|---|---|---|
| 流程图 | Flowchart | 算法步骤、业务流程、���策逻辑 |
| 架构图 | Architecture | 系统设计、模块关系、技术栈 |
| 时序图 | Sequence | API 调用、消息传递、交互流程 |
| 类图 | Class | 面向对象设计、数据模型 |
| 思维导图 | Mindmap | 概念整理、知识结构 |
五阶段工作流
阶段一：需求理解
在开始任何操作前，必须：
1. 识别任务类型
- 流程图 / 架构图 / 时序图 / 类图 / 思维导图 / 自定义
2. 收集素材
- 读取用户提供的文档 (PDF/DOCX/MD)
- 分析用户上传的图片
- 整理关键信息点
3. 主动澄清不明确的需求
重要: 当需求不够明确时，必须使用 AskUserQuestion 工具询问用户，并等待用户回答后才能继续。 禁止: 自己假设用户的回答然后继续执行。
对于创建图表任务，如果用户没有明确指定，必须询问：
使用 AskUserQuestion 工具询问以下问题： 问题1: 图表类型是什么？ - 选项: 流程图 / 架构图 / 时序图 / 其他 问题2: 图表用途？ - 选项: 论文配图 / 技术文档 / 演示汇报 / 其他 问题3: 视觉风格偏好？ - 选项: 学术简约（黑白）/ 商务专业（蓝色系）/ 彩色活泼 / 极简现代
调用 AskUserQuestion 后，必须停止并等待用户回答。绝对不能自己假设答案继续执行。
阶段二：结构规划
1. 生成图表结构大纲
markdown## 图表大纲 ### 图表类型: [类型] ### 节点列表: 1. [节点类型]: [内容] 2. [节点类型]: [内容] ... ### 连接关系: - 1 → 2 - 2 → 3 (条件标签) ...
2. 等待用户确认
使用 AskUserQuestion 工具询问：
问题: 大纲是否符合您的预期？ - 选项: 确认，开始设计 / 需要调整大纲 / 添加更多内容
等待用户回答后再继续。
阶段三：设计构思
1. 选择/应用主题
可用预设主题：
academic- 学术主题（黑白配色，简洁风格）corporate- 商务主题（蓝色配色，专业风格）colorful- 彩色主题（多彩配色，活泼风格）minimal- 极简主题（灰度配色，极简风格）
2. 规划视觉呈现
确定：
- 节点样式（圆角、阴影、边框）
- 连线样式（颜色、粗细、箭头）
- 字体大小与间距
- 整体布局方向（水平/垂直）
阶段四：生成图表
1. 生成 HTML 文件
参考 references/react-components.md 和 templates/ 目录下的模板。
2. 保存文件
保存到用户工作目录的 figures/ 文件夹：
figures/ └── {描述性名称}.html
3. 告知用户
图表已生成��� 文件位置: figures/{name}.html 请用浏览器打开此文件预览，点击"导出 PNG"按钮可下载图片。 ⚠️ 注意：由于应用内限制，PNG 导出功能需要在 Chrome/Edge 浏览器中打开 HTML 文件才能使用。
阶段五：迭代修改
1. 接收用户反馈
2. 定位修改位置
- 使用节点编号
- 使用节点内容
- 使用元素类型（标题/节点/连线）
3. 增量更新
直接修改 HTML 文件中的 React 组件代码。
4. 生成修改摘要
markdown## 修改摘要 本次修改共涉及 N 处变更： 1. [节点/位置]: [原内容] → [新内容] 2. [样式]: [调整说明]
5. 询问后续需求
使用 AskUserQuestion 工具询问：
问题: 接下来您想？ - 选项: 继续修改其他部分 / 调整刚才的修改 / 确认完成
等待用户回答后再继续。
参考文档
| 文档 | 路径 | 内容 |
|---|---|---|
| React 组件 | references/react-components.md | 节点、连线组件 |
| Tailwind 样式 | references/tailwind-styles.md | 主题、样式类 |
| 设计原则 | references/design-principles.md | 论文图表规范 |
| 工作流指南 | WORKFLOW.md | 多轮修改详细流程 |
模板文件
| 模板 | 路径 | 用途 |
|---|---|---|
| 流程图 | templates/flowchart.html | 算法、业务流程 |
| 架构图 | templates/architecture.html | 系统设计 |
| 时序图 | templates/sequence.html | API 调用、消息传递 |
| 类图 | templates/class.html | 面向对象设计 |
| 思维导图 | templates/mindmap.html | 概念整理、知识结构 |
素材处理
PDF 文档处理
当用户提供 PDF 文档时：
- 读取文档：使用 Read 工具读取 PDF 内容
- 提取信息：识别关键信息点（标题、步骤、流程、关系）
- 整理结构：将信息整理为图表结构大纲
- 确认理解：使用 AskUserQuestion 确认提取的信息是否准确
图片物料处理
当用户提供图片参考时：
- 查看图片：使用 Read 工具查看图片内容
- 分析结构：识别图片中的图表类型、节点、连接关系
- 提取元素：提取可复用的设计元素（颜色、布局、风格）
- 生成新图：基于分析结果生成新的图表
处理原则
- 不盲目复制：理解素材意图，而非机械复制
- 主动确认：提取信息后必须与用户确认
- 增量整合：多个素材时，逐步整合信息
输出约定
- 目录: 用户工作目录下的
figures/ - 命名:
{描述性名称}.html - 示例:
figures/login-flow.html,figures/system-arch.html
HTML 文件结构
html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>图表标题</title> <!-- CDN 依赖 --> <script src="https://cdn.tailwindcss.com"></script> <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> // React 组件代码 </script> </body> </html>
依赖
无需安装任何依赖，只需要：
- 现代浏览器（Chrome/Firefox/Edge/Safari）
- 网络连接（加载 CDN）
Code Style Guidelines
- Write concise code
- Avoid verbose variable names and redundant operations
- 中文注释，ASCII 风格分块
- 函数短小，只做一件事
