RFC: GPT-Vis 1.0 stable, AntV Visualization for AI, Friendly!

[hustcc]

背景

GPT-Vis 开源了有接近一年多了，当时还是在 RAG 时代，期望通过组件 + 知识库，为 AI 带来可视化能力，再结合 Markdown 输出，让大模型能多模态输出能力，验证来看确实是不错的。到现在，大量以 Markdown 为协议作为 LLM 输出的方案。

谁能想到 Markdown 会成为 AI 时代的基础设施。

这一点 AntV 也算走在前列，可惜的是 GPT-Vis 没有在社区形成足够的影响力和规范。

当前蚂蚁的 Ant Design X 中 x-markdown 方案，聚焦在 Markdown 的大模型输出，并内置了一些 UI 组件，客观来说，确实在 Ant Design 中是更合适的，不过更好的架构是提供非 React 依赖的库，然后在以此封装 React、Vue 等技术栈方案，让前端的大模型渲染上可以保持一致。

基于这些背景，GPT-Vis 需要做一些技术定位的转型，避免重叠和重复，保持特色。

定位

GPT-Vis 当初取名，就是为了给 AI 提供 Vis 能力，只不过在 antv 组织中，更多的考虑的是数据的可视化。现在依然沿用这个名字和释义。

GPT-Vis, Visualization for AI, Friendly! AntV's entry under AI, includes G2, S2, G6, X6, L7.

新定位：为大模型提供 AI 友好的可视化组件库，作为 AntV 在 AI 环境的入口，用于在 AI 数据可视化，AI 数据分析，AI 报告，PPT 等提供素材。

原因主要有：

1. AI 下，用户会逐步淡化数据可视化底层引擎，用户关注的是自己的需求，AI 的解决方案才是最重要的
2. AI 友好，是一个长期需要追随的话题，AI 概念一年一个，从 Promot -> MCP -> Skill，不跟随的话，在 AI 的选择中最终就会被落下
3. 纯粹一些，和 Ant Design X 配合协同，收获更大的 ROI

方案

主要关注一下点：

• 非技术限定，当前是 React 组件
• 提供常见的 20+ 统计图表，提升图表能力、体验，减小包大小
• AI 可视化语法（参考 Infographic，流式渲染，容错性）
• Skills 使用方式，在各种场景使用（出码、可视化、分析）

示例

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

const g = new GPTVis({
  container: '#container',
  width: 600,
  height: 400,
  withContainer: true,
});

g.render(`
vis pie
data
  - category 分类一
    value  27
  - category 分类二
    value 25
  - category 分类三
    value 18
  - category 分类四
    value 15
  - category 分类五
    value 10
  - category 其他
    value 5
theme academy
innerRadius: 0.6
`);

// 或者
g.render({
  "type": "pie",
  "data": [
    { "category": "分类一", "value": 27 },
    { "category": "分类二", "value": 25 },
    { "category": "分类三", "value": 18 },
    { "category": "分类四", "value": 15 },
    { "category": "分类五", "value": 10 },
    { "category": "其他", "value": 5 }
  ],
  "innerRadius": 0.6,
  "theme": "academy"
});

English Version

Background

GPT-Vis has been open-source for over a year. Introduced during the RAG era, the goal was to integrate components and knowledge bases to empower AI with visualization capabilities, coupled with Markdown outputs for multimodal capabilities. The results have indeed been promising. Today, many solutions leverage Markdown as the protocol for LLM outputs.

Who would have thought Markdown would become the infrastructure for the AI era.

In this regard, AntV has been a pioneer. However, GPT-Vis has yet to achieve sufficient influence or establish standards in the community.

Currently, Ant Design X’s x-markdown focuses on large language model (LLM) output via Markdown, incorporating built-in UI components. Admittedly, this aligns well with Ant Design. However, the ideal architecture involves providing libraries independent of React, then wrapping them into solutions tailored for React, Vue, or other tech stacks. This ensures consistent rendering for LLM-powered frontend solutions.

Given this background, GPT-Vis requires a strategic shift to avoid redundancy, while maintaining its distinct features.

