io.github.antvis/mcp-server-chart

平台与服务编辑精选

by antvis

io.github.antvis/mcp-server-chart 是让 AI 助手直接生成 AntV 图表的 MCP 服务器。

如果你想让 Claude 快速把数据转成可视化图表,这个服务器是绝佳选择——它基于 AntV 生态,支持 26+ 种图表类型,从柱状图到地图都能一键生成。特别适合数据分析师或产品经理在聊天中即时验证数据洞察。不过,目前它依赖外部服务渲染,需要配置 VIS_REQUEST_SERVER 环境变量,对纯本地部署的用户有点麻烦。

4.1kGitHub

什么是 io.github.antvis/mcp-server-chart

io.github.antvis/mcp-server-chart 是让 AI 助手直接生成 AntV 图表的 MCP 服务器。

README

MCP Server Chart

A Model Context Protocol server for generating charts using AntV. We can use this mcp server for chart generation and data analysis.

build npm Version npm License codecov smithery installations badge Visitors

<img width="768" alt="mcp-server-chart technical digram" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*XVH-Srg-b9UAAAAAgGAAAAgAemJ7AQ/fmt.avif" />

This is a TypeScript-based MCP server that provides chart generation capabilities. It allows you to create various types of charts through MCP tools. You can also use it in Dify.

📋 Table of Contents

✨ Features

Now 26+ charts supported.

<img width="768" alt="mcp-server-chart preview" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*IyIRQIQHyKYAAAAAgCAAAAgAemJ7AQ/fmt.avif" />
  1. generate_area_chart: Generate an area chart, used to display the trend of data under a continuous independent variable, allowing observation of overall data trends.
  2. generate_bar_chart: Generate a bar chart, used to compare values across different categories, suitable for horizontal comparisons.
  3. generate_boxplot_chart: Generate a boxplot, used to display the distribution of data, including the median, quartiles, and outliers.
  4. generate_column_chart: Generate a column chart, used to compare values across different categories, suitable for vertical comparisons.
  5. generate_district_map - Generate a district-map, used to show administrative divisions and data distribution.
  6. generate_dual_axes_chart: Generate a dual-axes chart, used to display the relationship between two variables with different units or ranges.
  7. generate_fishbone_diagram: Generate a fishbone diagram, also known as an Ishikawa diagram, used to identify and display the root causes of a problem.
  8. generate_flow_diagram: Generate a flowchart, used to display the steps and sequence of a process.
  9. generate_funnel_chart: Generate a funnel chart, used to display data loss at different stages.
  10. generate_histogram_chart: Generate a histogram, used to display the distribution of data by dividing it into intervals and counting the number of data points in each interval.
  11. generate_line_chart: Generate a line chart, used to display the trend of data over time or another continuous variable.
  12. generate_liquid_chart: Generate a liquid chart, used to display the proportion of data, visually representing percentages in the form of water-filled spheres.
  13. generate_mind_map: Generate a mind-map, used to display thought processes and hierarchical information.
  14. generate_network_graph: Generate a network graph, used to display relationships and connections between nodes.
  15. generate_organization_chart: Generate an organizational chart, used to display the structure of an organization and personnel relationships.
  16. generate_path_map - Generate a path-map, used to display route planning results for POIs.
  17. generate_pie_chart: Generate a pie chart, used to display the proportion of data, dividing it into parts represented by sectors showing the percentage of each part.
  18. generate_pin_map - Generate a pin-map, used to show the distribution of POIs.
  19. generate_radar_chart: Generate a radar chart, used to display multi-dimensional data comprehensively, showing multiple dimensions in a radar-like format.
  20. generate_sankey_chart: Generate a sankey chart, used to display data flow and volume, representing the movement of data between different nodes in a Sankey-style format.
  21. generate_scatter_chart: Generate a scatter plot, used to display the relationship between two variables, showing data points as scattered dots on a coordinate system.
  22. generate_treemap_chart: Generate a treemap, used to display hierarchical data, showing data in rectangular forms where the size of rectangles represents the value of the data.
  23. generate_venn_chart: Generate a venn diagram, used to display relationships between sets, including intersections, unions, and differences.
  24. generate_violin_chart: Generate a violin plot, used to display the distribution of data, combining features of boxplots and density plots to provide a more detailed view of the data distribution.
  25. generate_word_cloud_chart: Generate a word-cloud, used to display the frequency of words in textual data, with font sizes indicating the frequency of each word.
  26. generate_spreadsheet: Generate a spreadsheet or pivot table for displaying tabular data. When 'rows' or 'values' fields are provided, it renders as a pivot table (cross-tabulation); otherwise, it renders as a regular table.

[!NOTE] The above geographic visualization chart generation tool uses AMap service and currently only supports map generation within China.

🤖 Usage

To use with Desktop APP, such as Claude, VSCode, Cline, Cherry Studio, Cursor, and so on, add the MCP server config below. On Mac system:

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

On Window system:

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

Also, you can use it on aliyun, modelscope, glama.ai, smithery.ai or others with HTTP, SSE Protocol.

🎨 Skill Usage

If you are using an AI IDE with skill support (like Claude Code), you can use the chart-visualization skill to automatically select the best chart type and generate visualizations.

You can add the skill from https://github.com/antvis/chart-visualization-skills using:

bash
npx skills add antvis/chart-visualization-skills

Then provide your data or describe the visualization you want. The skill will intelligently choose from 25+ chart types and generate the chart for you.

🚰 Run with SSE or Streamable transport

Run directly

Install the package globally.

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

Run the server with your preferred transport option:

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

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

Then you can access the server at:

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

Docker deploy

Enter the docker directory.

bash
cd docker

Deploy using docker-compose.

