Agent skill

Chart Visualization

by ZJU-REAL in ZJU-REAL/Easel

将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能,通过 curl 工具调用 AntV API 生成图表图片。产出静态图片 URL(25+ 类型);要本地渲染的信息图/GIF 动画图表用 infographic,要 CSV/JSON→整页报告用 data-report

Apache-2.0Auto-check passedMedia & Creative

Install Chart Visualization

skills CLI
$ npx skills add ZJU-REAL/Easel --skill chart-visualization -a claude-code

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

GitHub CLI
$ gh skill install ZJU-REAL/Easel 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/ZJU-REAL/Easel.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/openclaw/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/

Facts

Skill name
chart-visualization
GitHub stars
3.2k
Token cost
~1.1k tokens
SKILL.md length
324 words
Files
2
Skills in repo
113
Repo updated
First seen
Licence
Apache-2.0

At a glance

将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能,通过 curl 工具调用 AntV API 生成图表图片。产出静态图片 URL(25+ 类型);要本地渲染的信息图/GIF 动画图表用 infographic,要 CSV/JSON→整页报告用 data-report

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

What it does

Chart Visualization is an agent skill from ZJU-REAL/Easel. 将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能,通过 curl 工具调用 AntV API 生成图表图片。产出静态图片 URL(25+ 类型);要本地渲染的信息图/GIF 动画图表用 infographic,要 CSV/JSON→整页报告用 data-report

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `EASEL-META.md`).

It sits in Media & Creative, covering Infographics and CSV and tabular files. The repository describes itself as: An open-source AI agent for social media — discover trends, create content, publish everywhere, and learn what works across Xiaohongshu, Douyin, Zhihu, Bilibili, and more.🎨一个开源的… The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Infographics
  • Tasks that involve CSV and tabular files

Example prompts

  • “/chart-visualization”

Workflow steps

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

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

What it can do on your machine

Read from SKILL.md and the folder at commit fb80ae6. 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 1.1k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 324 words of instructions outside code blocks.

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

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 ZJU-REAL/Easel at commit fb80ae6, republished under its Apache-2.0 licence (© ZJU-REAL). 324 words, ~1,072 tokens.

Download SKILL.mdSave it as .claude/skills/chart-visualization/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
chart-visualization
description
将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能,通过 curl 工具调用 AntV API 生成图表图片。产出静态图片 URL(25+ 类型);要本地渲染的信息图/GIF 动画图表用 infographic,要 CSV/JSON→整页报告用 data-report
layer
produce

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

与其他图表 SKILL 的区别

三者都能"生成图表",但机制与产物不同,按需求路由:

  • chart-visualization(本 SKILL) = 调 AntV 远程 API(gpt-vis),产出静态图片 URL,25+ 图表类型,最快拿到单张图。要单张标准统计图、直接拿到图片链接时用它。
  • infographic = 本地 JS 渲染,产出信息图 / GIF 动画图表(列表/流程/对比/层级模板 + 逐帧动画)。要可导出 SVG 的结构化信息图、或带入场动画的 GIF/MP4 时用它。
  • data-report = 输入 CSV/Excel/JSON,产出整页可视化报告(KPI 卡 + 多图 + 数据洞察 + 表格)。要一份完整报告页而非单图时用它。

步骤

  1. 分析用户数据和需求,选择最合适的图表类型
  2. 构造符合规范的 JSON 请求体
  3. 使用 curl 工具调用 API 生成图表图片
  4. 将返回的图片 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

该端点为 AntV/支付宝官方 gpt-vis 公共免费托管服务,无需 key;公共服务可能限流或调整,返回失败时重试或退回本地渲染(infographic 模式 A)。

请求体为 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)

通用可选参数

参数类型默认值说明
themestring"default"主题:"default" / "academy" / "dark"
widthnumber600图表宽度
heightnumber400图表高度
titlestring""图表标题
style.texturestring"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(透视表字段)

© ZJU-REAL, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in skills/openclaw/chart-visualization of ZJU-REAL/Easel.

  • SKILL.md
  • EASEL-META.md

Open the folder on GitHubat commit fb80ae6

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
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Chart Visualization this skillZJU-REAL/Easel3.2k—~1.1kAutomated safety check: PassApache-2.0
Exec Reportpnp/sharepoint-skills131—~2kAutomated safety check: PassMIT
Strategy Consulting Visualizationkgraph57/mckinsey-style-visualization-skill127—~3.2kAutomated safety check: PassMIT
CarouselsTheCraigHewitt/skills157—~2.3kAutomated safety check: PassMIT
Carousel Stylesnestyme/awesome-prompts151—~1.6kAutomated safety check: PassNone
43 Carousel Brief Globalminhnv0807/ai-business-skills608—~2.4kAutomated safety check: PassMIT

