multi-chart-draw

Multi-type Drawing Tool

Task Objective

This Skill is used to: generate multiple types of charts according to user needs, including mind maps, flowcharts, data visualization charts, etc.
Capabilities include:
1. Mermaid chart drawing (flowcharts, sequence diagrams, Gantt charts, etc.)
2. ECharts data visualization (bar charts, line charts, pie charts, etc.)
3. Mindmap mind maps
4. DrawIO general drawing
5. Flowchart flowcharts (based on Mermaid)
6. GeoGebra mathematical drawing (functions, geometric figures, algebraic equations)
Trigger conditions: the user expresses needs such as "draw a picture", "draw a chart", "generate a flowchart", etc.

Prerequisites

Dependency Description

Python dependency packages:
- pyecharts>=2.0.0: used to generate ECharts charts
- pillow>=10.0.0: image processing library
System dependencies (must be installed in advance):
- @mermaid-js/mermaid-cli: used to render Mermaid charts
- markmap-cli: used to render mind maps

Install System Dependencies

Before using the Skill, the following system tools need to be installed:

# 安装 Mermaid CLI
npm install -g @mermaid-js/mermaid-cli

# 安装 Markmap CLI
npm install -g markmap-cli

# 验证安装
mmdc --version
markmap --version

Output Directory Preparation

# 创建输出目录
mkdir -p ./charts-output

Operation Steps

Standard Process

Requirement Analysis and Type Selection
- The agent understands the user's drawing requirements and determines the chart type:
  - Hierarchical relationships, knowledge structures, mind map organization → Mindmap
  - Process logic, step relationships, business processes → Flowchart (Mermaid)
  - Temporal interactions, API calls, message passing → Mermaid Sequence
  - Data comparison, trend analysis, statistical charts → ECharts
  - System architecture, network topology, deployment diagrams, ER diagrams → DrawIO
  - Mathematical functions, geometric figures, algebraic equations → GeoGebra
- Determine the output format (PNG/SVG/HTML)
Generate Chart Configuration
- According to the selected chart type, the agent generates the corresponding text configuration:
  - Mermaid: generate mermaid syntax
  - ECharts: generate option configuration JSON
  - Mindmap: generate Markdown format content
  - DrawIO: generate XML format content
  - GeoGebra: generate a command list or mathematical expressions
- Refer to references/ syntax guide in
Call Script to Render
- Call the corresponding rendering script according to the chart type:
  - Mermaid charts:scripts/render_mermaid.py
  - ECharts charts:scripts/render_echarts.py
  - Mind maps:scripts/render_mindmap.py
  - DrawIO charts:scripts/render_drawio.py
  - GeoGebra charts:scripts/render_geogebra.py
- Specify the output path and format
Result Verification and Delivery
- Check the generated chart file
- Confirm that the format and content meet expectations
- Provide the output file path to the user

Optional Branches

When needed Interactive charts: Use ECharts to generate HTML format
When vector graphicsis needed: choose SVG output format
When high-quality bitmapsare needed: choose PNG and set a high resolution

Resource Index

Rendering Scripts

Mermaid rendering: see scripts/render_mermaid.py
- Purpose: render Mermaid syntax to PNG/SVG
- Parameters:--input(input file),--output(output file),--format(format: png/svg)
ECharts rendering: see scripts/render_echarts.py
- Purpose: render ECharts configuration to HTML (interactive charts)
- Parameters:--config(configuration file),--output(output file)
Mindmap rendering: see scripts/render_mindmap.py
- Purpose: render Markdown-format mind maps to SVG/PNG
- Parameters:--input(input file),--output(output file),--format(format: svg/png)
DrawIO diagrams: see scripts/render_drawio.py
- Purpose: render DrawIO XML to HTML (interactive charts)
- Parameters:--input(input file),--output(output file)
GeoGebra rendering: see scripts/render_geogebra.py
- Purpose: render GeoGebra commands to interactive HTML
- Parameters:--input(input file),--output(output file)

Reference Documentation

Mermaid syntax: see references/mermaid-syntax.md
- When to read: when generating Mermaid diagrams
ECharts configuration: see references/echarts-guide.md
- When to read: when generating ECharts charts
Mindmap format: see references/mindmap-guide.md
- When to read: when generating mind maps
DrawIO format: see references/drawio-guide.md
- When to read: when generating DrawIO diagrams
GeoGebra syntax: see references/geogebra-guide.md
- When to read: when generating mathematical function graphs or geometric figures

Example Resources

Chart examples: see assets/examples/
- Contains example configuration files for various chart types

Notes

Agent Capabilities

The agent is responsible for understanding user requirements, generating textual configurations for charts, and selecting appropriate chart types
The agent should fully leverage its language understanding and creative abilities to generate high-quality chart content

Script Usage

