AntV 对生成式可视化的探索：从 Infographic 到 GPT-Vis

数据可视化领域这几年最大的变量是 AI。

过去，做一张信息图或图表，要么依赖设计工具（Figma、Canva），要么写代码（D3、ECharts）。现在，这两条路正在被 AI 重新定义：让模型直接生成可视化。

AntV 团队在这个方向上做了几件有意思的事。

两套方案，两种思路

AntV 在生成式可视化上有两条并行路线：

Infographic：声明式信息图引擎，专注”让文字活起来”
GPT-Vis：AI 原生图表库，为 LLM 时代设计

表面看都是”AI + 可视化”，但底层逻辑完全不同。

Infographic：模板驱动的声明式引擎

Infographic 的核心是一个声明式语法：

import { Infographic } from '@antv/infographic';

const syntax = `
infographic list-row-horizontal-icon-arrow
data
  title 互联网技术演进史
  desc 从Web 1.0到AI时代的关键里程碑
  items
    - time 1991
      label 万维网诞生
      desc Tim Berners-Lee发布首个网站
      icon mdi/web
    - time 2004
      label Web 2.0
      desc 用户生成内容成为主流
`;

const infographic = new Infographic({ container: '#app' });
infographic.render(syntax);

这种设计的本质是：把信息图拆成”模板 + 数据”。

模型不需要理解 SVG 或 Canvas，只需要填空：选一个模板，填入结构化数据。这让 AI 生成的门槛大幅降低——输出一段文本配置比生成代码简单得多。

Infographic 内置了约 200 个模板，覆盖时间线、对比图、流程图、列表、图表等常见场景。模板由专业设计师制作，保证产出质量稳定。

GPT-Vis：代码生成的另一种路径

GPT-Vis 走的是另一条路：让 LLM 直接生成图表代码。

它的语法设计目标不是”人类易写”，而是”LLM 易生成”：

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

const visSyntax = `
vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
  - time 2022
    value 150
style
  lineWidth 3
  palette #5B8FF9 #5AD8A6
`;

const gptVis = new GPTVis({ container: '#chart' });
gptVis.render(visSyntax);

这种类似 Markdown 的语法结构，对 LLM 来说比 JSON 或 JavaScript 对象更友好。模型不需要处理引号转义、嵌套括号匹配，只需要按缩进输出结构化文本。

GPT-Vis 支持 16 种图表类型，从基础的折线图、柱状图到进阶的桑基图、树图都有覆盖。

为什么需要两套方案

看起来 Infographic 和 GPT-Vis 有点重复，但它们解决的问题不同。

Infographic 适合”讲故事的图”：时间线、流程图、对比列表、SWOT 分析。这些图的核心是信息组织，而不是数据精度。模板能保证视觉一致性，AI 只需要填内容。

GPT-Vis 适合”数据驱动的图”：统计图表、关系图、分布图。这些图需要精确的数据绑定和交互能力，模板化的方式反而会限制灵活性。

简单说：

要展示”产品发布的五个阶段”→ Infographic
要展示”过去三年的销售趋势”→ GPT-Vis

流式渲染：AI 时代的刚需

两套方案都支持一个关键能力：流式渲染。

传统可视化库要求一次性传入完整配置。但 LLM 是逐 token 输出的，用户需要等模型生成完才能看到结果。

Infographic 和 GPT-Vis 都支持在 AI 流式输出过程中实时渲染。模型输出一行，图表就更新一次。这种体验差异很大——用户不再是盯着空白等结果，而是看着信息图一点点”长出来”。

这对产品体验的影响是质的：从”等待”变成”参与”。

MCP Server：把可视化能力接入 Agent

AntV 还做了一个容易被忽视的产品：Chart Generator MCP Server。

MCP（Model Context Protocol）是 Anthropic 推出的工具协议，让 AI 模型能调用外部能力。AntV 的 MCP Server 把 25+ 种图表类型打包成工具，任何支持 MCP 的 Agent 都可以直接调用。

这意味着：

Claude Desktop 用户可以直接让 AI 生成图表
自定义 Agent 可以通过工具调用获得可视化能力
不需要在 Prompt 里教模型怎么写 ECharts 配置

这种”能力封装”的思路，比”教模型写代码”更务实。

还有什么没解决的问题

生成式可视化目前还有几个硬伤：

数据准确性：模型生成图表时，数字可能被”美化”。比如数据是 1234，模型可能顺手改成 1200。这对数据可视化是致命的。

定制能力受限：Infographic 的模板系统虽然提供了 200 个选项，但一旦需要模板之外的效果，就得自己写代码。GPT-Vis 的语法虽然简洁，但也牺牲了灵活性。

审美天花板：模板化产出保证了下限，但也限制了上限。想要独特的设计风格，AI 生成的东西往往”太像 AI”。

小结

AntV 在生成式可视化上的探索，核心思路是：为 AI 设计专用语法，而不是让 AI 适应现有工具。

Infographic 的模板语法、GPT-Vis 的 Markdown 式语法、MCP Server 的工具封装，都是这个思路的体现。它们不是”让 AI 学会用 ECharts”，而是”设计一种 AI 天然会用的可视化协议”。

这个方向的价值在于：把可视化从”专业技能”变成”自然语言就能触达的能力”。当门槛足够低，信息图和图表的使用场景会被放大——不是只有分析师才做图表，任何人表达想法时都能顺手生成一张。