🎉 一句话先记住：
把“25+ 种高颜值图表 + 思维导图 + 地图路书”装进任意 LLM 的口袋，3 秒出图，零代码，真免费！

---

🌟 为什么诞生？

过去想让大模型画图 = Prompt 赌博：

• 幻觉频发、JSON 格式乱跑、调试靠玄学
• 前端调库、后端部署、运维监控……链路一拉长，99% 的项目死在上线的路上

蚂蚁 AntV 团队把「GPT-Vis 可视化引擎」+「MCP 标准化协议」打包成开箱即用的 LLM可视化解决方案，让“一句话出图”成为基础设施，而不是 Demo 彩蛋。

---

🧩 两条产品线，一次解决所有可视化需求

名称	一句话定义	亮点	适用场景
mcp-server-chart	基于 MCP 协议的“图表生成即服务”，可生成静态图片以及符合 GPT-Vis 规范的图表配置	25+ 图表、550 ms 出图、99 % 成功率、npm 即装即用	Agent / Copilot / 插件开发者，想给 LLM 装上图表外挂
GPT-Vis	面向 LLM 的 Markdown 可视化组件库	25+ 现成 React 组件、流式渲染	前端同学，要把 AI 输出的“图表 JSON”直接变成 可交互UI

---

⚡ GPT-Vis + MCP 的大模型图表可视化方案

GPT-Vis + MCP 通过标准化协议 + 专业渲染引擎的组合, 渲染可交互图表。

MCP Server Chart - 图表配置专家

Model Context Protocol (MCP) 是一个开放标准,用于 LLM 与外部工具的通信。mcp-server-chart 基于此协议, 专门负责生成符合 GPT-Vis 规范的图表配置。
支持的图表类型：

分类	图表类型
基础统计	折线图、柱状图、条形图、饼图、面积图、散点图
分布分析	直方图、箱线图、小提琴图
关系网络	桑基图、网络图、流程图、思维导图、组织架构图、鱼骨图
层次结构	树图、韦恩图
地理可视化	地图、路径地图、点标注地图
其他	词云图、水波图、双轴图

其标准化输出格式:

interface MCPResponse {
  content: Array<{
    type: "text";
    text: string;  // 静态图表 URL 
  }>;
  _meta?: {
    description: string;      // 图表描述
    spec: {                   // 图表配置(GPT-Vis 可直接使用)
      type: string;           // 图表类型
      data: Array<any>;       // 图表数据
      encode?: object;        // 字段映射
      [key: string]: any;     // 其他配置
    };
  };
}

GPT-Vis - Markdown 可视化引擎

GPT-Vis 是蚂蚁集团 AntV 团队开发的组件库,专为 LLM 生成的可视化内容设计。
核心特性:
● 📝 Markdown 语法: 将图表定义嵌入到 Markdown 中
● 🎨 丰富的图表: 基于 AntV G2、G6、L7 等成熟方案
● 🔄 实时渲染: 流式输出时逐步渲染
使用示例:

import { GPTVis } from '@antv/gpt-vis';

const markdownContent = \`\`\`vis-chart
{
  "type": "line",
  "data": [
    { "time": "2013", "value": 59.3 },
    { "time": "2014", "value": 64.4 },
    { "time": "2015", "value": 68.9 },
    { "time": "2016", "value": 74.4 },
    { "time": "2017", "value": 82.7 }
  ]
}
\`\`\`
`;

export default () => {
  return <GPTVis>{markdownContent}</GPTVis>;
};

AI 项目中使用

连接 MCP 服务（以 nodejs 为例）

● url 为 MCP-Server-Chart 服务地址
● 通过调用 listTools 方法获取 MCP 提供工具列表
● 调用 callTool，其返回值 res 中 包括 _meta 数据
● 使用 _meta.spec 图表数据构造符合 GPT-Vis 渲染的 Markdown 数据流

import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";

const url = "http://localhost:1122/sse";
const transport = new SSEClientTransport(new URL(url), {});
const client = new Client(
    { name: "stress-client", version: "1.0.0" },
    { capabilities: {} },
);

await client.connect(transport);
const listTools = await client.listTools();

const spec = {
  type: "line",
  data: [
    { time: "2020", value: 100 },
    { time: "2021", value: 120 },
    { time: "2022", value: 145 },
    { time: "2023", value: 150 },
    { time: "2024", value: 167 },
    { time: "2025", value: 163 },
  ],
};
const res = await client.callTool({
  name: "generate_line_chart",
  arguments: spec,
});

前端使用 GPT-Vis 渲染可交互图表

import { GPTVis } from '@antv/gpt-vis';

const markdownContent = `
# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.

Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.

\`\`\`vis-chart
{
  "type": "line",
  "data": [
    { "time": "2013", "value": 59.3 },
    { "time": "2014", "value": 64.4 },
    { "time": "2015", "value": 68.9 },
    { "time": "2016", "value": 74.4 },
    { "time": "2017", "value": 82.7 },
    { "time": "2018", "value": 91.9 },
    { "time": "2019", "value": 99.1 },
    { "time": "2020", "value": 101.6 },
    { "time": "2021", "value": 114.4 },
    { "time": "2022", "value": 121 }
  ]
}
\`\`\`
`;

export default () => {
  return <GPTVis>{markdownContent}</GPTVis>;
};

🚀 MCP 典型战绩（2025-10 数据）

• 累计调用 100w+ 次，日活 1.2w
• GitHub Star 3.1k，社区 PR 120+
• 上线 9 大 MCP/Agent 市场（魔搭、百炼、Dify、Glama、Smithery…）
• 平均响应 550 ms，出图成功率 99 %

---

🌈 还能玩什么？

• 路书：一句话生成“上海一日游”带路径地图，扫码即可导航
• 组织架构图 / 鱼骨图 / 桑基图：直接喂 CSV，自动布局
• 雷达图 PK：科比 vs 詹姆斯、原神 vs 星铁，参数自动归一化
• 思维导图：10 天学会前端、夜市卖炒饭商业计划，支持折叠节点

---

📦 多端部署方案

• 公有云：魔搭 / 百炼官方托管，免费额度管够
• 私有云：npm 包 + Docker 镜像，内网 5 分钟拉起
• 离线版：GPT-Vis SSR 导出静态 PNG，断网也能跑

---

📝 结语

GPT-Vis + MCP 通过以下创新,重新定义了 LLM 可视化的标准:

1. 标准化协议: MCP 确保工具调用的规范性
2. 专业渲染: GPT-Vis 提供企业级图表质量
3. 类型安全: TypeScript 全链路保障
4. 开发者友好: 简洁的 API, 丰富的文档
   无论是构建 AI 驱动的数据分析平台,还是为现有应用增加智能可视化能力,这套方案都能提供生产级的可靠性和卓越的开发体验。

🔍 GitHub 地址（Star 不迷路）：
github.com/antvis/mcp-server-chart
github.com/antvis/gpt-vis

🎮 魔搭即刻体验：
modelscope.cn/mcp/servers/@antvis/mcp-server-chart

让数据说话，让 Agent 画图——
mcp-server-chart × GPT-Vis，把想象力直接渲染成现实！

参考文章：
GPT-Vis + MCP 也许是 LLM 可视化的最佳实践