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 工具询问用户，并等待用户回答后才能继续。禁止: 自己假设用户的回答然后继续执行。

对于创建图表任务，如果用户没有明确指定，必须询问：

code

使用 AskUserQuestion 工具询问以下问题：

问题1: 图表类型是什么？
- 选项: 流程图 / 架构图 / 时序图 / 其他

问题2: 图表用途？
- 选项: 论文配图 / 技术文档 / 演示汇报 / 其他

问题3: 视觉风格偏好？
- 选项: 学术简约（黑白）/ 商务专业（蓝色系）/ 彩色活泼 / 极简现代

调用 AskUserQuestion 后，必须停止并等待用户回答。绝对不能自己假设答案继续执行。

阶段二：结构规划

1. 生成图表结构大纲

markdown

## 图表大纲

### 图表类型: [类型]

### 节点列表:
1. [节点类型]: [内容]
2. [节点类型]: [内容]
...

### 连接关系:
- 1 → 2
- 2 → 3 (条件标签)
...

2. 等待用户确认

使用 AskUserQuestion 工具询问：

code

问题: 大纲是否符合您的预期？
- 选项: 确认，开始设计 / 需要调整大纲 / 添加更多内容

等待用户回答后再继续。

阶段三：设计构思

1. 选择/应用主题

可用预设主题：

•academic - 学术主题（黑白配色，简洁风格）
•corporate - 商务主题（蓝色配色，专业风格）
•colorful - 彩色主题（多彩配色，活泼风格）
•minimal - 极简主题（灰度配色，极简风格）

2. 规划视觉呈现

确定：

•节点样式（圆角、阴影、边框）
•连线样式（颜色、粗细、箭头）
•字体大小与间距
•整体布局方向（水平/垂直）

阶段四：生成图表

1. 生成 HTML 文件

参考 references/react-components.md 和 templates/ 目录下的模板。

2. 保存文件

保存到用户工作目录的 figures/ 文件夹：

code

figures/
└── {描述性名称}.html

3. 告知用户

code

图表已生成���

文件位置: figures/{name}.html

请用浏览器打开此文件预览，点击"导出 PNG"按钮可下载图片。

⚠️ 注意：由于应用内限制，PNG 导出功能需要在 Chrome/Edge 浏览器中打开 HTML 文件才能使用。

阶段五：迭代修改

1. 接收用户反馈

2. 定位修改位置

•使用节点编号
•使用节点内容
•使用元素类型（标题/节点/连线）

3. 增量更新

直接修改 HTML 文件中的 React 组件代码。

4. 生成修改摘要

markdown

## 修改摘要

本次修改共涉及 N 处变更：

1. [节点/位置]: [原内容] → [新内容]
2. [样式]: [调整说明]

5. 询问后续需求

使用 AskUserQuestion 工具询问：

code

问题: 接下来您想？
- 选项: 继续修改其他部分 / 调整刚才的修改 / 确认完成

等待用户回答后再继续。

参考文档

文档	路径	内容
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 风格分块
•函数短小，只做一件事