MCP 服务器图表

一个用于使用 AntV 生成图表的模型上下文协议服务器。我们可以使用此 mcp 服务器进行 图表生成 和 数据分析。

这是一个基于 TypeScript 的 MCP 服务器，提供图表生成功能。它允许您通过 MCP 工具创建各种类型的图表。您也可以在 Dify 中使用它。

📋 目录

• ✨ 特性
• 🤖 使用方法
• 🎨 技能使用
• 🚰 使用 SSE 或可流式传输的传输方式运行
• 🎮 CLI 选项
• ⚙️ 环境变量
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 私有部署
• 🗺️ 生成记录
• 🎛️ 工具过滤
• 🔨 开发
• 📄 许可证

✨ 特性

现已支持 26+ 种图表。

1. generate_area_chart: 生成面积图，用于展示连续自变量下的数据趋势，便于观察整体数据变化趋势。
2. generate_bar_chart: 生成条形图，用于比较不同类别之间的数值，适合横向对比。
3. generate_boxplot_chart: 生成箱线图，用于展示数据的分布情况，包括中位数、四分位数及异常值。
4. generate_column_chart: 生成柱状图，用于比较不同类别之间的数值，适合纵向对比。
5. generate_district_map - 生成区域地图，用于展示行政区划及数据分布。
6. generate_dual_axes_chart: 生成双轴图，用于展示两个具有不同单位或范围的变量之间的关系。
7. generate_fishbone_diagram: 生成鱼骨图，又称石川图，用于识别和展示问题的根本原因。
8. generate_flow_diagram: 生成流程图，用于展示某个过程的步骤和顺序。
9. generate_funnel_chart: 生成漏斗图，用于展示数据在不同阶段的流失情况。
10. generate_histogram_chart: 生成直方图，用于将数据按区间划分并统计每个区间内的数据数量，从而展示数据分布。
11. generate_line_chart: 生成折线图，用于展示数据随时间或其他连续变量的变化趋势。
12. generate_liquid_chart: 生成液态图，用于展示数据比例，以充满水的球体形式直观地表示百分比。
13. generate_mind_map: 生成思维导图，用于展示思维过程和层次化信息。
14. generate_network_graph: 生成网络图，用于展示节点之间的关系和连接。
15. generate_organization_chart: 生成组织结构图，用于展示组织架构和人员关系。
16. generate_path_map - 生成路径图，用于展示 POI 的路线规划结果。
17. generate_pie_chart: 生成饼图，用于展示数据的比例，将数据分成若干部分，每部分用扇形表示其占比。
18. generate_pin_map - 生成点位图，用于展示 POI 的分布情况。
19. generate_radar_chart: 生成雷达图，用于全面展示多维数据，在类似雷达的格式中显示多个维度。
20. generate_sankey_chart: 生成桑基图，用于展示数据流动和流量，以桑基图的形式表示数据在不同节点之间的流动。
21. generate_scatter_chart: 生成散点图，用于展示两个变量之间的关系，在坐标系上以分散的点来表示数据。
22. generate_treemap_chart: 生成树状图，用于展示层次化数据，以矩形的形式呈现数据，矩形的大小代表数据的值。
23. generate_venn_chart: 生成文氏图，用于展示集合之间的关系，包括交集、并集和差集。
24. generate_violin_chart: 生成小提琴图，用于展示数据分布，结合了箱线图和密度图的特点，提供更详细的数据分布视图。
25. generate_word_cloud_chart: 生成词云图，用于展示文本数据中单词的频率，字体大小表示每个单词的频率。
26. generate_spreadsheet: 生成电子表格或数据透视表，用于展示表格数据。当提供 'rows' 或 'values' 字段时，会渲染为数据透视表（交叉表）；否则，会渲染为普通表格。

[!NOTE] 上述地理可视化图表生成工具使用 高德地图服务，目前仅支持在中国境内生成地图。

🤖 使用方法

要与 Desktop APP 配合使用，例如 Claude、VSCode、Cline、Cherry Studio、Cursor 等，请添加以下 MCP 服务器配置。在 Mac 系统上：

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

