Agent skill

Chart Visualization

by antvis in antvis/chart-visualization-skills

将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片

MITAuto-check passed

Install Chart Visualization

skills CLI

$ npx skills add antvis/chart-visualization-skills --skill chart-visualization -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install antvis/chart-visualization-skills chart-visualization --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/antvis/chart-visualization-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/chart-visualization .claude/skills/chart-visualization && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "chart-visualization" agent skill from https://github.com/antvis/chart-visualization-skills/tree/master/skills/chart-visualization into .claude/skills/chart-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-visualization", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/antvis/chart-visualization-skills/tree/master/skills/chart-visualization

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add antvis/chart-visualization-skills --skill chart-visualization -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install antvis/chart-visualization-skills chart-visualization --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/antvis/chart-visualization-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/chart-visualization .agents/skills/chart-visualization && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "chart-visualization" agent skill from https://github.com/antvis/chart-visualization-skills/tree/master/skills/chart-visualization into .agents/skills/chart-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-visualization", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add antvis/chart-visualization-skills --skill chart-visualization -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install antvis/chart-visualization-skills chart-visualization --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/antvis/chart-visualization-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/chart-visualization .cursor/skills/chart-visualization && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "chart-visualization" agent skill from https://github.com/antvis/chart-visualization-skills/tree/master/skills/chart-visualization into .cursor/skills/chart-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-visualization", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/antvis/chart-visualization-skills.git --path skills/chart-visualization

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add antvis/chart-visualization-skills --skill chart-visualization -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install antvis/chart-visualization-skills chart-visualization --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/antvis/chart-visualization-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/chart-visualization .gemini/skills/chart-visualization && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "chart-visualization" agent skill from https://github.com/antvis/chart-visualization-skills/tree/master/skills/chart-visualization into .gemini/skills/chart-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-visualization", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install antvis/chart-visualization-skills chart-visualization

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add antvis/chart-visualization-skills --skill chart-visualization -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/antvis/chart-visualization-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/chart-visualization .github/skills/chart-visualization && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "chart-visualization" agent skill from https://github.com/antvis/chart-visualization-skills/tree/master/skills/chart-visualization into .github/skills/chart-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-visualization", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add antvis/chart-visualization-skills --skill chart-visualization -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install antvis/chart-visualization-skills chart-visualization --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/antvis/chart-visualization-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/chart-visualization .opencode/skills/chart-visualization && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "chart-visualization" agent skill from https://github.com/antvis/chart-visualization-skills/tree/master/skills/chart-visualization into .opencode/skills/chart-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-visualization", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: chart-visualization
GitHub stars: 506
Token cost: ~934 tokens
SKILL.md length: 287 words
Files: 1
Skills in repo: 9
Repo updated: Sep 22, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Works in 4 steps: 分析用户数据和需求，选择最合适的图表类型 → 构造符合规范的 JSON 请求体 → 使用 curl 工具调用 API 生成图表图片 → …
SKILL.md covers 步骤, 图表选择指南, API 接口 and 支持的图表类型, plus 2 more sections
Calls curl; reaches antv-studio.alipay.com

What it does

Chart Visualization is an agent skill from antvis/chart-visualization-skills. 将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片

Its SKILL.md is about 930 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: ⛏️ Turning data into a visual language for better thinking with Skills. The licence is MIT.

Example prompts

“/chart-visualization”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

分析用户数据和需求，选择最合适的图表类型
构造符合规范的 JSON 请求体
使用 curl 工具调用 API 生成图表图片
将返回的图片 URL 以 Markdown 图片格式输出

What it can do on your machine

Read from SKILL.md and the folder at commit a105fa1. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- curl
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- antv-studio.alipay.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Chart Visualization loads about 934 tokens when it runs. Until then it costs about 27 tokens; SKILL.md has 287 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~27
When it runs · the whole SKILL.md, loaded when a task matches: ~934

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from antvis/chart-visualization-skills at commit a105fa1, republished under its MIT licence (© antvis). 287 words, ~934 tokens.

