GPT-Vis Chart Visualization Skill

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

Steps

Intent Recognition: Select the chart type based on user intent and data characteristics
Determine Output Mode: Choose Syntax Mode or Code Mode based on context
Generate Output: Produce content according to the selected mode

Supported Chart Types

Type Value	Applicable Scenario
line	Time series trends
area	Time series trends + total volume
column	Categorical data comparison
bar	Categorical comparison (long labels)
pie	Proportion of parts to the whole
scatter	Relationship between two variables
dual-axes	Comparison of data with different magnitudes
histogram	Frequency distribution of continuous values
boxplot	Data distribution and outliers
violin	Data distribution density
radar	Multi-dimensional comparison
funnel	Process conversion rate
waterfall	Cumulative increase/decrease changes
liquid	Percentage/progress display
word-cloud	Word frequency display
venn	Set intersection and union relationships
treemap	Proportion of hierarchical data
sankey	Flow direction visualization
flow-diagram	Process steps
mindmap	Hierarchical knowledge organization
indented-tree	Tree node hierarchy/directory
network-graph	Relationship between entities
organization-chart	Organizational hierarchy
fishbone-diagram	Root cause analysis
table	Tabular data display
summary	Content summarization

Output Modes

Mode 1: Syntax Mode (Syntax / JSON)

For LLM application integration scenarios, generates chart configurations for

GPTVis.render()

to consume. Supports two formats:

Syntax Format: Markdown-like indentation syntax, suitable for streaming output (real-time rendering as LLM generates tokens incrementally)
JSON Format: Standard JSON object, suitable for structured API calls

Both formats are equivalent and can be directly accepted by

GPTVis.render()

Mode 2: Code Mode

For scenarios where users need 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

typescript

new GPTVis(options: VisualizationOptions)

VisualizationOptions:

Parameter	Type	Required	Default Value	Description
`container`	`string \| HTMLElement`	Yes	—	CSS selector or DOM element
`width`	`number`	No	—	Chart width (px)
`height`	`number`	No	—	Chart height (px)
`theme`	`'default' \| 'light' \| 'dark' \| 'academy'`	No	`'light'`	Theme
`wrapper`	`boolean`	No	`false`	Whether to display outer UI container (including tabs, download, copy, etc.)
`locale`	`string`	No	`'zh-CN'`	Language of text inside wrapper

Methods

render(config: string | object): void

Renders the chart. Accepts two types of input:

Syntax String: Text starting with
```
vis [type]
```
, automatically parsed into a configuration object
JSON Configuration Object: Object containing the
```
type
```
field
Plain Text: Strings not starting with
```
vis 
```
will be rendered as summary type

Calling

render()

multiple times will automatically destroy the previous chart before rendering a new one.

destroy(): void

Destroys the current chart instance and releases resources.

Syntax Mode: JSON Format

Directly outputs a JSON object that conforms to the chart's TypeScript type, which can be directly consumed by

GPTVis.render()

JSON Example

json

