Chart

官方

一個使用 AntV 生成視覺化圖表的模型上下文協定伺服器。

GitHub

4.2k

文件

MCP Server 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] 上述地理視覺化圖表生成工具使用 AMap 服務，目前僅支援中國境內的地圖生成。

🤖 使用方式

若要與 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"]
    }
  }
}

此外，您也可以在 aliyun、modelscope、glama.ai、smithery.ai 或其他支援 HTTP、SSE 協定的平台上使用。

🎨 技能使用

如果您使用的是支援技能的 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 選項。透過使用 -H 執行 CLI 來使用命令選項。

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 圖表圖片網址。
- errorMessage：string 當 success = false 時，回傳錯誤訊息。

[!NOTE] 私有部署方案目前不支援地理視覺化圖表生成，包含 3 個工具：geographic-district-map、geographic-path-map、geographic-pin-map。

🗺️ 生成記錄

預設情況下，使用者需要自行儲存結果，但我們也提供了一個用於查看圖表生成記錄的服務，這需要使用者為自己生成一個服務識別碼並進行設定。

使用支付寶掃描並開啟小程式以生成個人服務識別碼（點擊下方的「我的」選單，進入「我的服務」頁面，點擊「生成」按鈕，成功後點擊「複製」按鈕）：

接下來，您需要將 SERVICE_ID 環境變數新增到 MCP 伺服器設定中。例如，Mac 的設定如下（對於 Windows 系統，只需新增 env 變數）：

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

更新 MCP Server 設定後，您需要重新啟動您的 AI 用戶端應用程式，並再次檢查是否已成功啟動並連接到 MCP Server。然後您可以再次嘗試生成地圖。生成成功後，您可以前往小程式的「我的地圖」頁面查看您的地圖生成記錄。

🎛️ 工具篩選

您可以使用 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。