Multi Chart Draw

多类型绘图工具

任务目标

• 本 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

操作步骤

标准流程

1. 需求分析与类型选择

   • 智能体理解用户绘图需求，确定图表类型：
     • 层级关系、知识结构、脑图整理 → Mindmap
     • 流程逻辑、步骤关系、业务流程 → Flowchart (Mermaid)
     • 时序交互、API调用、消息传递 → Mermaid Sequence
     • 数据对比、趋势分析、统计图表 → ECharts
     • 系统架构、网络拓扑、部署图、ER图 → DrawIO
     • 数学函数、几何图形、代数方程 → GeoGebra
   • 确定输出格式（PNG/SVG/HTML）

2. 生成图表配置

   • 根据选定的图表类型，智能体生成相应的文本配置：
     • Mermaid：生成 mermaid 语法
     • ECharts：生成 option 配置 JSON
     • Mindmap：生成 Markdown 格式内容
     • DrawIO：生成 XML 格式内容
     • GeoGebra：生成命令列表或数学表达式
   • 参考 references/ 中的语法指南

3. 调用脚本渲染

   • 根据图表类型调用对应的渲染脚本：
     • Mermaid 图表：scripts/render_mermaid.py
     • ECharts 图表：scripts/render_echarts.py
     • 思维导图：scripts/render_mindmap.py
     • DrawIO 图表：scripts/render_drawio.py
     • GeoGebra 图表：scripts/render_geogebra.py
   • 指定输出路径和格式

4. 结果验证与交付

   • 检查生成的图表文件
   • 确认格式和内容符合预期
   • 将输出文件路径提供给用户

可选分支

• 当需要 交互式图表：使用 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：绘制流程图

需求：绘制一个用户注册流程图

执行方式：

1. 智能体生成 Mermaid flowchart 语法
2. 调用 scripts/render_mermaid.py --input temp.mmd --output ./charts-output/registration-flow.png --format png

关键参数：

• 输入：Mermaid 语法的 .mmd 文件
• 输出：PNG 格式图片

示例 2：生成数据可视化图表

需求：生成月度销售数据的柱状图（包含多个产品系列）

执行方式：

1. 智能体生成 ECharts option 配置 JSON（在一个配置文件中包含所有系列）
2. 调用 scripts/render_echarts.py --config sales-data.json --output ./charts-output/sales-chart.html

关键说明：

• 所有系列应放在同一个配置文件的 series 数组中
• 不要为每个系列创建单独的配置文件
• 示例：assets/examples/echarts-multi-series.json

示例 3：创建思维导图

需求：为项目规划创建思维导图

执行方式：

1. 智能体生成 Markdown 格式的思维导图内容
2. 调用 scripts/render_mindmap.py --input project-plan.md --output ./charts-output/project-mindmap.svg --format svg

关键参数：

• 输入：Markdown 格式的 .md 文件
• 输出：SVG 格式（矢量图）

示例 4：绘制系统架构图

需求：绘制微服务系统架构图（包含前端、后端、数据库、缓存等组件）

执行方式：

1. 智能体生成 DrawIO XML 格式
2. 调用 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) 的图像

执行方式：

1. 智能体生成 GeoGebra 命令列表
2. 调用 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