{
  "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 (10,000 units)",
  "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 Attributes —

key value

, one per line:

title Annual Trend
theme dark

Object Array — Each item under

data

starts with

, sub-fields are indented:

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

Corresponds to:

data
  - time 2020
    value 100
  - time 2021
    value 120

Pure Value Array — Each item starts with

{ data: number[] }

Corresponds to:

data
  - 10
  - 20

String Values with Spaces — Wrap with quotation marks (single or double); quotation marks can be omitted if there are no spaces:

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

Nested Objects — Object name occupies one line, sub-properties are indented:

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

Corresponds to:

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

Recursive Tree Structure —

children

array is indented with

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

Corresponds to:

data
  name Root Node
  children
    - name Child Node A
      children
        - name Grandchild Node
    - name Child Node 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 (10,000 units)
stack true
theme academy
style
  palette
    - #5B8FF9
    - #61DDAA

Markdown Syntax

When outputting in Markdown format, use

GPT-Vis

as the language tag for the fenced code block, and write the complete Syntax Format in the content area:

markdown

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

Format:

```GPT-Vis
<Complete Syntax content, first line is vis <chart-type>>
```

Syntax Rules:

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

Note: In Markdown mode, the content area must include the first line
vis <type>
, which is the same format as the pure Syntax mode.

Code Mode

Generates complete runnable code based on the target framework.

Installation Methods

NPM:

bash

npm install @antv/gpt-vis

javascript

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

CDN:

html

<script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>

After CDN import, access the main class via

GPTVis.GPTVis

Complete HTML Example

html

<html>
  <head>
    <script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      const gptVis = new GPTVis.GPTVis({
        container: '#container',
        width: 600,
        height: 400,
      });

      gptVis.render(`
vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
title Annual Trend
`);
    </script>
  </body>
</html>

Chart Type Configurations

General Configuration

All charts include the following fields, which are omitted in the subsequent chart type definitions. The title of each section is the

type

value (e.g.,

line

column

), corresponding to the Type column in the chart type table above.

{ type: string; title?: string; theme?: 'default' | 'light' | 'dark' | 'academy'; style?: { backgroundColor?: string; palette?: string[] } }

line / area

{ data: { time: string | number; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; style?: { lineWidth?: number } }

stack

is only supported for area charts.

column / bar

{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; group?: boolean }

pie

Value cannot be a percentage number.

{ data: { category: string; value: number }[]; innerRadius?: number }

Setting

innerRadius

to 0.6 turns it into a donut chart.

scatter

{ data: { x: number; y: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string }

dual-axes

{ categories: string[]; series: { type: 'line' | 'column'; data: number[]; axisYTitle?: string }[]; axisXTitle?: string; style?: { startAtZero?: boolean } }

histogram

{ data: number[]; binNumber?: number; axisXTitle?: string; axisYTitle?: string }

boxplot / violin

Multiple data entries are required for the same category to display distribution.

{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; style?: { startAtZero?: boolean } }

radar

{ data: { name: string; value: number; group?: string }[]; align?: boolean }

align

: Whether to align the scales of each dimension, default is false (each axis scales independently); when true, all axes share the same maximum value, suitable for absolute value comparison of multiple series.

funnel

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

waterfall

Value can be negative to indicate a decrease. Palette is an array of colors in the order [positive value color, negative value color, summary color].

{ data: { category: string; value: number }[]; axisXTitle?: string; axisYTitle?: string; style?: { palette?: string[] } }

liquid

percent

ranges from 0 to 1.

{ percent: number; shape?: 'rect' | 'circle' | 'pin' | 'triangle' }

word-cloud

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

venn

Intersections are identified by separating set labels with commas:

sets: "A,B"

label

is used to display the name of the corresponding set on the chart

{ data: { sets: string | string[]; value: number; label?: string }[] }

treemap

type TreeNode = { name: string; value: number; children?: TreeNode[] };
{ data: TreeNode[] }

sankey

{ data: { source: string; target: string; value: number }[]; nodeAlign?: 'left' | 'center' | 'right' | 'justify' }

flow-diagram / network-graph

source

target

reference the

name

of nodes.

type GraphData = { nodes: { name: string }[]; edges: { source: string; target: string; name?: string }[] };

// flow-diagram
{ data: GraphData }

// network-graph
{ data: GraphData; layout?: 'force' | 'circular' | 'grid' | 'radial' | 'concentric' | 'dagre' }

mindmap / indented-tree / organization-chart

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

// mindmap
{ data: TreeData; direction?: 'H' | 'LR' | 'RL' }

// indented-tree
{ data: TreeData; direction?: 'LR' | 'RL' | 'H' }

// organization-chart
type OrganizationChartData = {
  name: string;
  description?: string;
  children?: OrganizationChartData[];
};

{ data: OrganizationChartData }

mindmap defaults to

'H'

, indented-tree defaults to

'LR'

fishbone-diagram

type FishboneNode = { name: string; children?: FishboneNode[] };
{ data: FishboneNode; style?: { texture?: 'rough' | 'default' } }

texture: 'rough'

enables hand-drawn style.

table

{ data: Record<string, string | number>[]; }

summary

summary is completely different from other chart types: It does not use Syntax/JSON configuration, but uses T8 syntax (Markdown + semantic annotation).

⚠️ Before generating summary, you must: First read references/summary.md to obtain T8 syntax rules, complete entity type list, attribute field definitions, generation requirements and examples, then generate content. Skipping this step will result in syntax errors.

Best Practices

Do not use more than 5 categories for pie charts; if exceeded, merge into "Others" or use bar charts instead
Do not use pie charts to show trends, or line charts to show unordered categories
Numeric fields must be of number type, categorical fields must be of text type
Use histogram for distribution of continuous values (e.g., salary, grades, age)
Multi-dimensional data field mapping: When there are two categorical dimensions, write the x-axis dimension as
```
time
```
/
```
category
```
, and the other as
```
group
```
Prefer Syntax format in Syntax Mode (streaming-friendly)
Default to HTML + CDN solution (zero installation) in Code Mode; use npm solution only when user specifies a framework

gpt-vis

NPX Install

Tags

SKILL.md Content (Chinese)

GPT-Vis Chart Visualization Skill

Steps

Supported Chart Types

Output Modes

Mode 1: Syntax Mode (Syntax / JSON)

Mode 2: Code Mode

GPTVis API

Constructor

Methods

render(config: string | object): void

destroy(): void

Syntax Mode: JSON Format

JSON Example

Syntax Mode: Syntax Format

Syntax Rules

Complete Syntax Example

Markdown Syntax

Code Mode

Installation Methods

Complete HTML Example

Chart Type Configurations

General Configuration

line / area

column / bar

pie

scatter

dual-axes

histogram

boxplot / violin

radar

funnel

waterfall

liquid

word-cloud

venn

treemap

sankey

flow-diagram / network-graph

mindmap / indented-tree / organization-chart

fishbone-diagram

table

summary

Best Practices

`render(config: string | object): void`

`destroy(): void`