Similar skills

  • Exec Report

    pnp/sharepoint-skills

    Generates a polished, self-contained HTML executive report or dashboard from any data source — SharePoint lists, CSV exports, or a user description.

    131 GitHub stars~2k tokensUpdated 2 days ago
    Documents & OfficeAuto-check passed
  • Strategy Consulting Visualization

    kgraph57/mckinsey-style-visualization-skill

    A skill your agent uses when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics…

    127 GitHub stars~3.2k tokensUpdated 29 days ago
    Media & CreativeAuto-check passed
  • Carousels

    TheCraigHewitt/skills

    Turns a piece of Craig's content (an email, a YouTube script, an essay, or pasted text) into a polished image carousel publishable to both LinkedIn and Instagram from one set of 1080x1350 slides.

    157 GitHub stars~2.3k tokensUpdated 4 mo ago
    Media & CreativeAuto-check passed
  • Carousel Styles

    nestyme/awesome-prompts

    Design photo-carousel slides by cloning proven Pinterest/TikTok visual languages instead of inventing layouts.

    151 GitHub stars~1.6k tokensUpdated 8 days ago
    Media & CreativeAuto-check passed
  • 43 Carousel Brief Global

    minhnv0807/ai-business-skills

    A skill your agent uses when a multi-slide carousel is needed for Instagram, Facebook, or LinkedIn — a narrative arc with the hook on slide one, value through the middle, CTA on the last, headline…

    608 GitHub stars~2.4k tokensUpdated 26 days ago
    Media & CreativeAuto-check passed
  • Create HTML Carousel

    gooseworks-ai/goose-skills

    Create LinkedIn carousel posts as high-quality PNG images. An agent skill from gooseworks-ai/goose-skills.

    1.2k GitHub starsUsed in 1 repo~4.6k tokens
    Media & CreativeAuto-check passed

More from ZJU-REAL/Easel

All 113 skills in this repo
  • 微信公众号文章自动创作与发布工具。给定参考文章、文字或文档,自动搜索整理全网相关信息、生成图文并茂的公众号文章,并发布到微信公众号草稿箱。特别强调反 AI 检测写作。

    3.2k GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed
  • Card Design

    ZJU-REAL/Easel

    社媒卡片视觉设计系统:提供配色、中文字体层级、满画幅布局、品类骨架和死空白/密度质检,避免模板化 PPT 与廉价 AI 感。

    3.2k GitHub stars~657 tokensUpdated yesterday
    Auto-check passed
  • Ecom Details Image

    ZJU-REAL/Easel

    生成电商商品视觉方案:主图概念、场景图、详情页视觉方向和 AI 生图 Prompt. An agent skill from ZJU-REAL/Easel.

    3.2k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check: notes
  • Infographic

    ZJU-REAL/Easel

    将数据或文字内容转化为可视化信息图,支持静态(AntV)和动画 GIF 两种模式。当用户需要制作信息图、数据可视化、流程图、对比图、动画图表、GIF 图表、思维导图、SWOT 分析图时调用。本地渲染信息图/GIF 动画;要单张静态图片 URL 用 chart-visualization,要 CSV/JSON→整页报告用 data-report

    3.2k GitHub stars~643 tokensUpdated yesterday
    Auto-check passed
  • Novel Writer

    ZJU-REAL/Easel

    长篇小说/网文连载创作:从世界观、人设和三级大纲写到逐章正文,并用文件化状态维护伏笔、前情和跨章一致性. An agent skill from ZJU-REAL/Easel.

    3.2k GitHub stars~1k tokensUpdated yesterday
    Auto-check passed
  • Paper Explainer

    ZJU-REAL/Easel

    科研论文解读:解析 arXiv/PDF 的公式与图表,提炼问题、贡献、方法、关键图和结论,再产出 B站/视频号解读视频或知乎/公众号图文。

    3.2k GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed

Questions about Chart Visualization

What does Chart Visualization do?

将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能,通过 curl 工具调用 AntV API 生成图表图片。产出静态图片 URL(25+ 类型);要本地渲染的信息图/GIF 动画图表用 infographic,要 CSV/JSON→整页报告用 data-report. Chart Visualization is an agent skill from ZJU-REAL/Easel.

When should I use Chart Visualization?

Chart Visualization fits situations like: tasks that involve Infographics; tasks that involve CSV and tabular files.

How do I install Chart Visualization in Claude Code?

Run `npx skills add ZJU-REAL/Easel --skill chart-visualization -a claude-code`. Or copy the skill folder (skills/openclaw/chart-visualization in ZJU-REAL/Easel) 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 ZJU-REAL/Easel --skill chart-visualization -a codex`. Or copy the skill folder (skills/openclaw/chart-visualization in ZJU-REAL/Easel) 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 ZJU-REAL/Easel --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 Apache-2.0 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 1.1k tokens (SKILL.md is roughly 4.3k 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: Exec Report (pnp/sharepoint-skills, 131 stars), Strategy Consulting Visualization (kgraph57/mckinsey-style-visualization-skill, 127 stars), Carousels (TheCraigHewitt/skills, 157 stars) and Carousel Styles (nestyme/awesome-prompts, 151 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Chart Visualization?

ZJU-REAL (a GitHub organization) maintains it in ZJU-REAL/Easel, which has 3,230 GitHub stars. The repository holds 113 skills in this directory. The repository was last updated on October 7, 2026.

Source: ZJU-REAL/Easel on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.