可

可视化图表-MCP-Server

这是一个基于AntV的模型上下文协议服务器，用于生成图表。它支持超过20种类型的图表，并且可以与多种桌面应用程序和平台一起使用。

developer-tools

12.6w 查看 · 2026-07-07 更新

简介

这是一个基于AntV的模型上下文协议服务器，用于生成图表。它支持超过20种类型的图表，并且可以与多种桌面应用程序和平台一起使用。

简介

这是一个基于AntV的模型上下文协议服务器，用于生成图表。它支持超过20种类型的图表，并且可以与多种桌面应用程序和平台一起使用。

MCP 服务器图表

一个用于生成图表的 Model Context Protocol 服务器，使用 AntV。

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

✨ 功能

现已支持 20 多种图表。

generate_area_chart: 生成 面积 图表，用于显示连续自变量下的数据趋势，便于观察整体数据趋势。
generate_bar_chart: 生成 条形 图表，用于比较不同类别的值，适合水平比较。
generate_boxplot_chart: 生成 箱线图，用于显示数据分布，包括中位数、四分位数和异常值。
generate_column_chart: 生成 柱状 图表，用于比较不同类别的值，适合垂直比较。
generate_district_map - 生成 行政区划地图，用于显示行政区域划分和数据分布。
generate_dual_axes_chart: 生成 双轴 图表，用于显示两个具有不同单位或范围的变量之间的关系。
generate_fishbone_diagram: 生成 鱼骨图，也称为石川图，用于识别并显示问题的根本原因。
generate_flow_diagram: 生成 流程图，用于显示过程中的步骤和顺序。
generate_funnel_chart: 生成 漏斗 图表，用于显示不同阶段的数据流失情况。
generate_histogram_chart: 生成 直方图，通过将数据分成区间并计算每个区间内的数据点数量来显示数据分布。
generate_line_chart: 生成 折线 图表，用于显示随时间或其他连续变量变化的数据趋势。
generate_liquid_chart: 生成 液体 图表，用于显示数据的比例，以水填充球体的形式直观表示百分比。
generate_mind_map: 生成 思维导图，用于显示思维过程和层次信息。
generate_network_graph: 生成 网络 图，用于显示节点之间的关系和连接。
generate_organization_chart: 生成 组织结构 图表，用于显示组织结构和人员关系。
generate_path_map - 生成 路径地图，用于显示 POI 的路线规划结果。
generate_pie_chart: 生成 饼图，用于显示数据的比例，将其分为由扇形表示的部分，显示每个部分的百分比。
generate_pin_map - 生成 标记地图，用于显示 POI 的分布。
generate_radar_chart: 生成 雷达 图表，用于全面显示多维数据，在类似雷达的格式中显示多个维度。1. generate_sankey_chart: 生成sankey图，用于显示数据流和量，以Sankey样式格式表示不同节点间的数据流动。
generate_scatter_chart: 生成scatter散点图，用于显示两个变量之间的关系，在坐标系上以分散的点形式展示数据点。
generate_treemap_chart: 生成treemap树状图，用于显示层次结构数据，通过矩形的形式展现数据，其中矩形的大小代表数据值。
generate_venn_chart: 生成venn文氏图，用于显示集合间的关系，包括交集、并集和差集。
generate_violin_chart: 生成violin小提琴图，用于显示数据分布情况，结合箱线图和密度图的特点提供更详细的数据分布视图。
generate_word_cloud_chart: 生成word-cloud词云图，用于显示文本数据中词语出现的频率，字体大小表示每个词的频率。

[!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"
      ]
    }
  }
}

此外，您还可以通过HTTP或SSE协议在阿里云、modelscope、glama.ai 或 smithery.ai 等平台上使用它。

🚰 通过SSE或Streamable传输运行

全局安装包。

bash 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参数的命令来查看选项。

plain MCP Server Chart CLI

选项: --transport, -t 指定传输协议："stdio"、"sse" 或 "streamable"（默认："stdio"） --port, -p 为SSE或streamable传输指定端口（默认：1122） --endpoint, -e 指定传输端点：

对于SSE：默认是"/sse"
对于streamable：默认是"/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": "<您的_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 时，返回错误信息。

