MCP 服务器图表

这是一个基于模型上下文协议（MCP）的服务器，用于使用 AntV 生成图表。

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

✨ 功能

目前支持 20+ 种图表。

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

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

🤖 使用方法

要在 桌面应用程序 中使用，例如 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 协议的平台上使用。

🚰 使用 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

🎮 CLI 选项

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

MCP 服务器图表 CLI

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

📠 私有部署

MCP 服务器图表 默认提供免费的图表生成服务。对于有私有部署需求的用户，可以尝试使用 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 服务，然后通过 env 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 服务器。然后您可以尝试再次生成地图。生成成功后，您可以进入小程序的“我的地图”页面查看您的地图生成记录。

🔨 开发

安装依赖：

npm install

构建服务器：

npm run build

启动 MCP 服务器：

npm run start

📄 许可证

MIT@AntV。