Multi Chart Draw Skills

Multi-Chart-Draw

一个功能强大的 Claude Code Skill，支持多种图表类型的智能绘制。

安装 Skill

方法一：添加到项目（推荐）

将此 Skill 文件夹复制到你项目的 `.claude/skills/` 目录下：

# 在你的项目根目录执行
mkdir -p .claude/skills
cp -r /path/to/multi-chart-draw .claude/skills/

目录结构：

your-project/
├── .claude/
│   └── skills/
│       └── multi-chart-draw/
│           ├── SKILL.md
│           ├── scripts/
│           ├── references/
│           └── ...
└── ...

方法二：添加到全局 Skills

将 Skill 添加到用户级别的 Claude Code 配置中：

# macOS/Linux
cp -r /path/to/multi-chart-draw ~/.claude/skills/

# Windows
xcopy /E /I "path\to\multi-chart-draw" "%USERPROFILE%\.claude\skills\multi-chart-draw"

方法三：通过 Git 子模块

# 在你的项目根目录
mkdir -p .claude/skills
cd .claude/skills
git submodule add  multi-chart-draw

功能特性

图表类型	用途	输出格式
Mermaid	流程图、序列图、甘特图、类图、ER图	PNG, SVG
ECharts	柱状图、折线图、饼图、散点图等数据可视化	HTML (交互式)
Mindmap	思维导图、知识结构、项目规划	SVG, PNG
DrawIO	系统架构图、网络拓扑、部署图、UML	HTML (交互式)
GeoGebra	数学函数、几何图形、代数方程、统计分析	HTML (交互式)

快速开始

1. 安装 Skill

按照上述"安装 Skill"章节的方法，将 Skill 添加到你的项目或全局配置中。

2. 安装系统依赖

# Python 依赖
pip install pyecharts>=2.0.0 pillow>=10.0.0

# Node.js 依赖（Mermaid 和 Mindmap 渲染需要）
npm install -g @mermaid-js/mermaid-cli
npm install -g markmap-cli

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

**注意**：如果只使用 ECharts、DrawIO 或 GeoGebra，可以跳过 Node.js 依赖安装。

3. 创建输出目录

mkdir -p ./charts-output

4. 验证安装

在 Claude Code 中输入 `/multi-chart-draw` 或描述绘图需求，如果 Skill 正确安装，Claude 会自动识别并使用该 Skill。

5. 使用 Skill

在 Claude Code 中直接描述你的绘图需求：

画一个用户注册流程图
生成一个季度销售额柱状图
创建一个项目规划的思维导图
绘制微服务系统架构图
画一个 y = x² 的函数图像

项目结构

multi-chart-draw/
├── SKILL.md                 # Skill 定义文件
├── README.md                # 项目说明
├── scripts/                 # 渲染脚本
│   ├── render_mermaid.py    # Mermaid 渲染
│   ├── render_echarts.py    # ECharts 渲染
│   ├── render_mindmap.py    # 思维导图