介绍

mcp-server-chart是基于antv的图标MCP，可以轻松的让大模型生成各种图表。

支持图表类型

支持生成超过25款图表，基本市面上常见图表都支持生成

• 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.
• generate_bar_chart: Generate a bar chart, used to compare values across different categories, suitable for horizontal comparisons.
• generate_boxplot_chart: Generate a boxplot, used to display the distribution of data, including the median, quartiles, and outliers.
• generate_column_chart: Generate a column chart, used to compare values across different categories, suitable for vertical comparisons.
• generate_district_map - Generate a district-map, used to show administrative divisions and data distribution.
• generate_dual_axes_chart: Generate a dual-axes chart, used to display the relationship between two variables with different units or ranges.
• generate_fishbone_diagram: Generate a fishbone diagram, also known as an Ishikawa diagram, used to identify and display the root causes of a problem.
• generate_flow_diagram: Generate a flowchart, used to display the steps and sequence of a process.
• generate_funnel_chart: Generate a funnel chart, used to display data loss at different stages.
• 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.
• generate_line_chart: Generate a line chart, used to display the trend of data over time or another continuous variable.
• generate_liquid_chart: Generate a liquid chart, used to display the proportion of data, visually representing percentages in the form of water-filled spheres.
• generate_mind_map: Generate a mind-map, used to display thought processes and hierarchical information.
• generate_network_graph: Generate a network graph, used to display relationships and connections between nodes.
• generate_organization_chart: Generate an organizational chart, used to display the structure of an organization and personnel relationships.
• generate_path_map - Generate a path-map, used to display route planning results for POIs.
• 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.
• generate_pin_map - Generate a pin-map, used to show the distribution of POIs.
• generate_radar_chart: Generate a radar chart, used to display multi-dimensional data comprehensively, showing multiple dimensions in a radar-like format.
• 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.
• 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.
• 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.
• generate_venn_chart: Generate a venn diagram, used to display relationships between sets, including intersections, unions, and differences.
• 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.
• 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.

安装

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

启动

# sse, http://localhost:1122/sse
mcp-server-chart --transport sse

# http streamable, http://localhost:1122/mcp
mcp-server-chart --transport streamable

调用

先安装依赖

npm i @modelcontextprotocol/sdk

初始化client后调用

// mcp
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';

// transport, mcpUrl为上面启动后的url
const transport = new StreamableHTTPClientTransport(new URL(mcpUrl));

// client
const client = new Client({ name: '', version: '' });
client.onmessage = (msg) => {};
client.onerror = (err) => {};

// client connect
await client.connect(transport);

// client list tools
await client.listTools();

// client call tool
await client.callTool({
  name: name,
  arguments: parameters,
});

// client close
await client.close();

在线体验

推荐一个在线体验的地址：mcp-servers.online