多类型绘图工具
任务目标
- 本 Skill 用于：根据用户需求生成多种类型的图表，包括思维导图、流程图、数据可视化图表等
- 能力包含：
1. Mermaid 图表绘制（流程图、序列图、甘特图等） 2. ECharts 数据可视化（柱状图、折线图、饼图等） 3. Mindmap 思维导图 4. DrawIO 通用绘图 5. Flowchart 流程图（基于 Mermaid） 6. GeoGebra 数学绘图（函数、几何图形、代数方程）
- 触发条件：用户表达"画个图"、"绘制图表"、"生成流程图"等需求
前置准备
依赖说明
- Python 依赖包：
- pyecharts>=2.0.0：用于生成 ECharts 图表 - pillow>=10.0.0：图像处理库
- 系统依赖（需提前安装）：
- @mermaid-js/mermaid-cli：用于渲染 Mermaid 图表 - markmap-cli：用于渲染思维导图
安装系统依赖
在使用 Skill 之前，需要安装以下系统工具：
# 安装 Mermaid CLI
npm install -g @mermaid-js/mermaid-cli
# 安装 Markmap CLI
npm install -g markmap-cli
# 验证安装
mmdc --version
markmap --version输出目录准备
# 创建输出目录
mkdir -p ./charts-output操作步骤
标准流程
- 需求分析与类型选择
- 智能体理解用户绘图需求，确定图表类型： - 层级关系、知识结构、脑图整理 → Mindmap - 流程逻辑、步骤关系、业务流程 → Flowchart (Mermaid) - 时序交互、API调用、消息传递 → Mermaid Sequence - 数据对比、趋势分析、统计图表 → ECharts - 系统架构、网络拓扑、部署图、ER图 → DrawIO - 数学函数、几何图形、代数方程 → GeoGebra - 确定输出格式（PNG/SVG/HTML）
- 生成图表配置
- 根据选定的图表类型，智能体生成相应的文本配置： - Mermaid：生成 mermaid 语法 - ECharts：生成 option 配置 JSON - Mindmap：生成 Markdown 格式内容 - DrawIO：生成 XML 格式内容 - GeoGebra：生成命令列表或数学表达式 - 参考 references/ 中的语法指南
- 调用脚本渲染
- 根据图表类型调用对应的渲染脚本： - Mermaid 图表：scripts/render_mermaid.py - ECharts 图表：scripts/render_echarts.py - 思维导图：scripts/render_mindmap.py - DrawIO 图表：scripts/render_drawio.py - GeoGebra 图表：scripts/render_geogebra.py - 指定输出路径和格式
- 结果验证与交付
- 检查生成的图表文件 - 确认格式和内容符合预期 - 将输出文件路径提供给用户
可选分支
- 当需要 交互式图表：使用 ECharts 生成 HTML 格式
- 当需要 矢量图：选择 SVG 输出格式
- 当需要 高质量位图：选择 PNG 并设置高分辨率
资源索引
渲染脚本
- Mermaid 渲染：见 scripts/render_mermaid.py
- 用途：将 Mermaid 语法渲染为 PNG/SVG - 参数：--input（输入文件）、--output（输出文件）、--format（格式：png/svg）
- ECharts 渲染：见 scripts/render_echarts.py
- 用途：将 ECharts 配置渲染为 HTML（交互式图表） - 参数：--config（配置文件）、--output（输出文件）
- Mindmap 渲染：见 scripts/render_mindmap.py
- 用途：将 Markdown 格式的思维导图渲染为 SVG/PNG - 参数：--input（输入文件）、--output（输出文件）、--format（格式：svg/png）
- DrawIO 图表：见 scripts/render_drawio.py
- 用途：将 DrawIO XML 渲染为 HTML（交互式图表） - 参数：--input（输入文件）、--output（输出文件）
- GeoGebra 渲染：见 scripts/render_geogebra.py
- 用途：将 GeoGebra 命令渲染为交互式 HTML - 参数：--input（输入文件）、--output（输出文件）
参考文档
- Mermaid 语法：见 references/mermaid-syntax.md
- 何时读取：生成 Mermaid 图表时
- ECharts 配置：见 references/echarts-guide.md
- 何时读取：生成 ECharts 图表时
- Mindmap 格式：见 references/mindmap-guide.md
- 何时读取：生成思维导图时
- DrawIO 格式：见 references/drawio-guide.md
- 何时读取：生成 DrawIO 图表时
- GeoGebra 语法：见 references/geogebra-guide.md
- 何时读取：生成数学函数图或几何图形时
示例资源
- 图表示例：见 assets/examples/
- 包含各种图表类型的示例配置文件
注意事项
智能体能力
- 智能体负责理解用户需求、生成图表的文本配置、选择合适的图表类型
- 智能体应充分利用其语言理解和创作能力，生成高质量的图表内容
脚本使用
- 脚本仅负责技术性渲染工作，接收文本输入并生成图像文件
- 所有参数必须通过命令行参数传递，不要在脚本中硬编码
- 确保脚本具有适当的错误处理和日志输出
格式选择指南
- Mindmap：适合层级结构、知识梳理、项目规划、概念关系
- Mermaid Flowchart：适合简单流程图、决策流程、算法流程
- Mermaid Sequence：适合时序图、API调用、消息传递、交互流程
- Mermaid 其他：甘特图（项目进度）、状态图、类图、ER图（简单）
- ECharts：适合数据可视化（柱状图、折线图、饼图、散点图等）
- DrawIO：适合系统架构图、网络拓扑、部署图、ER图（复杂）、UML图
- GeoGebra：适合数学函数、几何图形、代数方程、统计分析
类型选择示例
- "项目计划" → Mindmap
- "用户注册流程" → Mermaid Flowchart
- "API调用时序" → Mermaid Sequence
- "季度销售额" → ECharts 柱状图
- "系统架构图" → DrawIO
- "函数图像" → GeoGebra
输出管理
- 建议将输出文件统一放在
./charts-output/目录下 - 使用有意义的文件名，如
mindmap-project-plan.svg、flowchart-api-call.png - 注意输出格式的适用场景（SVG 适合矢量编辑，PNG 适合展示）
使用示例
示例 1：绘制流程图
需求：绘制一个用户注册流程图
执行方式：
- 智能体生成 Mermaid flowchart 语法
- 调用
scripts/render_mermaid.py --input temp.mmd --output./charts-output/registration-flow.png --format png
关键参数：
- 输入：Mermaid 语法的
.mmd文件 - 输出：PNG 格式图片
示例 2：生成数据可视化图表
需求：生成月度销售数据的柱状图（包含多个产品系列）
执行方式：
- 智能体生成 ECharts option 配置 JSON（在一个配置文件中包含所有系列）
- 调用
scripts/render_echarts.py --config sales-data.json --output./charts-output/sales-chart.html
关键说明：
- 所有系列应放在同一个配置文件的
series数组中 - 不要为每个系列创建单独的配置文件
- 示例：
assets/examples/echarts-multi-series.json
示例 3：创建思维导图
需求：为项目规划创建思维导图
执行方式：
- 智能体生成 Markdown 格式的思维导图内容
- 调用
scripts/render_mindmap.py --input project-plan.md --output./charts-output/project-mindmap.svg --format svg
关键参数：
- 输入：Markdown 格式的
.md文件 - 输出：SVG 格式（矢量图）
示例 4：绘制系统架构图
需求：绘制微服务系统架构图（包含前端、后端、数据库、缓存等组件）
执行方式：
- 智能体生成 DrawIO XML 格式
- 调用
scripts/render_drawio.py --input architecture.xml --output./charts-output/system-architecture.html
关键参数：
- 输入：DrawIO XML 格式的
.xml文件 - 输出：HTML 格式（交互式图表，支持导出 SVG/PNG）
- 特点：可在浏览器中直接查看、缩放、拖动
示例 5：绘制数学函数图
需求：绘制函数 y = x² 和 y = sin(x) 的图像
执行方式：
- 智能体生成 GeoGebra 命令列表
- 调用
scripts/render_geogebra.py --input function-commands.txt --output./charts-output/function-plot.html
关键参数：
- 输入：包含 GeoGebra 命令的文本文件
- 输出：HTML 格式（交互式 GeoGebra 图形）
重要提示
ECharts 多系列图表
- ✅ 正确做法：将所有系列放在一个配置文件的
series数组中{"series": [{"name": "系列1", "type": "bar", "data": [...]}, {"name": "系列2", "type": "bar", "data": [...]}, {"name": "系列3", "type": "bar", "data": [...]}]} - ❌ 错误做法：为每个系列创建单独的配置文件
- 不要创建 series1.json、series2.json、series3.json - 这会生成多个独立的图表，而不是一个图表中的多个系列
参考示例
- 单系列示例：
assets/examples/echarts-bar-standard.json - 多系列示例：
assets/examples/echarts-multi-series.json - 折线图多系列：
assets/examples/echarts-line-standard.json