Download SKILL.mdSave it as .claude/skills/chart-visualization/SKILL.md (or your agent's skills folder).

name: chart-visualization
description: 将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片

请根据用户输入的内容，将数据可视化为图表。

步骤

分析用户数据和需求，选择最合适的图表类型
构造符合规范的 JSON 请求体
使用 curl 工具调用 API 生成图表图片
将返回的图片 URL 以 Markdown 图片格式输出

图表选择指南

根据用户的数据特征和需求，选择最合适的图表类型：

时间序列：用 line（趋势）或 area（累计趋势）；两个不同量纲用 dual-axes
比较类：用 bar（横向分类对比）或 column（纵向分类对比）；频率分布用 histogram
占比类：用 pie（比例构成）或 treemap（层级占比）
关系与流程：用 scatter（相关性）、sankey（流向）或 venn（集合重叠）
层级与树形：用 organization-chart 或 mind-map
专用类型：
- radar：多维度对比
- funnel：流程阶段转化
- liquid：百分比/进度
- word-cloud：文本词频
- boxplot / violin：统计分布
- network-graph：复杂节点关系
- fishbone-diagram：因果分析
- flow-diagram：流程图
- spreadsheet：结构化数据表或透视表

API 接口

POST https://antv-studio.alipay.com/api/gpt-vis

请求体为 JSON，必须包含 type 和 source: "chart-visualization-skills" 字段。

示例：

bash

curl -X POST https://antv-studio.alipay.com/api/gpt-vis \
  -H "Content-Type: application/json" \
  -d '{"type":"line","source":"chart-visualization-skills","data":[{"time":"2025-01","value":100}],"title":"示例图表"}'

返回示例：

json

{"success":true,"resultObj":"https://..."}

将 resultObj 中的 URL 以 Markdown 图片格式输出：![图表](URL)

支持的图表类型

分类	图表类型
比较类	条形图(bar)、柱状图(column)、瀑布图(waterfall)、双轴图(dual-axes)
趋势类	面积图(area)、折线图(line)、散点图(scatter)
分布类	箱线图(boxplot)、直方图(histogram)、小提琴图(violin)、漏斗图(funnel)
占比类	饼图(pie)、水波图(liquid)、词云(word-cloud)
层级类	组织架构图(organization-chart)、思维导图(mind-map)、矩形树图(treemap)、桑基图(sankey)
关系类	关系图(network-graph)、韦恩图(venn)
流程类	流程图(flow-diagram)、鱼骨图(fishbone-diagram)
多维类	雷达图(radar)
表格类	表格/透视表(spreadsheet)

通用可选参数

参数	类型	默认值	说明
theme	string	"default"	主题："default" / "academy" / "dark"
width	number	600	图表宽度
height	number	400	图表高度
title	string	""	图表标题
style.texture	string	"default"	纹理："default" / "rough"（手绘风格）

带坐标轴的图表还支持：axisXTitle、axisYTitle。

各图表 data 格式

area / line: {time: string, value: number, group?: string}[]，可选 stack: boolean
bar: {category: string, value: number, group?: string}[]，可选 group / stack (默认 stack: true)
column: {category: string, value: number, group?: string}[]，可选 group (默认 true) / stack
scatter: {x: number, y: number, group?: string}[]
pie: {category: string, value: number}[]，可选 innerRadius: number (0-1)
radar: {name: string, value: number, group?: string}[]
funnel: {category: string, value: number}[]
waterfall: {category: string, value?: number, isTotal?: boolean, isIntermediateTotal?: boolean}[]
dual-axes: categories: string[], series: {type: "column"|"line", data: number[], axisYTitle?: string}[]
histogram: number[]，可选 binNumber: number
boxplot / violin: {category: string, value: number, group?: string}[]
liquid: percent: number (0-1)，可选 shape: "circle"|"rect"|"pin"|"triangle"
word-cloud: {text: string, value: number}[]
sankey: {source: string, target: string, value: number}[]，可选 nodeAlign
treemap: {name: string, value: number, children?: ...}[] (最深 3 层)
venn: {sets: string[], value: number, label?: string}[]
network-graph / flow-diagram: {nodes: {name: string}[], edges: {source: string, target: string, name?: string}[]}
fishbone-diagram / mind-map: {name: string, children?: ...} (最深 3 层)
organization-chart: {name: string, description?: string, children?: ...} (最深 3 层)，可选 orient: "horizontal"|"vertical"
spreadsheet: Record<string, string | number>[]，可选 rows / columns / values（透视表字段）

Files

Just SKILL.md in skills/chart-visualization of antvis/chart-visualization-skills.

Open the folder on GitHubat commit a105fa1

Compare with similar skills

Chart Visualization next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Chart Visualization compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Chart Visualization this skillantvis/chart-visualization-skills	506	—	~934	Automated safety check: Pass	MIT	16 days ago
Chart VisualizationZJU-REAL/Easel	3.2k	—	~1.1k	Automated safety check: Pass	Apache-2.0	yesterday
Chart Visualizationbytedance/deer-flow	83k	2 repos	~840	Automated safety check: Pass	MIT	today
Working With ChartsPostHog/posthog	40k	—	~948	Automated safety check: Pass	Custom licence	today
Helm Chartssickn33/agentic-awesome-skills	47k	1 repos	~2.6k	Automated safety check: Pass	MIT	yesterday
Claim Chartanthropics/claude-for-legal	9.6k	2 repos	~10k	Automated safety check: Pass	Apache-2.0	8 days ago

Similar skills

Chart Visualization
ZJU-REAL/Easel
将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片。产出静态图片 URL（25+ 类型）；要本地渲染的信息图/GIF 动画图表用 infographic，要 CSV/JSON→整页报告用 data-report
3.2k GitHub stars~1.1k tokensUpdated yesterday
Media & CreativeAuto-check passed
Chart Visualization
bytedance/deer-flow
Picks a suitable chart type from 26 options for your data, maps the data to that chart's parameters and generates a chart image through a JavaScript script.
83k GitHub starsUsed in 2 repos~840 tokens
Data & AnalyticsAuto-check passed
Working With Charts
PostHog/posthog
Official
Guides consumers of @posthog/quill-charts through chart selection, data, themes, sizing, and composition.
40k GitHub stars~948 tokensUpdated today
Data & AnalyticsAuto-check passed
Helm Charts
sickn33/agentic-awesome-skills
Create, manage, and deploy Helm charts for Kubernetes package management.
47k GitHub starsUsed in 1 repo~2.6k tokens
DevOps & CloudAuto-check passed
Claim Chart
anthropics/claude-for-legal
Official
Build or review an element chart — a patent claim chart (infringement, invalidity, or review) or a civil element chart for any cause of action or defense — with every cell pin-cited and gap…
9.6k GitHub starsUsed in 2 repos~10k tokens
Legal & ComplianceAuto-check passed
Chart
mohitagw15856/pm-claude-skills
Turn numbers into a chart — bar, line, area, pie, or doughnut.
1.4k GitHub stars~893 tokensUpdated yesterday
Auto-check passed

Questions about Chart Visualization

What does Chart Visualization do?

将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片. Chart Visualization is an agent skill from antvis/chart-visualization-skills.

How do I install Chart Visualization in Claude Code?

Run `npx skills add antvis/chart-visualization-skills --skill chart-visualization -a claude-code`. Or copy the skill folder (skills/chart-visualization in antvis/chart-visualization-skills) into .claude/skills/chart-visualization in your project. Claude Code loads it when a task matches its description.

How do I install Chart Visualization in Codex?

Run `npx skills add antvis/chart-visualization-skills --skill chart-visualization -a codex`. Or copy the skill folder (skills/chart-visualization in antvis/chart-visualization-skills) into .agents/skills/chart-visualization in your project. Codex loads it when a task matches its description.

Can I use Chart Visualization in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add antvis/chart-visualization-skills --skill chart-visualization -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chart-visualization, .gemini/skills/chart-visualization, .github/skills/chart-visualization and .opencode/skills/chart-visualization in your project.

What does Chart Visualization need to run?

Going by SKILL.md and its folder, Chart Visualization needs the command-line tools its instructions call (curl).

Does Chart Visualization access the network?

SKILL.md names 1 domain. In commands or code: antv-studio.alipay.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Chart Visualization safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Chart Visualization use?

Chart Visualization is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Chart Visualization use?

About 934 tokens (SKILL.md is roughly 3.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Chart Visualization?

Skills that share tags, products or a category with Chart Visualization: Chart Visualization (ZJU-REAL/Easel, 3.2k stars), Chart Visualization (bytedance/deer-flow, 83k stars), Working With Charts (PostHog/posthog, 40k stars) and Helm Charts (sickn33/agentic-awesome-skills, 47k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Chart Visualization?

antvis (a GitHub organization) maintains it in antvis/chart-visualization-skills, which has 506 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on September 22, 2026.

Source: antvis/chart-visualization-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Chart Visualization

Install Chart Visualization

Facts

At a glance

What it does

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

步骤

图表选择指南

API 接口

支持的图表类型

通用可选参数

各图表 data 格式

Files

Compare with similar skills

Similar skills