在 Windows 系统上：

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

此外，您也可以在 aliyun、modelscope、glama.ai、smithery.ai 或其他支持 HTTP、SSE 协议的平台上使用。

🎨 技能使用

如果您使用的 AI IDE 支持技能功能（如 Claude Code），可以使用 chart-visualization 技能自动选择最佳图表类型并生成可视化图表。

您可以从 https://github.com/antvis/chart-visualization-skills 添加该技能，命令如下：

npx skills add antvis/chart-visualization-skills

然后提供您的数据或描述您想要的可视化效果，该技能将智能地从 25 多种图表类型中进行选择，并为您生成图表。

🚰 使用 SSE 或 Streamable 传输方式运行

直接运行

全局安装该包。

npm install -g @antv/mcp-server-chart

使用您首选的传输方式运行服务器：

# 对于 SSE 传输（默认端点：/sse）
mcp-server-chart --transport sse

# 对于自定义端点的 Streamable 传输
mcp-server-chart --transport streamable

然后您可以通过以下地址访问服务器：

• SSE 传输：http://localhost:1122/sse
• Streamable 传输：http://localhost:1122/mcp

Docker 部署

进入 docker 目录。

cd docker

使用 docker-compose 部署。

docker compose up -d

然后您可以通过以下地址访问服务器：

• SSE 传输：http://localhost:1123/sse
• Streamable 传输：http://localhost:1122/mcp

🎮 CLI 选项

您还可以在运行 MCP 服务器时使用以下 CLI 选项。通过运行带有 -H 的 CLI 来查看命令选项。

MCP Server Chart CLI

Options:
  --transport, -t  指定传输协议："stdio"、"sse" 或 "streamable"（默认："stdio"）
  --host, -h       指定 SSE 或 Streamable 传输的主机（默认：localhost）
  --port, -p       指定 SSE 或 Streamable 传输的端口（默认：1122）
  --endpoint, -e   指定传输的端点：
                   - 对于 SSE：默认为 "/sse"
                   - 对于 Streamable：默认为 "/mcp"
  --help, -H       显示此帮助信息

⚙️ 环境变量

变量	描述	默认	示例
VIS_REQUEST_SERVER	私有部署的自定义图表生成服务 URL	https://antv-studio.alipay.com/api/gpt-vis	https://your-server.com/api/chart
SERVICE_ID	图表生成记录的服务标识符	-	your-service-id-123
DISABLED_TOOLS	要禁用的工具名称列表，以逗号分隔	-	generate_fishbone_diagram,generate_mind_map

📠 私有部署

MCP Server Chart 默认提供免费的图表生成服务。对于有私有部署需求的用户，可以尝试使用 VIS_REQUEST_SERVER 自定义自己的图表生成服务。

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

您可以使用 AntV 的项目 GPT-Vis-SSR 在私有环境中部署一个 HTTP 服务，然后通过环境变量 VIS_REQUEST_SERVER 传递该 URL 地址。

• 方法: POST
• 参数: 将传递给 GPT-Vis-SSR 进行渲染。例如，{ "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }。
• 返回: HTTP 服务的返回对象。
  • success: boolean 是否成功生成图表图像。
  • resultObj: string 图表图像的 URL。
  • errorMessage: string 当 success = false 时，返回错误信息。

[!NOTE] 目前的私有部署方案不支持地理可视化图表的生成，包括 3 种工具：geographic-district-map、geographic-path-map 和 geographic-pin-map。

🗺️ 生成记录

默认情况下，用户需要自行保存结果，但我们还提供查看图表生成记录的服务，这需要用户自己生成一个服务标识符并进行配置。

请使用支付宝扫描并打开小程序以生成个人服务标识符（点击下方“我的”菜单，进入“我的服务”页面，点击“生成”按钮，成功后点击“复制”按钮）：

接下来，您需要将 SERVICE_ID 环境变量添加到 MCP 服务器配置中。例如，Mac 系统的配置如下（Windows 系统只需添加 env 变量）：

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

更新 MCP 服务器配置后，您需要重启 AI 客户端应用程序，并再次检查是否已成功启动并连接到 MCP 服务器。然后您可以尝试再次生成地图。成功生成后，您可以前往小程序的“我的地图”页面查看您的地图生成记录。

🎛️ 工具过滤

你可以使用 DISABLED_TOOLS 环境变量来禁用特定的图表生成工具。这在某些工具与你的 MCP 客户端存在兼容性问题，或者你希望限制可用功能时非常有用。

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

可用于过滤的工具名称 请参阅 ✨ 功能。

🔨 开发

安装依赖：

npm install

构建服务器：

npm run build

启动 MCP 服务器：

npm run start

使用 SSE 传输方式启动 MCP 服务器：

node build/index.js -t sse

使用 Streamable 传输方式启动 MCP 服务器：

node build/index.js -t streamable

📄 许可证

MIT@AntV。

mcp-server-chart 快速上手指南

mcp-server-chart 是一个基于 Model Context Protocol (MCP) 的服务器，利用 AntV 引擎为大模型提供图表生成与数据分析能力。支持面积图、柱状图、折线图、地图等 26+ 种图表类型。

环境准备

• 操作系统：macOS, Windows, Linux
• 运行时依赖：
  • Node.js (建议 v18+)
  • npm 或 npx (通常随 Node.js 安装)
• 宿主环境：已配置 MCP 客户端的 AI 工具（如 Claude Desktop, Cursor, Cline, Cherry Studio 等）

安装步骤

无需全局安装，推荐通过 npx 直接在 MCP 配置中按需调用。

1. 配置 MCP 客户端

在你的 AI 工具配置文件（如 claude_desktop_config.json 或 IDE 的 MCP 设置）中添加以下配置。

macOS / Linux 系统：

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

Windows 系统：

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

提示：国内开发者若遇到 npm 下载缓慢，可在执行命令前设置淘宝镜像： export NPM_CONFIG_REGISTRY=https://registry.npmmirror.com (Mac/Linux) 或在 Windows PowerShell 中设置：$env:NPM_CONFIG_REGISTRY="https://registry.npmmirror.com"

2. （可选）安装智能技能

如果你使用的是支持 Skill 的 AI IDE（如 Claude Code），可以安装官方提供的可视化技能包，让 AI 自动选择最佳图表类型：

npx skills add antvis/chart-visualization-skills

基本使用

配置完成后，重启你的 AI 客户端即可开始使用。你可以通过自然语言直接要求生成图表。

使用示例

场景 1：直接描述需求

“请帮我画一个折线图，展示过去 6 个月的销售趋势：1 月 100, 2 月 150, 3 月 200, 4 月 180, 5 月 220, 6 月 250。”

场景 2：提供结构化数据

“根据以下 JSON 数据生成一个饼图，展示各部門预算占比： [{"dept": "研发", "budget": 50}, {"dept": "市场", "budget": 30}, {"dept": "运营", "budget": 20}]"

场景 3：使用智能技能（若已安装）

“分析这份用户年龄分布数据，并用最合适的图表形式可视化出来。”

支持的图表类型

工具内置支持 26+ 种图表，包括但不限于：

• 基础图表：折线图 (line)、柱状图 (column/bar)、面积图 (area)、散点图 (scatter)、饼图 (pie)
• 高级图表：雷达图 (radar)、桑基图 (sankey)、热力图、词云 (word-cloud)、思维导图 (mind-map)
• 地理图表：行政区划图、路径图、打点图（注：地理类图表目前仅支持中国境内地图，依赖高德服务）

高级运行模式（可选）

如果需要以 HTTP/SSE 方式独立部署服务（例如供 Dify 等平台调用），可全局安装并启动：

# 全局安装
npm install -g @antv/mcp-server-chart

# 启动 SSE 服务 (默认端口 1122)
mcp-server-chart --transport sse

启动后可通过 http://localhost:1122/sse 访问。