メニュー
推荐并生成合适的数据可视化图表，使用 GPT-Vis 库。支持两种输出模式：（1）语法模式——生成 Syntax 或 JSON 配置；（2）代码模式——生成完整的运行代码。支持 26 种图表类型。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/antvis/chart-visualization-skills --skill gpt-visコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Use this skill whenever the user wants to create, customize, or troubleshoot G2 v5 chart visualizations. Triggers include: any mention of 'G2', 'antv g2', '@antv/g2', 'G2 chart', 'G2 可视化', or requests to produce charts like bar charts (柱状图), line charts (折线图), pie charts (饼图), scatter plots (散点图), area charts (面积图), heatmap (热力图), radar charts (雷达图), treemap (矩形树图), funnel charts (漏斗图), sankey diagrams (桑基图), gauge (仪表盘), wordcloud (词云), boxplot (箱线图), as well as G2-specific topics like encode channels, scale config, coordinate systems, transforms, interactions, themes, labels, and animations. Also use when debugging G2 rendering errors, V4→V5 migration issues, or chart type selection. Do NOT use for G6 graph/network visualization, X6 editor diagrams, or S2 pivot tables.
Use this skill whenever the user wants to create, customize, or troubleshoot G6 v5 graph/network visualizations. Triggers include: any mention of 'G6', 'antv g6', '@antv/g6', 'G6 graph', 'G6 图', '网络图', '关系图', '拓扑图', '树形图', '流程图', '思维导图', '鱼骨图', '力导向图', 'force graph', 'network visualization', 'node-edge diagram', 'graph layout', 'tree layout', 'dagre layout', 'mindmap', 'social network', or requests about G6 node styles, edge types, behaviors, plugins, layouts, combos, or data structures. Also use when debugging G6 rendering errors, v4→v5 migration, or graph interaction issues. Do NOT use for G2 statistical charts, X6 editor diagrams, or S2 pivot tables.
Use this skill whenever the user wants to create, customize, or troubleshoot X6 v3 graph editor diagrams. Triggers include: any mention of 'X6', 'antv x6', '@antv/x6', 'X6 editor', 'X6 图编辑', '流程图', 'DAG', 'ER图', '实体关系图', '血缘图', '组织架构图', 'UML类图', 'flowchart', 'DAG diagram', 'ER diagram', 'lineage graph', 'org chart', 'network topology', 'stencil', 'drag-and-drop editor', 'port connection', 'node port edge', 'graph editor', 'diagram editor', or requests about X6 node/edge styling, plugins (Selection, History, Clipboard, Keyboard, MiniMap, Scroller, Snapline, Stencil, Dnd, Transform, Export), interactions (panning, mousewheel, connecting, embedding), HTML shape nodes, custom shapes, serialization, or layout. Also use when debugging X6 rendering errors, v2→v3 migration, or editor interaction issues. Do NOT use for G2 statistical charts, G6 network graphs, or S2 pivot tables.
| name | gpt-vis |
| description | 推荐并生成合适的数据可视化图表，使用 GPT-Vis 库。支持两种输出模式：（1）语法模式——生成 Syntax 或 JSON 配置；（2）代码模式——生成完整的运行代码。支持 26 种图表类型。 |
GPT-Vis 是一个 AI 原生的可视化库，专为 LLM 时代设计。它采用框架无关的架构，支持 26 种图表类型，通过简单自然的语法让 LLM 能够轻松生成高质量的可视化图表。
| type 值 | 适用场景 |
|---|---|
| line | 时间序列趋势 |
| area | 时间序列趋势+总量 |
| column | 分类数据对比 |
| bar | 分类对比（标签长） |
| pie | 部分占整体比例 |
| scatter | 两变量关系 |
| dual-axes | 不同量级数据对比 |
| histogram | 连续数值频次分布 |
| boxplot | 数据分布与异常值 |
| violin | 数据分布密度 |
| radar | 多维度对比 |
| funnel | 流程转化率 |
| waterfall | 累计增减变化 |
| liquid | 百分比/进度 |
| word-cloud | 词频展示 |
| venn | 集合交并关系 |
| treemap | 层级数据占比 |
| sankey | 流量流向 |
| flow-diagram | 流程步骤 |
| mindmap | 层级知识梳理 |
| indented-tree | 树节点层级/目录 |
| network-graph | 实体间关联关系 |
| organization-chart | 组织层级 |
| fishbone-diagram | 根因分析 |
| table | 表格数据展示 |
| summary | 内容总结 |
用于 LLM 应用集成场景，生成图表配置供 GPTVis.render() 消费。支持两种格式：
两种格式等价，GPTVis.render() 均可直接接受。
用于用户需要可直接运行的完整代码场景。生成包含安装说明和完整代码的输出。
GPTVis 是库的统一入口类，负责创建、渲染和销毁图表。
new GPTVis(options: VisualizationOptions)
VisualizationOptions：
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
container | string | HTMLElement | 是 | — | CSS 选择器或 DOM 元素 |
width | number | 否 | — | 图表宽度（px） |
height | number | 否 | — | 图表高度（px） |
theme | 'default' | 'light' | 'dark' | 'academy' | 否 | 'light' | 主题 |
wrapper | boolean | 否 | false | 是否显示外层 UI 容器（含标签页、下载、复制等） |
locale | string | 否 | 'zh-CN' | wrapper 内文案语言 |
render(config: string | object): void渲染图表。接受两种输入：
vis [type] 开头的文本，自动解析为配置对象type 字段的对象vis 开头的字符串会被当作 summary 类型渲染多次调用 render() 会自动销毁前一个图表再渲染新图表。
destroy(): void销毁当前图表实例，释放资源。
直接输出符合图表 TypeScript 类型的 JSON 对象，GPTVis.render() 可直接消费。
{
"type": "column",
"data": [
{ "category": "A产品", "value": 30, "group": "线上" },
{ "category": "B产品", "value": 50, "group": "线上" }
],
"title": "产品销量对比",
"axisXTitle": "产品",
"axisYTitle": "销量（万）",
"stack": true,
"theme": "academy",
"style":
类 Markdown 缩进语法，支持流式渲染。第一行必须是 vis [type]。
基本属性 — key value，每行一个：
title 年度趋势
theme dark
对象数组 — data 下每项用 - 开头，子字段缩进：
{ data: { time: string; value: number; }[]; }
对应：
data
- time 2020
value 100
- time 2021
value 120
纯值数组 — 每项用 - 开头：
{ data: number[] }
对应：
data
- 10
- 20
含空格的字符串值 — 用引号（单引号或双引号）包裹；不含空格时可省略引号：
categories
- "North America"
- '东南 亚'
- 欧洲
嵌套对象 — 对象名占一行，子属性缩进：
{ style?: { backgroundColor?: string; palette?: string[] } }
对应：
style
backgroundColor #f0f2f5
palette
- #5B8FF9
- #61DDAA
递归树形 — children 数组用 - 缩进：
type TreeData = { name: string; children?: TreeData[] };
{ data: TreeData; }
对应：
data
name 根节点
children
- name 子节点A
children
- name 孙节点
- name 子节点B
vis column
data
- category A产品
value 30
group 线上
- category B产品
value 50
group 线上
title 产品销量对比
axisXTitle 产品
axisYTitle 销量（万）
stack true
theme academy
style
palette
- #5B8FF9
- #61DDAA
当输出为 Markdown 格式时，使用 GPT-Vis 作为 fenced code block 的语言标记，内容区写入完整的 Syntax 格式：
```GPT-Vis
vis line
data
- time 2020
value 100
```
格式：
```GPT-Vis
<完整的 Syntax 内容，首行 vis <chart-type>>
```
语法规则：
GPT-Visvis <chart-type>（完整列表见上方支持的图表类型），由浏览器端渲染
注意：Markdown 模式下，内容区必须写首行 vis <type>，与纯 Syntax 模式格式一致。
代码模式
根据目标框架生成完整可运行代码。
安装方式
NPM：
npm install @antv/gpt-vis
import { GPTVis } from '@antv/gpt-vis';
CDN：
<script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>
CDN 引入后通过 GPTVis.GPTVis 访问主类。
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();
所有图表均包含以下字段，后续各图表类型定义中省略这些字段。各小节标题即为 type 值（如 line、column），对应上方图表类型表中的 type 列。
{ type: string; title?: string; theme?: 'default' | 'light' | 'dark' | 'academy'; style?: { backgroundColor?: string; palette?: string[] } }
{ data: { time: string | number; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; style?: { lineWidth?: number } }
stack 仅 area 支持。
{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; group?: boolean }
value 不可使用百分比数字。
{ data: { category: string; value: number }[]; innerRadius?: number }
innerRadius 设为 0.6 变为环图。
{ data: { x: number; y: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string }
{ categories: string[]; series: { type: 'line' | 'column'; data: number[]; axisYTitle?: string }[]; axisXTitle?: string; style?: { startAtZero?: boolean } }
{ data: number[]; binNumber?: number; axisXTitle?: string; axisYTitle?: string }
同一 category 需多条数据以展示分布。
{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; style?: { startAtZero?: boolean } }
{ data: { name: string; value: number; group?: string }[]; align?: boolean }
align: 是否对齐各维度比例尺，默认 false（各轴独立缩放）；true 时所有轴共享同一最大值，适合多系列绝对数值对比。
{ data: { category: string; value: number; }[]; }
value 可为负数表示减少。palette 为色板数组，顺序为 [正值色, 负值色, 汇总色]。
{ data: { category: string; value: number }[]; axisXTitle?: string; axisYTitle?: string; style?: { palette?: string[] } }
percent 范围 0~1。
{ percent: number; shape?: 'rect' | 'circle' | 'pin' | 'triangle' }
{ data: { text: string; value: number; }[]; }
交集用逗号分隔集合标识：sets: "A,B"。label 用于显示图表上对应集合的名称
{ data: { sets: string | string[]; value: number; label?: string }[] }
type TreeNode = { name: string; value: number; children?: TreeNode[] };
{ data: TreeNode[] }
{ data: { source: string; target: string; value: number }[]; nodeAlign?: 'left' | 'center' | 'right' | 'justify' }
source/target 引用节点的 name。
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' }
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 默认 'H'，indented-tree 默认 'LR'。
type FishboneNode = { name: string; children?: FishboneNode[] };
{ data: FishboneNode; style?: { texture?: 'rough' | 'default' } }
texture: 'rough' 为手绘风格。
{ data: Record<string, string | number>[]; }
summary 与其他图表类型完全不同：不使用 Syntax/JSON 配置，而是使用 T8 语法（Markdown + 语义标注）。
⚠️ 生成 summary 前必须：先读取 references/summary.md 获取 T8 语法规则、完整实体类型列表、属性字段定义、生成要求和示例，然后再生成内容。跳过此步骤将导致语法错误。
time/category，另一个写 group