bash
docker compose up -d

Then you can access the server at:

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

🎮 CLI Options

You can also use the following CLI options when running the MCP server. Command options by run cli with -H.

plain
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

⚙️ Environment Variables

VariableDescriptionDefaultExample
VIS_REQUEST_SERVERCustom chart generation service URL for private deploymenthttps://antv-studio.alipay.com/api/gpt-vishttps://your-server.com/api/chart
SERVICE_IDService identifier for chart generation records-your-service-id-123
DISABLED_TOOLSComma-separated list of tool names to disable-generate_fishbone_diagram,generate_mind_map

📠 Private Deployment

MCP Server Chart provides a free chart generation service by default. For users with a need for private deployment, they can try using VIS_REQUEST_SERVER to customize their own chart generation service.

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

You can use AntV's project GPT-Vis-SSR to deploy an HTTP service in a private environment, and then pass the URL address through env VIS_REQUEST_SERVER.

  • Method: POST
  • Parameter: Which will be passed to GPT-Vis-SSR for rendering. Such as, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
  • Return: The return object of HTTP service.
    • success: boolean Whether generate chart image successfully.
    • resultObj: string The chart image url.
    • errorMessage: string When success = false, return the error message.

[!NOTE] The private deployment solution currently does not support geographic visualization chart generation include 3 tools: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Generate Records

By default, users are required to save the results themselves, but we also provide a service for viewing the chart generation records, which requires users to generate a service identifier for themselves and configure it.

Use Alipay to scan and open the mini program to generate a personal service identifier (click the "My" menu below, enter the "My Services" page, click the "Generate" button, and click the "Copy" button after success):

<img alt="my service identifier website" width="240" src="https://mdn.alipayobjects.com/huamei_dxq8v0/afts/img/dASoTLt6EywAAAAARqAAAAgADu43AQFr/fmt.webp" />

Next, you need to add the SERVICE_ID environment variable to the MCP server configuration. For example, the configuration for Mac is as follows (for Windows systems, just add the env variable):

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

After updating the MCP Server configuration, you need to restart your AI client application and check again whether you have started and connected to the MCP Server successfully. Then you can try to generate the map again. After the generation is successful, you can go to the "My Map" page of the mini program to view your map generation records.

<img alt="my map records website" width="240" src="https://mdn.alipayobjects.com/huamei_dxq8v0/afts/img/RacFR7emR3QAAAAAUkAAAAgADu43AQFr/original" />

🎛️ Tool Filtering

You can disable specific chart generation tools using the DISABLED_TOOLS environment variable. This is useful when certain tools have compatibility issues with your MCP client or when you want to limit the available functionality.

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

Available tool names for filtering See the ✨ Features.

🔨 Development

Install dependencies:

bash
npm install

Build the server:

bash
npm run build

Start the MCP server:

bash
npm run start

Start the MCP server with SSE transport:

bash
node build/index.js -t sse

Start the MCP server with Streamable transport:

bash
node build/index.js -t streamable

📄 License

MIT@AntV.

常见问题

io.github.antvis/mcp-server-chart 是什么?

A Model Context Protocol server for generating charts using AntV.

相关 Skills

Slack动图

by anthropics

Universal
热门

面向Slack的动图制作Skill,内置emoji/消息GIF的尺寸、帧率和色彩约束、校验与优化流程,适合把创意或上传图片快速做成可直接发送的Slack动画。

帮你快速做出适配 Slack 的动图,内置约束规则和校验工具,少踩上传与播放坑,做表情包和演示都更省心。

平台与服务
未扫描137.2k

MCP构建

by anthropics

Universal
热门

聚焦高质量 MCP Server 开发,覆盖协议研究、工具设计、错误处理与传输选型,适合用 FastMCP 或 MCP SDK 对接外部 API、封装服务能力。

想让 LLM 稳定调用外部 API,就用 MCP构建:从 Python 到 Node 都有成熟指引,帮你更快做出高质量 MCP 服务器。

平台与服务
未扫描137.2k

接口测试套件

by alirezarezvani

Universal
热门

扫描 Next.js、Express、FastAPI、Django REST 的 API 路由,自动生成覆盖鉴权、参数校验、错误码、分页、上传与限流场景的 Vitest 或 Pytest 测试套件。

帮你把API与集成测试自动化跑顺,减少回归漏测;能力全面,尤其适合复杂接口场景的QA团队。

平台与服务
未扫描15.4k

相关 MCP Server

Slack 消息

编辑精选

by Anthropic

热门

Slack 是让 AI 助手直接读写你的 Slack 频道和消息的 MCP 服务器。

这个服务器解决了团队协作中需要 AI 实时获取 Slack 信息的痛点,特别适合开发团队让 Claude 帮忙汇总频道讨论或发送通知。不过,它目前只是参考实现,文档有限,不建议在生产环境直接使用——更适合开发者学习 MCP 如何集成第三方服务。

平台与服务
85.9k

by netdata

热门

io.github.netdata/mcp-server 是让 AI 助手实时监控服务器指标和日志的 MCP 服务器。

这个工具解决了运维人员需要手动检查系统状态的痛点,最适合 DevOps 团队让 Claude 自动分析性能数据。不过,它依赖 NetData 的现有部署,如果你没用过这个监控平台,得先花时间配置。

平台与服务
78.9k

by d4vinci

热门

Scrapling MCP Server 是专为现代网页设计的智能爬虫工具,支持绕过 Cloudflare 等反爬机制。

这个工具解决了爬取动态网页和反爬网站时的头疼问题,特别适合需要批量采集电商价格或新闻数据的开发者。不过,它依赖外部浏览器引擎,资源消耗较大,不适合轻量级任务。

平台与服务
51.1k

评论