MCP Server Chart

MCP Server Chart

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

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

📋 目录

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

✨ 功能

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

1. `generate_area_chart`：生成 `area` 图表，用于展示连续自变量下的数据趋势，便于观察整体数据变化趋势。 1. `generate_bar_chart`：生成 `bar` 图表，用于比较不同类别的数值，适合横向比较。 1. `generate_boxplot_chart`：生成 `boxplot`，用于展示数据分布，包括中位数、四分位数和异常值。 1. `generate_column_chart`：生成 `column` 图表，用于比较不同类别的数值，适合纵向比较。 1. `generate_district_map` - 生成 `district-map`，用于展示行政区划和数据分布。 1. `generate_dual_axes_chart`：生成 `dual-axes` 图表，用于展示单位或范围不同的两个变量之间的关系。 1. `generate_fishbone_diagram`：生成 `fishbone` 图，也称为石川图，用于找出并展示问题的根本原因。 1. `generate_flow_diagram`：生成 `flowchart`，用于展示流程的步骤和顺序。 1. `generate_funnel_chart`：生成 `funnel` 图表，用于展示不同阶段的数据流失情况。 1. `generate_histogram_chart`：生成 `histogram`，通过将数据划分为多个区间并统计各区间内的数据点数量，展示数据分布。 1. `generate_line_chart`：生成 `line` 图表，用于展示数据随时间或其他连续变量变化的趋势。 1. `generate_liquid_chart`：生成 `liquid` 图表，用于展示数据占比，以注水球体的形式直观呈现百分比。 1. `generate_mind_map`：生成 `mind-map`，用于展示思维过程和层级信息。 1. `generate_network_graph`：生成 `network` 图，用于展示节点之间的关系和连接。 1. `generate_organization_chart`：生成 `organizational` 图，用于展示组织结构和人员关系。 1. `generate_path_map` - 生成 `path-map`，用于展示 POI 的路线规划结果。 1. `generate_pie_chart`：生成 `pie` 图表，用于展示数据占比，将数据划分为扇区，以百分比形式表示各部分。 1. `generate_pin_map` - 生成 `pin-map`，用于展示 POI 的分布。 1. `generate_radar_chart`：生成 `radar` 图表，用于全面展示多维数据，以雷达图形式呈现多个维度。 1. `generate_sankey_chart`：生成 `sankey` 图表，用于展示数据流及其数量，以桑基图形式呈现数据在不同节点之间的流动。 1. `generate_scatter_chart`：生成 `scatter` 图，用于展示两个变量之间的关系，以散点形式在坐标系中呈现数据点。 1. `generate_treemap_chart`：生成 `treemap`，用于展示层级数据，以矩形形式呈现数据，矩形的大小表示数据值。 1. `generate_venn_chart`：生成 `venn` 图，用于展示集合之间的关系，包括交集、并集和差集。 1. `generate_violin_chart`：生成 `violin` 图，用于展示数据分布，结合箱线图和密度图的特点，更详细地呈现数据分布。 1. `generate_word_cloud_chart`：生成 `word-cloud`，用于展示文本数据中词语的出现频率，字体大小表示各词语的频率。 1. `generate_spreadsheet`：生成用于展示表格数据的 `spreadsheet` 或数据透视表。提供 `rows` 或 `values` 字段时，会呈现为数据透视表（交叉表）；否则会呈现为常规表格。 > [!NOTE] > 上述地理可视化图表生成工具使用 [AMap service](https://lbs.amap.com/)，目前仅支持生成中国境内的地图。

🤖 使用方法

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

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

在 Window 系统上：

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

此外，你也可以通过 HTTP、SSE Protocol 在 aliyun、modelscope、glama.ai、smithery.ai 等平台使用。

🎨 Skill 使用方法

如果你使用支持 skill 的 AI IDE（例如 Claude Code），可以使用 chart-visualization skill 自动选择最佳图表类型并生成可视化内容。

你可以通过以下命令从 https://github.com/antvis/chart-visualization-skills 添加 skill：

npx skills add antvis/chart-visualization-skills

然后提供数据或描述你想要的可视化内容。该 skill 会从 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 时，返回错误信息。

说明

当前的私有部署方案不支持地理可视化图表生成，包括 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。