[!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。

工具列表

generate_area_chart: Generate a area chart to show data trends under continuous independent variables and observe the overall data trend, such as, displacement = velocity (average or instantaneous) × time: s = v × t. If the x-axis is time (t) and the y-axis is velocity (v) at each moment, an area chart allows you to observe the trend of velocity over time and infer the distance traveled by the area's size.
generate_bar_chart: Generate a bar chart to show data for numerical comparisons among different categories, such as, comparing categorical data and for horizontal comparisons.
generate_boxplot_chart: Generate a boxplot chart to show data for statistical summaries among different categories, such as, comparing the distribution of data points across categories.
generate_column_chart: Generate a column chart, which are best for comparing categorical data, such as, when values are close, column charts are preferable because our eyes are better at judging height than other visual elements like area or angles.
generate_district_map: Generates regional distribution maps, which are usually used to show the administrative divisions and coverage of a dataset. It is not suitable for showing the distribution of specific locations, such as urban administrative divisions, GDP distribution maps of provinces and cities across the country, etc. This tool is limited to generating data maps within China.
generate_dual_axes_chart: Generate a dual axes chart which is a combination chart that integrates two different chart types, typically combining a bar chart with a line chart to display both the trend and comparison of data, such as, the trend of sales and profit over time.
generate_fishbone_diagram: Generate a fishbone diagram chart to uses a fish skeleton, like structure to display the causes or effects of a core problem, with the problem as the fish head and the causes/effects as the fish bones. It suits problems that can be split into multiple related factors.
generate_flow_diagram: Generate a flow diagram chart to show the steps and decision points of a process or system, such as, scenarios requiring linear process presentation.
generate_funnel_chart: Generate a funnel chart to visualize the progressive reduction of data as it passes through stages, such as, the conversion rates of users from visiting a website to completing a purchase.
generate_histogram_chart: Generate a histogram chart to show the frequency of data points within a certain range. It can observe data distribution, such as, normal and skewed distributions, and identify data concentration areas and extreme points.
generate_line_chart: Generate a line chart to show trends over time, such as, the ratio of Apple computer sales to Apple's profits changed from 2000 to 2016.
generate_liquid_chart: Generate a liquid chart to visualize a single value as a percentage, such as, the current occupancy rate of a reservoir or the completion percentage of a project.
generate_mind_map: Generate a mind map chart to organizes and presents information in a hierarchical structure with branches radiating from a central topic, such as, a diagram showing the relationship between a main topic and its subtopics.
generate_network_graph: Generate a network graph chart to show relationships (edges) between entities (nodes), such as, relationships between people in social networks.
generate_organization_chart: Generate an organization chart to visualize the hierarchical structure of an organization, such as, a diagram showing the relationship between a CEO and their direct reports.
generate_path_map: Generate a route map to display the user's planned route, such as travel guide routes.
generate_pie_chart: Generate a pie chart to show the proportion of parts, such as, market share and budget allocation.
generate_pin_map: Generate a point map to display the location and distribution of point data on the map, such as the location distribution of attractions, hospitals, supermarkets, etc.
generate_radar_chart: Generate a radar chart to display multidimensional data (four dimensions or more), such as, evaluate Huawei and Apple phones in terms of five dimensions: ease of use, functionality, camera, benchmark scores, and battery life.
generate_sankey_chart: Generate a sankey chart to visualize the flow of data between different stages or categories, such as, the user journey from landing on a page to completing a purchase.
generate_scatter_chart: Generate a scatter chart to show the relationship between two variables, helps discover their relationship or trends, such as, the strength of correlation, data distribution patterns.
generate_treemap_chart: Generate a treemap chart to display hierarchical data and can intuitively show comparisons between items at the same level, such as, show disk space usage with treemap.
generate_venn_chart: Generate a Venn diagram to visualize the relationships between different sets, showing how they intersect and overlap, such as the commonalities and differences between various groups.
generate_violin_chart: Generate a violin chart to show data for statistical summaries among different categories, such as, comparing the distribution of data points across categories.
generate_word_cloud_chart: Generate a word cloud chart to show word frequency or weight through text size variation, such as, analyzing common words in social media, reviews, or feedback.

服务配置

[{'mcpServers': {'mcp-server-chart': {'args': ['-y', '@antv/mcp-server-chart'], 'command': 'npx'}}}, {'mcpServers': {'mcp-server-chart': {'args': ['/c', 'npx', '-y', '@antv/mcp-server-chart'], 'command': 'cmd'}}}, {'mcpServers': {'mcp-server-chart': {'args': ['-y', '@antv/mcp-server-chart'], 'command': 'npx', 'env': {'VIS_REQUEST_SERVER': '<YOUR_VIS_REQUEST_SERVER>'}}}}, {'mcpServers': {'AntV Map': {'args': ['-y', '@antv/mcp-server-chart'], 'command': 'npx', 'env': {'SERVICE_ID': '***********************************'}}}}]

来源

来源：github
链接：https://github.com/antvis/mcp-server-chart