智能图表生成助手，支持流程图、架构图、时序图等专业图表创建。 触发场景: (1) 用户需要创建流程图、架构图、时序图等 (2) 用户需要论文配图、技术文档插图 (3) 用户询问"帮我画个图"、"画个流程图"、"做个架构图" 支持: 论文配图、技术文档、演示汇报、教学材料等场景
静态 HTML + CDN
生成独立的 HTML 文件，内嵌 React 18 + Tailwind CSS 4 + html2canvas：
| 类型 | 英文 | 适用场景 | |------|------|----------| | 流程图 | Flowchart | 算法步骤、业务流程、���策逻辑 | | 架构图 | Architecture | 系统设计、模块关系、技术栈 | | 时序图 | Sequence | API 调用、消息传递、交互流程 | | 类图 | Class | 面向对象设计、数据模型 | | 思维导图 | Mindmap | 概念整理、知识结构 |
在开始任何操作前，必须：
1. 识别任务类型
2. 收集素材
3. 主动澄清不明确的需求
重要: 当需求不够明确时，必须使用 AskUserQuestion 工具询问用户，并等待用户回答后才能继续。 禁止: 自己假设用户的回答然后继续执行。
对于创建图表任务，如果用户没有明确指定，必须询问：
使用 AskUserQuestion 工具询问以下问题：
问题1: 图表类型是什么？
- 选项: 流程图 / 架构图 / 时序图 / 其他
问题2: 图表用途？
- 选项: 论文配图 / 技术文档 / 演示汇报 / 其他
问题3: 视觉风格偏好？
- 选项: 学术简约（黑白）/ 商务专业（蓝色系）/ 彩色活泼 / 极简现代
调用 AskUserQuestion 后，必须停止并等待用户回答。绝对不能自己假设答案继续执行。
1. 生成图表结构大纲
## 图表大纲
### 图表类型: [类型]
### 节点列表:
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. 生成修改摘要
## 修改摘要
本次修改共涉及 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 文档时：
当用户提供图片参考时：
figures/{描述性名称}.htmlfigures/login-flow.html, figures/system-arch.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>
无需安装任何依赖，只需要：
Category:other