Chart MCP Server

chính thức

Một máy chủ Giao thức Ngữ cảnh Mô hình để tạo biểu đồ trực quan bằng AntV.

GitHub
4.2k

Tài liệu

MCP Server Chart

Một máy chủ Model Context Protocol để tạo biểu đồ sử dụng AntV. Chúng ta có thể sử dụng máy chủ mcp này cho tạo biểu đồ và phân tích dữ liệu.

build npm Version npm License codecov smithery installations badge Visitors

mcp-server-chart technical digram

Đây là máy chủ MCP dựa trên TypeScript cung cấp khả năng tạo biểu đồ. Nó cho phép bạn tạo nhiều loại biểu đồ khác nhau thông qua các công cụ MCP. Bạn cũng có thể sử dụng nó trong Dify.

📋 Mục lục

✨ Tính năng

Hiện hỗ trợ hơn 26 loại biểu đồ.

mcp-server-chart preview
  1. generate_area_chart: Tạo biểu đồ area, dùng để hiển thị xu hướng của dữ liệu dưới một biến độc lập liên tục, cho phép quan sát xu hướng tổng thể của dữ liệu.
  2. generate_bar_chart: Tạo biểu đồ bar, dùng để so sánh giá trị giữa các danh mục khác nhau, phù hợp cho so sánh ngang.
  3. generate_boxplot_chart: Tạo boxplot, dùng để hiển thị phân phối của dữ liệu, bao gồm trung vị, tứ phân vị và các giá trị ngoại lệ.
  4. generate_column_chart: Tạo biểu đồ column, dùng để so sánh giá trị giữa các danh mục khác nhau, phù hợp cho so sánh dọc.
  5. generate_district_map - Tạo district-map, dùng để hiển thị các đơn vị hành chính và phân phối dữ liệu.
  6. generate_dual_axes_chart: Tạo biểu đồ dual-axes, dùng để hiển thị mối quan hệ giữa hai biến có đơn vị hoặc phạm vi khác nhau.
  7. generate_fishbone_diagram: Tạo sơ đồ fishbone, còn được gọi là sơ đồ xương cá, dùng để xác định và hiển thị nguyên nhân gốc rễ của một vấn đề.
  8. generate_flow_diagram: Tạo flowchart, dùng để hiển thị các bước và trình tự của một quy trình.
  9. generate_funnel_chart: Tạo biểu đồ funnel, dùng để hiển thị sự mất mát dữ liệu ở các giai đoạn khác nhau.
  10. generate_histogram_chart: Tạo histogram, dùng để hiển thị phân phối của dữ liệu bằng cách chia thành các khoảng và đếm số điểm dữ liệu trong mỗi khoảng.
  11. generate_line_chart: Tạo biểu đồ line, dùng để hiển thị xu hướng của dữ liệu theo thời gian hoặc một biến liên tục khác.
  12. generate_liquid_chart: Tạo biểu đồ liquid, dùng để hiển thị tỷ lệ của dữ liệu, biểu diễn trực quan phần trăm dưới dạng các quả cầu chứa nước.
  13. generate_mind_map: Tạo mind-map, dùng để hiển thị quá trình suy nghĩ và thông tin phân cấp.
  14. generate_network_graph: Tạo đồ thị network, dùng để hiển thị mối quan hệ và kết nối giữa các nút.
  15. generate_organization_chart: Tạo biểu đồ organizational, dùng để hiển thị cấu trúc của một tổ chức và mối quan hệ nhân sự.
  16. generate_path_map - Tạo path-map, dùng để hiển thị kết quả lập kế hoạch tuyến đường cho các POI.
  17. generate_pie_chart: Tạo biểu đồ pie, dùng để hiển thị tỷ lệ của dữ liệu, chia thành các phần được biểu diễn bằng các cung hiển thị phần trăm của mỗi phần.
  18. generate_pin_map - Tạo pin-map, dùng để hiển thị phân phối của các POI.
  19. generate_radar_chart: Tạo biểu đồ radar, dùng để hiển thị toàn diện dữ liệu đa chiều, hiển thị nhiều chiều trong định dạng giống radar.
  20. generate_sankey_chart: Tạo biểu đồ sankey, dùng để hiển thị luồng và khối lượng dữ liệu, biểu diễn sự di chuyển của dữ liệu giữa các nút khác nhau theo định dạng kiểu Sankey.
  21. generate_scatter_chart: Tạo biểu đồ scatter, dùng để hiển thị mối quan hệ giữa hai biến, hiển thị các điểm dữ liệu dưới dạng các chấm rải rác trên hệ tọa độ.
  22. generate_treemap_chart: Tạo treemap, dùng để hiển thị dữ liệu phân cấp, hiển thị dữ liệu dưới dạng hình chữ nhật trong đó kích thước của hình chữ nhật biểu thị giá trị của dữ liệu.
  23. generate_venn_chart: Tạo sơ đồ venn, dùng để hiển thị mối quan hệ giữa các tập hợp, bao gồm giao, hợp và hiệu.
  24. generate_violin_chart: Tạo biểu đồ violin, dùng để hiển thị phân phối của dữ liệu, kết hợp các đặc điểm của biểu đồ hộp và biểu đồ mật độ để cung cấp cái nhìn chi tiết hơn về phân phối dữ liệu.
  25. generate_word_cloud_chart: Tạo word-cloud, dùng để hiển thị tần suất của các từ trong dữ liệu văn bản, với kích thước phông chữ biểu thị tần suất của mỗi từ.
  26. generate_spreadsheet: Tạo spreadsheet hoặc bảng tổng hợp để hiển thị dữ liệu dạng bảng. Khi các trường 'rows' hoặc 'values' được cung cấp, nó hiển thị dưới dạng bảng tổng hợp (bảng chéo); nếu không, nó hiển thị dưới dạng bảng thông thường.