Scripts are only responsible for technical rendering work, receiving text input and generating image files
All parameters must be passed via command-line arguments; do not hard-code them in scripts
Ensure scripts have appropriate error handling and logging output

Format Selection Guide

Mindmap: suitable for hierarchical structures, knowledge organization, project planning, and conceptual relationships
Mermaid Flowchart: suitable for simple flowcharts, decision flows, and algorithm flows
Mermaid Sequence: suitable for sequence diagrams, API calls, message passing, and interaction flows
Mermaid Others: Gantt chart (project progress), state diagram, class diagram, ER diagram (simple)
ECharts: Suitable for data visualization (bar charts, line charts, pie charts, scatter plots, etc.)
DrawIO: Suitable for system architecture diagrams, network topologies, deployment diagrams, ER diagrams (complex), UML diagrams
GeoGebra: Suitable for mathematical functions, geometric figures, algebraic equations, statistical analysis

Type Selection Examples

"Project Plan" → Mindmap
"User Registration Flow" → Mermaid Flowchart
"API Call Sequence" → Mermaid Sequence
"Quarterly Sales" → ECharts Bar Chart
"System Architecture Diagram" → DrawIO
"Function Graph" → GeoGebra

Output Management

It is recommended to place output files uniformly under the ./charts-output/ directory
Use meaningful file names, such as mindmap-project-plan.svg、flowchart-api-call.png
Pay attention to the applicable scenarios of output formats (SVG is suitable for vector editing, PNG is suitable for display)

Usage Examples

Example 1: Draw a Flowchart

Requirement: Draw a user registration flowchart

Execution Method：

The agent generates Mermaid flowchart syntax
Call scripts/render_mermaid.py --input temp.mmd --output ./charts-output/registration-flow.png --format png

Key Parameters：

Input: .mmd file in Mermaid syntax
Output: PNG format image

Example 2: Generate a Data Visualization Chart

Requirement: Generate a bar chart of monthly sales data (including multiple product series)

Execution Method：

The agent generates an ECharts option configuration JSON (including all series in one configuration file)
Call scripts/render_echarts.py --config sales-data.json --output ./charts-output/sales-chart.html

Key Notes：

All series should be placed in the series array of the same configuration file
Do not create a separate configuration file for each series
Example:assets/examples/echarts-multi-series.json

Example 3: Create a Mind Map

Requirement: Create a mind map for project planning

Execution Method：

The agent generates mind map content in Markdown format
Call scripts/render_mindmap.py --input project-plan.md --output ./charts-output/project-mindmap.svg --format svg

Key Parameters：

Input: .md file in Markdown format
Output: SVG format (vector graphic)

Example 4: Draw a System Architecture Diagram

Requirement: Draw a microservice system architecture diagram (including components such as frontend, backend, database, cache, etc.)

Execution Method：

The agent generates DrawIO XML format
Call scripts/render_drawio.py --input architecture.xml --output ./charts-output/system-architecture.html

Key Parameters：

Input: .xml file in DrawIO XML format
Output: HTML format (interactive chart, supports exporting SVG/PNG)
Features: Can be viewed, zoomed, and dragged directly in the browser

Example 5: Draw a Mathematical Function Graph

Requirement: Draw the graphs of the functions y = x² and y = sin(x)

Execution Method：

The agent generates a list of GeoGebra commands
Call scripts/render_geogebra.py --input function-commands.txt --output ./charts-output/function-plot.html

Key Parameters：

Input: A text file containing GeoGebra commands
Output: HTML format (interactive GeoGebra graphics)

Important Notes

ECharts multi-series chart

✅ Correct approach: Put all series in one configuration file's series array

{
  "series": [
    {"name": "系列1", "type": "bar", "data": [...]},
    {"name": "系列2", "type": "bar", "data": [...]},
    {"name": "系列3", "type": "bar", "data": [...]}
  ]
}

❌ Incorrect approach: Create a separate configuration file for each series
- Do not create series1.json、series2.json、series3.json
- This will generate multiple independent charts, rather than multiple series in one chart

Reference examples

Single-series example:assets/examples/echarts-bar-standard.json
Multi-series example:assets/examples/echarts-multi-series.json
Line chart multi-series:assets/examples/echarts-line-standard.json

About this skill

Task Objective

Prerequisites

Dependency Description

Install System Dependencies

Output Directory Preparation

Operation Steps

Standard Process

Optional Branches

Resource Index

Rendering Scripts

Reference Documentation

Example Resources

Notes

Agent Capabilities

Script Usage

Format Selection Guide

Type Selection Examples

Output Management

Usage Examples

Example 1: Draw a Flowchart

Example 2: Generate a Data Visualization Chart

Example 3: Create a Mind Map

Example 4: Draw a System Architecture Diagram

Example 5: Draw a Mathematical Function Graph

Important Notes

ECharts multi-series chart

Reference examples