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 所有。