[!LƯU Ý] Công cụ tạo biểu đồ trực quan hóa địa lý ở trên sử dụng dịch vụ AMap và hiện chỉ hỗ trợ tạo bản đồ trong phạm vi Trung Quốc.

🤖 Cách sử dụng

Để sử dụng với Desktop APP, chẳng hạn như Claude, VSCode, Cline, Cherry Studio, Cursor, v.v., hãy thêm cấu hình máy chủ MCP bên dưới. Trên hệ thống Mac:

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

Trên hệ thống Windows:

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

Ngoài ra, bạn có thể sử dụng nó trên aliyun, modelscope, glama.ai, smithery.ai hoặc các nền tảng khác với giao thức HTTP, SSE.

🎨 Sử dụng kỹ năng

Nếu bạn đang sử dụng một AI IDE có hỗ trợ kỹ năng (như Claude Code), bạn có thể sử dụng kỹ năng chart-visualization để tự động chọn loại biểu đồ tốt nhất và tạo trực quan hóa.

Bạn có thể thêm kỹ năng từ https://github.com/antvis/chart-visualization-skills bằng cách sử dụng:

npx skills add antvis/chart-visualization-skills

Sau đó cung cấp dữ liệu của bạn hoặc mô tả trực quan hóa bạn muốn. Kỹ năng sẽ thông minh chọn từ hơn 25 loại biểu đồ và tạo biểu đồ cho bạn.

🚰 Chạy với SSE hoặc Streamable transport

Chạy trực tiếp

Cài đặt gói toàn cục.

npm install -g @antv/mcp-server-chart

Chạy máy chủ với tùy chọn transport bạn thích:

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

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

Sau đó bạn có thể truy cập máy chủ tại:

  • SSE transport: http://localhost:1122/sse
  • Streamable transport: http://localhost:1122/mcp

Triển khai Docker

Vào thư mục docker.

cd docker

Triển khai bằng docker-compose.

docker compose up -d

Sau đó bạn có thể truy cập máy chủ tại:

  • SSE transport: http://localhost:1123/sse
  • Streamable transport: http://localhost:1122/mcp

🎮 Tùy chọn CLI

