Chart MCP Server

官方

一个使用AntV生成可视化图表的模型上下文协议服务器。

GitHub

4.2k

文档

MCP 服务器 Chart

一个基于 AntV 的模型上下文协议服务器，用于生成图表。我们可以将此 MCP 服务器用于 图表生成 和 数据分析。

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

📋 目录

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

✨ 特性

目前已支持 26 种以上的图表。

generate_area_chart：生成 area 图，用于展示数据在连续自变量下的趋势，便于观察数据的整体走向。
generate_bar_chart：生成 bar 图，用于比较不同类别的数值，适合进行横向对比。
generate_boxplot_chart：生成 boxplot，用于展示数据的分布情况，包括中位数、四分位数和异常值。
generate_column_chart：生成 column 图，用于比较不同类别的数值，适合进行纵向对比。
generate_district_map - 生成 district-map，用于展示行政区划和数据分布。
generate_dual_axes_chart：生成 dual-axes 图，用于展示两个具有不同单位或范围的变量之间的关系。
generate_fishbone_diagram：生成 fishbone 图，也称为石川图，用于识别和展示问题的根本原因。
generate_flow_diagram：生成 flowchart，用于展示流程的步骤和顺序。
generate_funnel_chart：生成 funnel 图，用于展示不同阶段的数据流失情况。
generate_histogram_chart：生成 histogram，通过将数据划分为区间并统计每个区间的数据点数量来展示数据分布。
generate_line_chart：生成 line 图，用于展示数据随时间或其他连续变量的变化趋势。
generate_liquid_chart：生成 liquid 图，用于展示数据的占比，以水球形式直观呈现百分比。
generate_mind_map：生成 mind-map，用于展示思维过程和层级信息。
generate_network_graph：生成 network 图，用于展示节点之间的关系和连接。
generate_organization_chart：生成 organizational 图，用于展示组织结构和人员关系。
generate_path_map - 生成 path-map，用于展示 POI 的路径规划结果。
generate_pie_chart：生成 pie 图，用于展示数据的占比，将数据划分为扇形区域以显示各部分所占的百分比。
generate_pin_map - 生成 pin-map，用于展示 POI 的分布情况。
generate_radar_chart：生成 radar 图，用于全面展示多维数据，以雷达图形式呈现多个维度。
generate_sankey_chart：生成 sankey 图，用于展示数据流和流量，以桑基图形式表示数据在不同节点间的流动。
generate_scatter_chart：生成 scatter 图，用于展示两个变量之间的关系，将数据点以散点形式绘制在坐标系上。
generate_treemap_chart：生成 treemap，用于展示层级数据，以矩形形式显示数据，矩形的大小代表数据的值。
generate_venn_chart：生成 venn 图，用于展示集合之间的关系，包括交集、并集和差集。
generate_violin_chart：生成 violin 图，用于展示数据分布，结合了箱线图和密度图的特性，提供更详细的数据分布视图。
generate_word_cloud_chart：生成 word-cloud，用于展示文本数据中词语的频率，字体大小表示每个词语的频率。
generate_spreadsheet：生成 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"]
    }
  }
}

此外，你也可以通过 HTTP、SSE 协议在阿里云、ModelScope、glama.ai、smithery.ai 或其他平台上使用它。

🎨 技能使用

如果你使用的是支持技能的 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

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

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
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 选项。通过运行 cli 并携带 -H 来使用命令选项。

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ 环境变量

变量	描述	默认值	示例
`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。

🗺️ 生成记录

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

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

接下来，你需要在 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"
      }
    }
  }
}

可用于过滤的工具名称 请参见 ✨ 特性。

🔨 开发

安装依赖：

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。