LLM+数据可视化的终点？蚂蚁AntV 的AI新玩法：Text2Graph

悟乙己2025-12-30 9:59

此处申明，非广告贴，纯带货不收钱...

要是有AntV员工看到了，请帮我申报下推广费...

文章目录

  • [1 MCP-Server-AntV](#1 MCP-Server-AntV)
    • [1.1 场景一：从自然语言到图表代码](#1.1 场景一：从自然语言到图表代码)
    • [1.2 场景二：精准、专业的智能问答](#1.2 场景二：精准、专业的智能问答)
    • [1.3 最简单的入门使用](#1.3 最简单的入门使用)
    • [1.4 Dify+ AntV MCP的使用](#1.4 Dify+ AntV MCP的使用)
      • [1.4.1 常规配置](#1.4.1 常规配置)
      • [1.4.2 Dify+可视化图表MCP的玩法](#1.4.2 Dify+可视化图表MCP的玩法)
    • [1.5 在线使用TEXT2Graph 功能](#1.5 在线使用TEXT2Graph 功能)
  • [2 G2](#2 G2)
    • [2.1 G2 5.0](#2.1 G2 5.0)
    • [2.2 Ant Design Charts 2.0：一个 React 的图表库](#2.2 Ant Design Charts 2.0：一个 React 的图表库)
  • [3 G6](#3 G6)
  • [4 Infographic](#4 Infographic)
  • [5 可视化地图一键生成](#5 可视化地图一键生成)
    • [5.1 配置方式](#5.1 配置方式)
    • [5.2 查看地图生成记录](#5.2 查看地图生成记录)

对于 AntV 而言，AI 不应只是一个工具，而应成为一种全新的研发范式。数据可视化也可以跟LLM结合的很深入。

它应该能听懂需求，理解困惑，成为开发者身边最得力的可视化专家。

AntV 将 AI 能力深度集成到开发者的工作流中，旨在提供一个全天候、智能化的可视化助手。它以 MCP-Server-AntV 为底座，主要通过研发、答疑两大核心场景，重塑开发体验。


所有组件地址：

● AntV 官网：https://antv.antgroup.com/

● G：https://github.com/antvis/g - 灵活的可视化渲染引擎，是 AntV 几个产品共同的底层 2D 渲染引擎。

● G2：https://github.com/antvis/g2 - 简洁的渐进式可视化语法，用于报表搭建、数据探索以及可视化叙事。

● S2：https://github.com/antvis/s2 - 开箱即用的多维可视分析表格。

● F2：https://github.com/antvis/f2 - 快速、灵活的移动可视化引擎。

● G6：https://github.com/antvis/g6 - 强分析、高性能、易扩展的图可视分析引擎。

● X6：https://github.com/antvis/X6 - 基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展。

● L7：https://github.com/antvis/l7 - 基于 WebGL 的大规模地理空间数据可视化引擎。

● AVA：https://github.com/antvis/AVA - 智能可视分析框架。

● Ant Design Charts：https://github.com/ant-design/ant-design-charts - 集 AntV 各技术栈的 React 版图表类库，包含统计图表、关系图表以及地理可视化 图表。

● ChartCube：https://chartcube.alipay.com - ChartCube 是一个可以快速完成图表制作的在线工具，只需要三步就可以创建出高品质的图表。

● GraphInsight：https://graphinsight.antgroup.com/ - 是一个低代码图应用研发工具，也是一个在线图可视分析平台。

● LocationInsight：https://locationinsight.antv.antgroup.com/ - LocationInsight 是下一代地理空间数据可视分析平台。

1 MCP-Server-AntV

来源文档

AntV AI-Native 的底层原理源于我们封装的 MCP-Server-AntV。它主要通过提供精心设计的上下文工程，来优化输入信息的质量和相关性，辅助 AI 理解开发者的需求并提供组件的相关最新文档。

  1. 需求精准解析：运用精妙的提示词工程，能够深度分析并提炼用户意图。它将用户输入转化为 AntV 官方文档中定义的精确术语和主题，从而大幅提升大模型对需求的理解深度和准确性。
  2. 复杂任务高效拆解： 面对复杂场景，集成了任务拆解，当识别到复杂任务时，将其拆解为 2-4 个清晰、独立的子任务，有效提高召回准确率。
  3. 专业知识与最佳实践融合：内置的query_antv_document 工具不仅从 AntV

官方知识库中检索最相关最新的文档和问答对，还会在生成代码时动态注入代码风格指南和推荐的最佳实践。使得代码是易于维护的高质量代码。

正是通过这些底层机制，MCP-Server-AntV 能够将自然语言的模糊指令转化为精确、专业的图表代码和技术解答。

目前 MCP-Server-Chart 已经成为社区上最流行的可视化 MCP 工具之一，每天有海量的调用量，这也对我们的 AI 全栈技术能力提出了更高要求。

1.1 场景一：从自然语言到图表代码

传统的图表开发，起点是寻找示例代码。而现在，起点可以是一句自然语言描述。

在 AntV 官网，全新的对话式生成功能，让开发者可以直接表达自己的可视化意图。无论是输入"用面积图展示过去一周每天的平均温度，周一温度为15°C，周二温度为16°C，周三温度为15.5°C，周四温度为17°C，周五温度为18°C，周六温度为19°C，周日温度为20°C。给出一条Y轴的平均值辅助线。"，还是直接点击推荐的模板，AntV AI 都能迅速理解需求，并生成对应的、可直接运行的代码。

更进一步，在浏览 AntV 丰富的图表示例时，开发者不再需要"魔改"固定代码。每个示例旁都提供了一个 AI 对话框，允许基于当前示例进行二次创作。

例如，针对一个已有的堆叠柱状图，可以输入"帮我把它改成分组柱状图，并调整为红色"。AI 会立刻生成修改后的代码，左侧则实时预览新效果。这种"边看边改"的交互，极大地降低了定制化开发的门槛。

1.2 场景二：精准、专业的智能问答

除了代码生成，精准的技术答疑也是提升开发效率的关键。

AntV AI 的智能问答能力，深度整合了 AntV 全系产品的知识。它被集成在官网的搜索框以及社区问答场景中，能够提供远超通用大模型的专业解答。

当开发者遇到问题时，无论是关于特定 API 的用法、新旧版本的差异，还是某个复杂配置项的解释，都可以直接向 AI 提问。它能给出基于最新知识的准确答案。

同时，在 GitHub 的 Issue 和 Discussion 板块，AntV AI 也在逐步承担起初步答疑的职责。它能够快速响应开发者的问题，提供初步的解决方案或引导，有效缩短了反馈周期，分担了社区维护的压力。

通过代码生成与智能问答两大核心能力，AntV AI 将开发者从繁琐的信息搜集与试错工作中解放出来，使其能更专注于数据本身和可视化创意的表达。

1.3 最简单的入门使用

3 步实现 AI 一句话出图

方式 1：直接体验（零代码）

访问魔搭社区 MCP 实验场：
https://modelscope.cn/mcp/servers/@antvis/mcp-server-chart

点击"试用"即可直接与 LLM 对话生成图表。

方式 2：客户端配置（5 行代码）

在 Cline、Cherry Studio 等支持 MCP 的客户端中，添加以下配置即可接入：

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

配置完成后，直接对 LLM 说："用柱状图展示 2020-2024 年中国新能源汽车销量"，3 秒内即可获取高清图表。

方式 3：项目集成（开发者友好）

  1. 安装依赖：npm install @antv/gpt-vis @modelcontextprotocol/sdk；
  2. 调用 MCP 服务获取图表配置；
  3. 用 GPT-Vis 组件渲染可交互图表，支持 Markdown 语法直接嵌入。

1.4 Dify+ AntV MCP的使用

参考文章：当Dify遇上可视化图表MCP（AntV），数据展示像呼吸一样简单

GITHUB 地址：MCP AntV

1.4.1 常规配置

在支持mcp客户端中（如claude、cursor、cline、Cherry Studio）等中，加上一段简单的配置，就能让你的 AI 助手瞬间get到制作图表的超能力。

配置代码长这样：

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

以cherry studio为例，增加mcp-server-chart配置后就可以直接使用了。

比如我想让AI生成一个中国古代诗人名称的词云图，直接给出需求就行了。

调用了mcp中generate_word_cloud_chart工具，一张精美的词云图就出炉了：

1.4.2 Dify+可视化图表MCP的玩法

Dify目前只支持SSE方式使用MCP服务，我要在Agent中调用，首先需要安装支持mcp策略的插件。

在插件市场搜索mcp_sse_agent并安装。

我们还是用之前的应用场景来演示：用户用自然语言提问，我们通过 Dify 工作流从数据库里查询数据，并生成图表。

整个流程中，前面的需求提炼、自然语言转 SQL 等步骤保持不变，但最关键的图表生成环节，就交给 MCP 工具来大显身手了！

为了方便演示，我用 MySQL 数据库搭建了一些示例数据，大概是这个样子：

分析用户问题，判断用户是否需要生成图表，提取出SQL查询的需求。

输出如下：

复制代码 
sql_requirement: [精炼后的数据查询需求]
need_chart: [是/否]
chart_type: [推荐的Echarts图表类型或"无"]

大模型选择了DeepSeek V3。

提示词如下：

复制代码 
你是一名专业的数据需求提炼师。

请仔细阅读用户的自然语言问题{{#context#}}，只保留与数据查询直接相关的核心需求。自动忽略与数据查询无关的内容（如生成图表、导出Excel、制作报表等）。

请判断用户是否需要用图表展示结果。如果需要，请根据问题内容推荐最合适的Echarts图表类型（如area、bar、column、dual-axes、fishbone-diagram、flow-diagram、histogram、line、mind-map、network-graph、pie、radar、scatter、treemap、word-cloud等）；如果不需要图表，请填写"无"。

请严格按照如下格式输出，不要有任何解释或多余内容：
sql_requirement: [精炼后的数据查询需求]
need_chart: [是/否]
chart_type: [推荐的Echarts图表类型或"无"]

把上一个节点的三个输出参数提取出来。

这个节点的核心功能就是把用户的自然语言转成SQL语句了。

输入为提取后的SQL语句需求，关联参数提取节点的sql_requirement。

数据库配置: 正确填写数据库类型、IP、端口、库名、用户名、密码。

大模型：我这里就用DeepSeek V3了。

复制代码 
表名：boxoffice
字段说明：
- years：年份，int
- movie_name：电影名，string
- score：评分，float
- director：导演，string
- box_office：票房，int

注意事项：
- 如有分组统计，请使用SUM、AVG等聚合函数，不要直接用原始字段。
- 所有非聚合字段必须出现在GROUP BY中。
- 只输出SQL语句，不要解释。

示例查询：
1. 查询每个导演的总票房：SELECT director, SUM(box_office) FROM boxoffice GROUP BY director;
2. 查询每年票房最高的电影：SELECT years, movie_name, MAX(box_office) FROM boxoffice GROUP BY years;

省略几个节点，如果需要生成图表，走这个节点。

Agent策略选择我们之前安装的插件【支持MCP工具的Agent】->ReAct（Support MCP Tools）。

直接跳到测试：

比如问一下各导演的票房占比，可以看到给出了分析结果和图片链接地址。

1.5 在线使用TEXT2Graph 功能

来到官网：https://antv.antgroup.com/

复制代码 
你有一份销售数据：data = [{month: '1月', value: 100}, {month: '2月', value: 120}, {month: '3月', value: 90}, {month: '4月', value: 110}]， 请使用F2绘制一个折线图，并在最后一个数据点上添加文本标注。

前端就会生成一个代码以及图片：

也可以画组织图：

复制代码 
绘制一个组织架构图，用分层布局自上而下排布。节点间距为50、层级间距为100；所有节点为圆形，大小40、描边宽度2，按层级着色：第一层#5B8FF9、第二层#5AD8A6、第三层#F6BD16。节点文本放置在节点下方15px处，文字颜色#1890FF、字号14px、字重500。连线采用曲线样式，颜色#BFBFBF、宽度1、透明度0.6。整体图形水平居中、垂直自上而下，同层级节点等间距分布，确保视觉清晰、层次分明并保持整体美观。

2 G2

G2 是蚂蚁集团 AntV 团队推出的一套可视化语法，专注于创造基于网页的可视化。

25+ 图表全覆盖，满足全场景需求

从基础统计到复杂关系可视化，插件支持一站式生成：

  • ● 统计类：折线图、柱状图、双轴图、饼图、直方图等；
  • ● 关系类：思维导图、组织架构图、网络图、鱼骨图、桑基图等；
  • ● 地理类：标注地图、路径地图（路书），支持行程规划一键可视化；
  • ● 特色类：词云图、水波图、韦恩图等，适配多样化表达场景。

2.1 G2 5.0

无论是"生成 2024 年全球新能源汽车销量柱状图"，还是"画出《百年孤独》主要人物关系网"，亦或是"规划上海一日游路书地图"，LLM 都能快速响应，输出高清图片与可交互网页双资产。


为了让开发者能更好地了解 G2 的能力和学习 G2 的使用方式，我们也对官网进行了优化。首先是引入了交互式文档的概念，让官网文档中的代码块都可以运行的，从而看到最后的可视化效果。

其次是给官网的案例增加了 Spec 切换按钮，可以一键看到图表的 Spec 配置。最后是基于 5.0 的主题增加了主题构建器，可以根据自己的场景自定义主题。

自动布局

组件（坐标轴、图例和滑动轴等）的布局和展示一直是可视化中的难点和痛点。在 4.0 中，需要对组件绘制两次，然后基于此调整坐标系，才能得到最后的布局结果，这会造成一定性能损失。而 5.0 采用的布局算法，只用绘制一次组件，同时缓存计算结果，减少了这部分的性能损失。另一方面，也优化了在多个组件的存在的情况下的布局效果，比如多个图例、多个坐标轴等。

交互增强

交互是可视化中很重要的一部分，我们对此也进行了优化。第一，对 4.0 版本拥有的交互进行了全面的升级，提高了自定义的能力，比如支持自定义 brushFilter 中 brush 的样式，以及支持改变大小等。

第二，通过 chart.on和 chart.emitAPI 暴露了获得和设置交互状态的能力，大大降低了实现图表联动的成本。

更多 Mark 和图表

为了满足更丰富的场景，我们也推出了更多 Mark，Shape 以及 Data 等，用于绘制更多的图表，比如 Density、Venn、Liquid 和 Trail 等。

2.2 Ant Design Charts 2.0：一个 React 的图表库

对图表的丰富度（包含 34+ 图表）和交互等进行了加强。目前 Ant Design Charts 2.0 已经在蚂蚁内部多个业务落地，欢迎大家试用。

3 G6

地址：https://g6.antv.antgroup.com/

github：https://github.com/antvis/G6/blob/v5/README.zh-CN.md

AntV G6 是一款开源的图可视化与分析引擎。最新版本 G6 5.0，带来了一系列令人振奋的新功能和改进，进一步提升了图可视化的性能和体验。

时&空&统计，图连万物有方案

关系数据是描述世界万物最自然的表达。G6 5.0 让 AntV 全家桶强强联手，不论是「图 x 地理数据」，「图 x 时序」，还是「图 x 统计数据」，都能用 G6 完美表达！

这里有一些图解决方案的白皮书：地址




G6 作为一款专业的图可视化引擎，具有以下特性：

  • 丰富的元素：内置丰富的节点、边、Combo UI 元素，样式配置丰富，支持数据回调，且具备有灵活扩展自定义元素的机制。
  • 可控的交互：内置 10+ 交互行为，且提供丰富的各类事件，便于扩展自定义的交互行为。
  • 高性能布局：内置 10+ 常用的图布局，部分基于 GPU、Rust 并行计算提升性能，支持自定义布局。
  • 便捷的组件：优化内置组件功能及性能，且有灵活的扩展性，便于业务实现定制能力。
  • 多主题色板：提供了亮色、暗色两套内置主题，在 AntV 新色板前提下，融入 20+ 常用社区色板。
  • 多环境渲染：发挥 G 能力， 支持 Canvas、SVG 以及 WebGL，和 Node.js 服务端渲染；基于 WebGL 提供强大 3D 渲染和空间交互的插件包。
  • React 体系：利用 React 前端生态，支持 React 节点，大大丰富 G6 的节点呈现样式。

4 Infographic

新一代信息图可视化引擎，让文字信息栩栩如生！

GITHUB地址：文档

AntV Infographic 是 AntV 推出的新一代声明式信息图可视化引擎。通过统一的语法与组件体系，你可以将结构化数据以优雅、灵活的方式渲染为高质量的信息图，让信息表达更高效，让数据叙事更简单。

📦 开箱即用：内置 100+ 信息图模板、数据项组件与布局，快速构建专业信息图

🎨 主题系统：支持手绘（rough）、渐变、图案、多套预设主题，并支持深度自定义

🧑🏻‍💻 内置编辑器：内置信息图的编辑器，让 AI 生成之后可以二次编辑微调

🧩 组件化架构：数据项、结构布局、渲染单元完全组件化，可灵活组合与扩展

🎯 声明式配置：简单清晰的配置方式，更适合 AI 生成、机器理解与自动化流程

🤖 AI 友好：完善的 JSON Schema 定义，使大模型可自动生成可用配置

📐 高质量 SVG 输出：默认基于 SVG 渲染，保证视觉品质与可编辑性

5 可视化地图一键生成

来自：AntV Chart MCP 插件再升级：可视化地图一键生成

高德、百度等地图服务商都在发力 MCP Server，数据服务有了，但地图可视化呢？现在，AntV Chart MCP 插件再升级，这次是专为地图可视化定制的 MCP Server！轻松为你的 AI 应用接入地图生成能力，让数据看得见，更有交互地图可以体验。

AntV Chart MCP Server 提供了 3 个工具用于生成不同类型的地图：标注地图、路线地图、行政区划分布地图。其中，地点标注地图支持简单风格的定位图标以及定制风格的圆形、矩形照片图标；行政区划地图支持查看区域构成、数据的区域分布等多种场景。

5.1 配置方式

在 Mac 系统上，可以这么配置：

复制代码 
{
  "mcpServers": {
    "AntV Chart": {
      "command": "npx",
      "args": [
        "--registry=https://registry.npmjs.org/",
        "-y",
        "@antv/mcp-server-chart@latest"
      ]
    }
  }
}

如果你使用的是 Windows 系统，可以这么配置：

复制代码 
{
  "mcpServers": {
    "AntV Chart": {
      "command": "cmd",
      "args": [
        "/c", 
        "npx", 
        "--registry=https://registry.npmjs.org/",
        "-y",
        "@antv/mcp-server-chart@latest"
      ]
    }
  }
}

配置好后，需要确认 AI 客户端应用已经启动并连接 AntV Chart MCP Server 成功，例如在 Cursor、Windsurf 中，我们可以看到以下状态：

接下来，我们就可以体验地图生成功能了，你需要在 AI 客户端应用中选择可以调用工具（Tools Call/Function Call）的 AI 模型，直接输入一些简单的提示词，例如：

复制代码 
三山五岳都在哪些地方，帮我生成标注地图。

我想看看《黑神话：悟空》游戏的取景地有哪些地点，帮我生成标注地图，标记点使用圆形的景点图片。

上海有哪些老字号的美食店，帮我生成分布地图，不需要地点的照片。

据说 318 国道非常适合自驾游，沿途的景点美不胜收，帮我生成路线地图。

如果西湖景点发生火灾，帮我生成西湖区消防救援队到达西湖景点的路线地图。

最近全国高考刚结束，我想知道全国各省份的高考模式是什么情况，帮我生成一个分布地图。

我想看看江苏省各个城市的 GDP 分布情况，帮我生成一张 GDP 分布地图，使用蓝色配色。

我想知道全国各个省的上市公司数量分布情况，帮我生成分布地图。

AI 模型调用 AntV Chart MCP Server 成功后，你会得到两个图片的链接:

  • 一个是生成的静态地图图片
  • 另一个是可以使用支付宝扫一扫的二维码（可以预览的可交互动态地图页面）。

你可以将其保存下来，随时查看或者分享给你的朋友们。

5.2 查看地图生成记录

默认情况下生成结果需要用户主动保存，为了进一步提升用户体验，我们还为用户提供了支付宝小程序应用，实现用户可以随时随地查看生成的地图记录，使用该服务需要生成个人的 SERVICE_ID（不收费，仅作为统计个人的地图生成记录使用；不配置，则不会保存生成记录到服务端）。使用支付宝扫一扫下面的小程序二维码，生成个人 「SERVICE_ID」（点击下方「我的」菜单，进入「我的服务」页面，点击「生成」按钮，成功后点击「复制」按钮即可）：

别忘了点击右上角的「收藏」，避免忘记怎么访问小程序接下来，需要在 MCP Server 的配置中添加 SERVICE_ID 环境变量，例如 Mac 系统的配置（Windows 同理添加 env 变量即可）如下：

复制代码 
{
  "mcpServers": {
    "AntV Chart": {
      "command": "npx",
      "args": [
        "--registry=https://registry.npmjs.org/",
        "-y",
        "@antv/mcp-server-chart@latest"
      ],
      "env": {
        "SERVICE_ID": "***********************************",
      }
    }
  }
}

更新 MCP Server 配置后，记得重启你的 AI 客户端应用，并再次检查是否已经启动并连接 AntV Chart MCP Server 成功，然后你可以尝试再次生成地图，生成成功后，就可以去小程序「我的地图」页面查看你的地图生成记录了。

相关推荐
CoderJia程序员甲2 小时前
GitHub 热榜项目 - 日榜(2025-12-29)
ai·开源·llm·github
SCBAiotAigc2 小时前
opencv-python学习笔记（一）：画线、打开摄像头
人工智能·python·opencv
Sopaco2 小时前
从会话历史到智能记忆：Cortex Memory如何重新定义AI记忆系统
人工智能
沫儿笙2 小时前
库卡机器人钢结构焊接WGFACS节气装置
人工智能·机器人
J_Xiong01172 小时前
【VLMs篇】12：Cambrian-S：迈向视频中的空间超感知
人工智能·机器人
轻竹办公PPT2 小时前
2026 年工作计划 PPT 制作，对比几种 AI 生成思路
人工智能·python·powerpoint
RestCloud2 小时前
谷云科技发布 API × AI 战略：让 AI 从“理解数据”走向“驱动业务能力”
人工智能·科技·api·数据集成·ipaas·aiagent·ai网关
其美杰布-富贵-李2 小时前
PyTorch Lightning 中 TorchMetrics
人工智能·pytorch·python·计算损失
苛子2 小时前
谷云科技发布API × AI 战略是什么？
大数据·人工智能
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击03Linux下V2Ray安装配置指南04电脑检测软件—图吧工具箱05Claude Code Skills 实用使用手册06jdk21下载、安装（Windows、Linux、macOS）07UV安装并设置国内源08Web安全中SQL注入绕过WAF的具体手法和实战案例09BongoCat - 跨平台键盘猫动画工具10SQLmap 完整使用指南：环境搭建 + 命令详解 + 实操案例