Bạn cũng có thể sử dụng các tùy chọn CLI sau khi chạy máy chủ MCP. Tùy chọn lệnh bằng cách chạy cli với -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

⚙️ Biến môi trường

BiếnMô tảMặc địnhVí dụ
VIS_REQUEST_SERVERURL dịch vụ tạo biểu đồ tùy chỉnh cho triển khai riênghttps://antv-studio.alipay.com/api/gpt-vishttps://your-server.com/api/chart
SERVICE_IDĐịnh danh dịch vụ cho bản ghi tạo biểu đồ-your-service-id-123
DISABLED_TOOLSDanh sách tên công cụ cần vô hiệu hóa, phân tách bằng dấu phẩy-generate_fishbone_diagram,generate_mind_map

📠 Triển khai riêng

MCP Server Chart cung cấp dịch vụ tạo biểu đồ miễn phí theo mặc định. Đối với người dùng có nhu cầu triển khai riêng, họ có thể thử sử dụng VIS_REQUEST_SERVER để tùy chỉnh dịch vụ tạo biểu đồ của riêng mình.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

Bạn có thể sử dụng dự án GPT-Vis-SSR của AntV để triển khai một dịch vụ HTTP trong môi trường riêng, sau đó truyền địa chỉ URL qua biến môi trường VIS_REQUEST_SERVER.

  • Phương thức: POST
  • Tham số: Sẽ được truyền tới GPT-Vis-SSR để kết xuất. Ví dụ, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
  • Trả về: Đối tượng trả về của dịch vụ HTTP.
    • success: boolean Liệu có tạo ảnh biểu đồ thành công hay không.
    • resultObj: string URL ảnh biểu đồ.
    • errorMessage: string Khi success = false, trả về thông báo lỗi.

[!LƯU Ý] Giải pháp triển khai riêng hiện không hỗ trợ tạo biểu đồ trực quan hóa địa lý bao gồm 3 công cụ: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Bản ghi tạo

Theo mặc định, người dùng cần tự lưu kết quả, nhưng chúng tôi cũng cung cấp một dịch vụ để xem bản ghi tạo biểu đồ, yêu cầu người dùng tạo một định danh dịch vụ cho chính họ và cấu hình nó.

Sử dụng Alipay để quét và mở chương trình mini để tạo định danh dịch vụ cá nhân (nhấp vào menu "Của tôi" bên dưới, vào trang "Dịch vụ của tôi", nhấp vào nút "Tạo", và nhấp vào nút "Sao chép" sau khi thành công):

my service identifier website

Tiếp theo, bạn cần thêm biến môi trường SERVICE_ID vào cấu hình máy chủ MCP. Ví dụ, cấu hình cho Mac như sau (đối với hệ thống Windows, chỉ cần thêm biến env):

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

Sau khi cập nhật cấu hình MCP Server, bạn cần khởi động lại ứng dụng khách AI của mình và kiểm tra lại xem bạn đã khởi động và kết nối với MCP Server thành công chưa. Sau đó bạn có thể thử tạo bản đồ lại. Sau khi tạo thành công, bạn có thể vào trang "Bản đồ của tôi" của chương trình mini để xem bản ghi tạo bản đồ của mình.

my map records website

🎛️ Lọc công cụ

Bạn có thể vô hiệu hóa các công cụ tạo biểu đồ cụ thể bằng cách sử dụng biến môi trường DISABLED_TOOLS. Điều này hữu ích khi một số công cụ có vấn đề tương thích với máy khách MCP của bạn hoặc khi bạn muốn giới hạn chức năng có sẵn.

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

Tên công cụ có sẵn để lọc Xem ✨ Tính năng.

🔨 Phát triển

Cài đặt các phụ thuộc:

npm install

Xây dựng máy chủ:

npm run build

Khởi động máy chủ MCP:

npm run start

Khởi động máy chủ MCP với SSE transport:

node build/index.js -t sse

Khởi động máy chủ MCP với Streamable transport:

node build/index.js -t streamable

📄 Giấy phép

MIT@AntV.