Positioning

When GPT-Vis was named, its intent was to deliver visualization capabilities for AI, though the focus within the AntV organization was primarily data visualization. The name and its purpose remain consistent today.

GPT-Vis, Visualization for AI, Friendly! AntV's entry under AI, includes G2, S2, G6, X6, L7.

New product positioning: Provide an AI-friendly visual component library for large models, serving as a resource for AI data visualization, AI data analysis, AI reports, PPT presentations, and more.

Reasons:

1.. Under AI, users will gradually shift focus away from the underlying engines of data visualization, focusing instead on their specific needs and AI solutions.
2. Being AI-friendly is a long-term theme that needs to be followed. AI evolves rapidly, with transitions from Prompt -> MCP -> Skill. Without keeping pace, one risks being left behind in the AI race.
3. Keeping things straightforward enables better collaboration with Ant Design X, leading to higher ROI.

Plan

The focus areas include:

• Without technical constraints, it is currently a React component
• Offering 20+ common chart types to enhance capabilities, improve user experience, and reduce package size.
• Developing an AI visualization syntax (reference Infographic, for stream rendering and fault tolerance).
• Implementing Skills use cases across scenarios (generating code, visualization, and analysis).

Show Case

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

const g = new GPTVis({
  container: '#container',
  width: 600,
  height: 400,
});

g.render(`
vis pie
data
  - category 分类一
    value  27
  - category 分类二
    value 25
  - category 分类三
    value 18
  - category 分类四
    value 15
  - category 分类五
    value 10
  - category 其他
    value 5
theme academy
innerRadius: 0.6
`);

// 或者
g.render({
  "type": "pie",
  "data": [
    { "category": "分类一", "value": 27 },
    { "category": "分类二", "value": 25 },
    { "category": "分类三", "value": 18 },
    { "category": "分类四", "value": 15 },
    { "category": "分类五", "value": 10 },
    { "category": "其他", "value": 5 }
  ],
  "innerRadius": 0.6,
  "theme": "academy"
});

[Aarebecca]

• 新的语法确实是比之前 GPTVis 的方式要更适合 AI 流式输出的
• 另外去 React 依赖才能让更多项目、技术栈能够接入 GPTVis 使用
• 个人认为图表是和信息图 Infographic 非常大的差异化，GPTVis 应该是作为 AntV 各传统技术栈面向 AI 时代的统一入口，所以要是能把 AntV G2 / S2 / G6 / X6 / L7 所有的内容都接入是最好的。如果担心包体积，可以考虑按需注册的形式，比如：

import { GPTVis } from '@antv/gpt-vis';
import * as G2 from '@antv/g2';

const vis = new GPTVis({
  container: '#container',
  width: 600,
  height: 400,
  engine: {
    G2
  }
});

vis.render(`...`);

这样可以把 GPTVis 和底层渲染引擎的定位划分清楚：

底层渲染引擎：提供可视化渲染能力
GPTVis：提供可视化语法解析及调用底层渲染引擎，支持任意的 AntV 可视化渲染；内置高可用的图表（现在的 20+ 可视化），支持更友好的 AI 生图效果。

[hustcc]

@Aarebecca 语法上，现在是基于 20+ 图表模版提供，如果 sive 做完后，ai 直接生成 G2、G6 等代码也很准确，也可以提供直接透传的语法和渲染。

• 以关键词区分

g2
data
  - category 分类一
    value  27
  - category 分类二
    value 25
encode
  x category
  y value

• 以 type 区分

vis g2
data
  - category 分类一
    value  27
  - category 分类二
    value 25
encode
  x category
  y value

这样，AntV 定位都可以改成 AI 可视化方案，整个架构图都可以重画的。

[hustcc]

Infographic 中的语法定义，校验，解析，可以单独抽出来复用，类似于 Toon，可能也是 llm 不错的解决方案。

[lzxue]

这个方案的核心的 AntV AI 可视化语法标准，也就是目前 Infographic 这套模式。

