chart-visualizationby AntV

Chart Visualization Skill.

A Claude Code and Codex skill for diagrams and charts: renders data as bar, line, pie, radar, Sankey, mind-map, and flow charts through the AntV API.

Diagrams & Data Visualization
Chart image

Download OpenDesign View usage guide

antvis/chart-visualization-skills · skills/chart-visualization/SKILL.mdSKILL.md

--- name: chart-visualization description: 将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片 --- ## 步骤 ## 图表选择指南 ## API 接口 ## 支持的图表类型 ## 通用可选参数 ## 各图表 data 格式

Front matter and section headings read from the upstream file on 2026-09-14 · 3,736 characters in full

01 What it does

What the chart-visualization Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill turns user data into charts by calling AntV's chart-generation API. It analyzes the data and the user's request to pick the most fitting chart type from a wide catalog (bar, line, pie, radar, sankey, mind-map, flow-diagram, and more), builds a JSON request body with the required type and source fields, calls the API with curl, and outputs the returned image URL as a Markdown image.

It documents the data-shape contract for each of the roughly 20 supported chart types plus shared optional parameters like theme, width, height and title, giving the agent a concrete reference for constructing valid requests rather than guessing formats.

What it produces

A JSON API response containing a success flag and a resultObj image URL

See the example prompt ↗

How It Works

01
Pick Chart Type
Analyze the user's data and requirements to choose the most suitable chart type.
02
Build Request Body
Construct a JSON request body that follows the API's specification.
03
Call the API
Use the curl tool to call the API and generate the chart image.
04
Output the Image
Output the returned image URL in Markdown image format.

02 Find your fit

When to Use the chart-visualization Skill

Use the chart-visualization skill in Claude Code or Codex when the job is diagrams and charts of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Visualizing time series trends with a line chart, or cumulative trends with an area chart
Comparing categories horizontally with a bar chart or vertically with a column chart
Showing proportional composition with a pie chart or hierarchical share with a treemap
Mapping flows between categories with a sankey diagram or correlation with a scatter plot
Rendering hierarchical or tree structures with organization-chart or mind-map

Know the Boundaries

Needs AntV APIThe SKILL.md names this dependency; the skill does not work without it in your project.

What to Provide

Chart-specific data arrayEach chart type expects a particular data shape, e.g. bar/column need {category, value, group?} arrays, sankey needs {source, target, value} arrays.
Optional display parametersTheme, width, height, title, style.texture, and for axis charts axisXTitle/axisYTitle can be supplied to customize output.

03 Inside the skill

Rules the chart-visualization Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Required Fields
Every request body must include a type field and a source field set to "chart-visualization-skills".
Fixed Endpoint
Charts are generated by POSTing to a single fixed API endpoint.
Default Canvas Size
Chart width defaults to 600 and height defaults to 400 unless overridden.
Theme Options
Theme defaults to "default" but can be set to "academy" or "dark".
Texture Style
style.texture defaults to "default" but can be set to "rough" for a hand-drawn look.
Stacking Defaults
Bar charts default to stack: true, while column charts default group to true.
Output Format
The resultObj URL from the API response must be rendered as a Markdown image using the pattern .

04 Put it to work

Install chart-visualization in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add chart-visualization to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/antvis/chart-visualization-skills --skill chart-visualization

Generic skills CLI form for skills/chart-visualization/SKILL.md; the repository may document its own path.

Give the Skill a First Diagrams and Charts Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Please turn this monthly revenue data into a chart: [2025-01: 100, 2025-02: 150, 2025-03: 130]. I want to see the trend over time.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Match the chosen chart type against the selection guide for the data's characteristics (time series, comparison, proportion, relationship, hierarchy)

In OpenDesign import chart-visualization from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branch master
Skill file: skills/chart-visualization/SKILL.md Content checksum recorded at verification; commit 089b687
License: MIT From LICENSE.
Repository stars: 489 GitHub snapshot taken 2026-09-14 for the whole antvis/chart-visualization-skills repository, which contains 2 skills in this catalog. Not a rating or usage count for chart-visualization.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

步骤Four steps: analyze data, build JSON body, call API with curl, output Markdown image
图表选择指南Maps data characteristics (time series, comparison, proportion, relations, hierarchy) to chart types
API 接口Describes the POST endpoint, required fields, and a curl request/response example
支持的图表类型Table listing all supported chart types grouped by category
通用可选参数Shared optional parameters (theme, width, height, title, texture) and their defaults
各图表 data 格式Exact data shape and optional fields required for each individual chart type

The Skill's Own Description

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

Front-matter description from SKILL.md. The full file is about 3,736 characters. Read the full file on GitHub.

06 Before you install

Questions About the chart-visualization Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What chart types can this skill generate

It supports a broad catalog including 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, and spreadsheet.

What format does the output come in

The API returns a JSON object with a resultObj URL, which the skill then outputs as a Markdown image link.

Chart Visualization

Run chart-visualization on a Real Diagrams and Charts Task.

Download OpenDesign, import chart-visualization from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills