Charts MCP

🚀 MCP Server Chart

MCP Server Chart 是一个基于Model Context Protocol的服务器，借助 AntV 实现图表生成功能。可用于进行 图表生成 和 数据分析。同时，它还是一个基于 TypeScript 的 MCP 服务器，支持通过 MCP 工具创建各类图表，也能在 Dify 中使用。

🚀 快速开始

在桌面应用中使用

若要在 桌面应用（如 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 协议使用。

✨ 主要特性

目前支持 25 种以上的图表：

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：生成 词云图，用于展示文本数据中单词的频率，字体大小表示每个单词的频率。

⚠️ 重要提示

上述地理可视化图表生成工具使用 高德地图服务，目前仅支持生成中国范围内的地图。

📦 安装指南

直接运行

全局安装该包：

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

使用你偏好的传输选项运行服务器：

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

# 对于可流式传输，使用自定义端点
mcp-server-chart --transport streamable

之后，你可以通过以下地址访问服务器：

• SSE 传输：http://localhost:1122/sse
• 可流式传输：http://localhost:1122/mcp

Docker 部署

进入 Docker 目录：

cd docker

使用 Docker Compose 进行部署：

docker compose up -d

之后，你可以通过以下地址访问服务器：

• SSE 传输：http://localhost:1123/sse
• 可流式传输：http://localhost:1122/mcp

💻 使用示例

基础用法

在桌面应用中配置 MCP 服务器，以 Mac 系统为例：

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

高级用法

在私有部署中自定义图表生成服务：

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

📚 详细文档

🎮 CLI 选项

运行 MCP 服务器时，你还可以使用以下 CLI 选项。通过 cli -h 查看命令选项：

MCP Server Chart CLI

Options:
  --transport, -t  指定传输协议："stdio"、"sse" 或 "streamable"（默认："stdio"）
  --port, -p       指定 SSE 或可流式传输的端口（默认：1122）
  --endpoint, -e   指定传输的端点：
                   - 对于 SSE：默认是 "/sse"
                   - 对于可流式传输：默认是 "/mcp"
  --help, -h       显示此帮助消息

⚙️ 环境变量

📠 私有部署

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 时，返回错误消息。

⚠️ 重要提示

私有部署解决方案目前不支持地理可视化图表生成，涉及 3 个工具：geographic-district-map、geographic-path-map、geographic-pin-map。

🗺️ 生成记录

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

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

接下来，你需要在 MCP 服务器配置中添加 SERVICE_ID 环境变量。例如，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"
      }
    }
  }
}

可供过滤的工具名称 请参阅 ✨ 主要特性。

🔧 技术细节

本项目是一个基于 TypeScript 的 MCP 服务器，借助 AntV 实现图表生成功能。通过不同的 CLI 选项和环境变量，可以灵活配置服务器的传输协议、端口、端点等参数，以满足不同的使用场景。同时，支持私有部署和工具过滤等功能，提高了系统的可定制性和适用性。

📄 许可证

本项目采用 MIT 许可证，版权归 AntV 所有。