多类型绘图工具
任务目标
-
本 Skill 用于：根据用户需求生成多种类型的图表，包括思维导图、流程图、数据可视化图表等
-
能力包含：
-
Mermaid 图表绘制（流程图、序列图、甘特图等）
-
ECharts 数据可视化（柱状图、折线图、饼图等）
-
Mindmap 思维导图
-
DrawIO 通用绘图
-
Flowchart 流程图（基于 Mermaid）
-
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