• 前端框架不局限于 react，vue、纯 JS
• 渲染引擎也不局限 AntV，基于 AI 可视化语法，可以自动生成 基于 AntV、D3、ECharts 的引擎的渲染。以目前的模型能力基于语法定义都能准确生成不同的图表引擎的代码。

AI 时代大家了解的可视化就是 AntV AI 可视化框架了。

[wang1212]

更纯粹一些，做与 AntV 栈无关的面向 AI 的可视化语法，AntV 栈作为官方提供的一个默认渲染后端实现，社区可以贡献其它可视化库的渲染后端实现。

[hustcc]

@wang1212 @lzxue 这个语法现在是基于图表模版，理论上支持不同的渲染后端完全可行，但是默认肯定是 AntV，并且我们官方肯定只维护 AntV。

问题在于，如果要扩展可视化语法到很复杂能力的时候，就会变成类似于 vega 一样通用的语法，除了渲染，还有交互，状态量，一下就复杂很多。

提供思路就是按照这样去扩展：

vis echarts      // <-- 以这个来区分 ECharts、d3、chart.js
series
  - xxx
xxx yyy

然后这里就直接透传 echarts 的 options，这样维护成本就降低很多了，扩展也相当容易！甚至可以包含 ui 组件库，但是流式输出过程中，数据不全的情况下，渲染器能否支持是一个大问题。

[wang1212]

@wang1212 @lzxue 这个语法现在是基于图表模版，理论上支持不同的渲染后端完全可行，但是默认肯定是 AntV，并且我们官方肯定只维护 AntV。

问题在于，如果要扩展可视化语法到很复杂能力的时候，就会变成类似于 vega 一样通用的语法，除了渲染，还有交互，状态量，一下就复杂很多。

有个不成熟的想法，可能 AI 可视化语法的目标不是覆盖底层库的全部能力，提供的是一套行业标准的意图到图表类型的推荐逻辑，UI，交互，动画设计，能够让 AI 一次高质量，稳定生成可视化。这个与 AI 生码场景有明显的区别差异，用户专业度不同，生码场景可以通过多次迭代优化生成效果。像主题，交互都可以通过渲染引擎的配置，插件来实现高度定制化。

[hustcc]

有个不成熟的想法，可能 AI 可视化语法的目标不是覆盖底层库的全部能力，提供的是一套行业标准的意图到图表类型的推荐逻辑，UI，交互，动画设计，能够让 AI 一次高质量，稳定生成可视化。这个与 AI 生码场景有明显的区别差异，用户专业度不同，生码场景可以通过多次迭代优化生成效果。像主题，交互都可以通过渲染引擎的配置，插件来实现高度定制化。

这个具体咋去理解？

[wang1212]

有个不成熟的想法，可能 AI 可视化语法的目标不是覆盖底层库的全部能力，提供的是一套行业标准的意图到图表类型的推荐逻辑，UI，交互，动画设计，能够让 AI 一次高质量，稳定生成可视化。这个与 AI 生码场景有明显的区别差异，用户专业度不同，生码场景可以通过多次迭代优化生成效果。像主题，交互都可以通过渲染引擎的配置，插件来实现高度定制化。

这个具体咋去理解？

把 AI 生码和 AI 生成可视化作为两个不同领域去看待，前者面向专业用户且可以通过多次迭代优化生成效果，后者强调确保一次稳定、高质量生成可视化，在现在很多嵌入 markdown 的可视化工具产品中，可能后者更适合。这套 AI 可视化语法理论上解决的也是这类场景的问题，用底层库 20% 能力覆盖 80% 用户需求。

目前感觉对于 AI 生码场景来说，代码越抽象越容易出现幻觉，且更难以应对复杂问题。

[hustcc]

@wang1212 理解了，这个 ok 的，一个是面向研发的，追求的是能力最大化，一个是面向直接用户使用的，追求的是准确度、稳定性。

这个是当时做 gpt-vis 以及 mcp 是一个思路。如果 sive 很难做到 ai 直出 antv 代码，可能要用 gpt-vis 做一个兜底，保证下限。