Antv Gpt Vis

GPT-Vis Chart Visualization Skill

GPT-Vis is an AI-native visualization library designed for the LLM era. It uses a framework-agnostic architecture, supports 26 chart types, and enables LLMs to easily generate high-quality visualizations through a simple, natural syntax.

Steps

1. Intent recognition: Select the chart type based on user intent and data characteristics
2. Determine output mode: Choose Syntax mode or Code mode based on context
3. Generate output: Produce content in the selected mode

Supported Chart Types

Output Modes

Mode 1: Syntax Mode (Syntax / JSON)

Used for LLM application integration scenarios. Generates chart configurations consumed by GPTVis.render(). Supports two formats:

• Syntax format: Markdown-like indentation syntax, suitable for streaming output (renders in real time as the LLM generates tokens)
• JSON format: Standard JSON object, suitable for structured API calls

Both formats are equivalent and can be passed directly to GPTVis.render().

Mode 2: Code Mode

Used when the user needs complete runnable code. Generates output including installation instructions and full code.

GPTVis API

GPTVis is the unified entry class of the library, responsible for creating, rendering, and destroying charts.

Constructor

new GPTVis(options: VisualizationOptions)

VisualizationOptions:

Methods

render(config: string | object): void

Renders a chart. Accepts two kinds of input:

• Syntax string: Text starting with vis [type], automatically parsed into a configuration object
• JSON configuration object: An object containing a type field
• Plain text: Strings not starting with vis are rendered as the summary type

Calling render() multiple times automatically destroys the previous chart before rendering the new one.

destroy(): void

Destroys the current chart instance and releases resources.

Syntax Mode: JSON Format

Directly output a JSON object conforming to the chart's TypeScript type; GPTVis.render() can consume it directly.

JSON Example

{
  "type": "column",
  "data": [
    { "category": "Product A", "value": 30, "group": "Online" },
    { "category": "Product B", "value": 50, "group": "Online" }
  ],
  "title": "Product Sales Comparison",
  "axisXTitle": "Product",
  "axisYTitle": "Sales (10k)",
  "stack": true,
  "theme": "academy",
  "style": {
    "palette": ["#5B8FF9", "#61DDAA"]
  }
}

Syntax Mode: Syntax Format

Markdown-like indentation syntax that supports streaming rendering. The first line must be vis [type].

Syntax Rules

Basic properties — key value, one per line:

title Annual Trend
theme dark

Object arrays — under data, each item starts with - , with sub-fields indented:

{ data: { time: string; value: number; }[]; }

Corresponds to:

data
  - time 2020
    value 100
  - time 2021
    value 120

Plain value arrays — each item starts with - :

{ data: number[] }

Corresponds to:

data
  - 10
  - 20

String values containing spaces — wrap in quotes (single or double); quotes can be omitted when there are no spaces:

categories
  - "North America"
  - 'Southeast Asia'
  - Europe

Nested objects — the object name occupies its own line, with sub-properties indented:

{ style?: { backgroundColor?: string; palette?: string[] } }

Corresponds to:

style
  backgroundColor #f0f2f5
  palette
    - #5B8FF9
    - #61DDAA

Recursive trees — the children array is indented with - :

type TreeData = { name: string; children?: TreeData[] };
{ data: TreeData; }

Corresponds to:

data
  name Root
  children
    - name Child A
      children
        - name Grandchild
    - name Child B

Complete Syntax Example

vis column
data
  - category Product A
    value 30
    group Online
  - category Product B
    value 50
    group Online
title Product Sales Comparison
axisXTitle Product
axisYTitle Sales (10k)
stack true
theme academy
style
  palette
    - #5B8FF9
    - #61DDAA

Markdown Syntax

When the output is in Markdown format, use GPT-Vis as the language tag of the fenced code block, and write the complete Syntax format in the content area:

```GPT-Vis
vis line
data
  - time 2020
    value 100
```

Format:

```GPT-Vis
<complete Syntax content, first line: vis <chart-type>>
```

Syntax rules:

• The language tag is fixed as GPT-Vis
• The content area follows the Syntax format rules, and the first line must contain vis <chart-type> (see the full list in Supported Chart Types above)
• The code block is converted by the Markdown plugin into <code class="language-gpt-vis"> and rendered on the browser side

Note: In Markdown mode, the content area must include the first line vis <type>, consistent with the plain Syntax mode format.