Agent skill

Chart Visualization

by bytedance in 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.

MITAuto-check passedData & Analytics

Install Chart Visualization

skills CLI
$ npx skills add bytedance/deer-flow --skill chart-visualization -a claude-code

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

GitHub CLI
$ gh skill install bytedance/deer-flow 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/bytedance/deer-flow.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/public/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
83k
Used in
2 other repos
Token cost
~840 tokens
SKILL.md length
280 words
Files
29 (incl. scripts, references)
Skills in repo
23
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Works in 4 steps: Intelligent Chart Selection → Parameter Extraction → Chart Generation → …
  • Turning a table of numbers into a chart image
  • SKILL.md covers Workflow, Reference Material and License
  • Calls node

What it does

Given data to visualize, the agent first chooses a chart type by the shape of the data: line and area charts for time series, bar, column and histogram charts for comparisons and distributions, pie and treemap for part-to-whole, scatter, Sankey and Venn for relationships, district, pin and path maps for geography, an organization chart or mind map for hierarchies, and specialized types such as radar, funnel, word cloud, boxplot, network graph, fishbone, flow diagram and spreadsheet.

It then reads the matching file in the references folder to learn the required and optional fields, maps the values from your input into the expected args format, and runs scripts/generate.js with a JSON payload naming the chart tool and its args. The script prints the URL of the generated chart image, which the agent passes back to you. The compatibility field asks for Node.js 18.0.0 or later.

When your agent uses it

  • Turning a table of numbers into a chart image
  • Choosing the right chart type for a trend, comparison or distribution
  • Drawing a mind map, org chart or flow diagram from a description
  • Plotting locations or routes on a map

Example prompts

  • “Chart monthly signups for the past year as a line chart from this CSV.”
  • “Show the share of revenue by product line as a pie chart.”
  • “Make an organization chart from this list of teams and managers.”

Requirements

  • Node.js 18.0.0 or later
  • Compatibility (from SKILL.md): {"nodejs":">=18.0.0"}

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Intelligent Chart Selection
  2. Parameter Extraction
  3. Chart Generation
  4. Result Return

What it can do on your machine

Read from SKILL.md and the folder at commit 35cdcab. 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

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.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.

  • Compatibility

    {"nodejs":">=18.0.0"}

    From compatibility in the SKILL.md frontmatter.

Context cost

Chart Visualization loads about 840 tokens when it runs, and up to ~7.9k if it reads all its reference files. Until then it costs about 69 tokens; SKILL.md has 280 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~69
When it runs · the whole SKILL.md, loaded when a task matches
~840
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.9k

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); the scripts in this folder are not scanned.

SKILL.md

The full file from bytedance/deer-flow at commit 35cdcab, republished under its MIT licence (© bytedance). 280 words, ~840 tokens.

Download SKILL.mdSave it as .claude/skills/chart-visualization/SKILL.md (or your agent's skills folder). This skill also uses 28 other files; get the full folder from GitHub.
name
chart-visualization
description
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.
compatibility
{"nodejs":">=18.0.0"}

Chart Visualization Skill

This skill provides a comprehensive workflow for transforming data into visual charts. It handles chart selection, parameter extraction, and image generation.

Workflow

To visualize data, follow these steps:

1. Intelligent Chart Selection

Analyze the user's data features to determine the most appropriate chart type. Use the following guidelines (and consult references/ for detailed specs):

  • Time Series: Use generate_line_chart (trends) or generate_area_chart (accumulated trends). Use generate_dual_axes_chart for two different scales.
  • Comparisons: Use generate_bar_chart (categorical) or generate_column_chart. Use generate_histogram_chart for frequency distributions.
  • Part-to-Whole: Use generate_pie_chart or generate_treemap_chart (hierarchical).
  • Relationships & Flow: Use generate_scatter_chart (correlation), generate_sankey_chart (flow), or generate_venn_chart (overlap).
  • Maps: Use generate_district_map (regions), generate_pin_map (points), or generate_path_map (routes).
  • Hierarchies & Trees: Use generate_organization_chart or generate_mind_map.
  • Specialized:
    • generate_radar_chart: Multi-dimensional comparison.
    • generate_funnel_chart: Process stages.
    • generate_liquid_chart: Percentage/Progress.
    • generate_word_cloud_chart: Text frequency.
    • generate_boxplot_chart or generate_violin_chart: Statistical distribution.
    • generate_network_graph: Complex node-edge relationships.
    • generate_fishbone_diagram: Cause-effect analysis.
    • generate_flow_diagram: Process flow.
    • generate_spreadsheet: Tabular data or pivot tables for structured data display and cross-tabulation.
2. Parameter Extraction

Once a chart type is selected, read the corresponding file in the references/ directory (e.g., references/generate_line_chart.md) to identify the required and optional fields. Extract the data from the user's input and map it to the expected args format.

3. Chart Generation

Invoke the scripts/generate.js script with a JSON payload.

Payload Format:

json
{
  "tool": "generate_chart_type_name",
  "args": {
    "data": [...],
    "title": "...",
    "theme": "...",
    "style": { ... }
  }
}

Execution Command:

bash
node ./scripts/generate.js '<payload_json>'
4. Result Return

The script will output the URL of the generated chart image. Return the following to the user:

  • The image URL.
  • The complete args (specification) used for generation.

Reference Material

Detailed specifications for each chart type are located in the references/ directory. Consult these files to ensure the args passed to the script match the expected schema.

License

This SKILL.md is provided by antvis/chart-visualization-skills. Licensed under the MIT License.

© bytedance, MIT. 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 28 other files (scripts, references) in skills/public/chart-visualization of bytedance/deer-flow.

  • SKILL.md
  • references/generate_area_chart.md
  • references/generate_bar_chart.md
  • references/generate_boxplot_chart.md
  • references/generate_column_chart.md
  • references/generate_district_map.md
  • references/generate_dual_axes_chart.md
  • references/generate_fishbone_diagram.md
  • references/generate_flow_diagram.md
  • references/generate_funnel_chart.md
  • references/generate_histogram_chart.md
  • references/generate_line_chart.md
  • references/generate_liquid_chart.md
  • references/generate_mind_map.md
  • references/generate_network_graph.md
  • references/generate_organization_chart.md
  • references/generate_path_map.md
  • references/generate_pie_chart.md
  • references/generate_pin_map.md
  • references/generate_radar_chart.md
  • … and 9 more

Open the folder on GitHubat commit 35cdcab

Used in 2 other repositories

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in bytedance/deer-flow, which our catalogue first saw on October 7, 2026.

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 skillbytedance/deer-flow83k2 repos~840Automated safety check: PassMIT
Chart Imagezebbern/claude-code-guide4.6k—~2.7kAutomated safety check: PassMIT
Chart Imagesundial-org/awesome-openclaw-skills663—~1.3kAutomated safety check: PassNone
MatplotlibzLanqing/codex-claude-academic-skills4.6k17 repos~2.9kAutomated safety check: PassMIT
Scientific Visualizationmims-harvard/OptimusKG14619 repos~6.3kAutomated safety check: PassMIT
SeabornzLanqing/codex-claude-academic-skills4.6k16 repos~4.9kAutomated safety check: PassBSD-3-Clause

Similar skills

  • Chart Image

    zebbern/claude-code-guide

    Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts.

    4.6k GitHub stars~2.7k tokensUpdated today
    Data & AnalyticsAuto-check passed
  • Chart Image

    sundial-org/awesome-openclaw-skills

    Generate publication-quality chart images from data. An agent skill from sundial-org/awesome-openclaw-skills.

    663 GitHub stars~1.3k tokensUpdated 7 mo ago
    Data & AnalyticsAuto-check passed
  • Matplotlib

    zLanqing/codex-claude-academic-skills

    Low-level plotting library for full customization. An agent skill from zLanqing/codex-claude-academic-skills.

    4.6k GitHub starsUsed in 17 repos~2.9k tokens
    Data & AnalyticsAuto-check passed
  • Scientific Visualization

    mims-harvard/OptimusKG

    Create publication figures with matplotlib/seaborn/plotly. An agent skill from mims-harvard/OptimusKG.

    146 GitHub starsUsed in 19 repos~6.3k tokens
    Data & AnalyticsAuto-check passed
  • Seaborn

    zLanqing/codex-claude-academic-skills

    Statistical visualization with pandas integration. An agent skill from zLanqing/codex-claude-academic-skills.

    4.6k GitHub starsUsed in 16 repos~4.9k tokens
    Data & AnalyticsAuto-check passed
  • Plot From Data

    Trae1ounG/paper-plot-skills

    Generate publication-quality matplotlib figures by selecting a pre-built paper style and substituting user data.

    861 GitHub starsUsed in 1 repo~583 tokens
    Data & AnalyticsAuto-check passed

More from bytedance/deer-flow

All 23 skills in this repo
  • Vercel Deploy

    bytedance/deer-flow

    Deploys a project to Vercel with one script and no login, then returns a live preview URL and a claim link for moving the deployment into your own Vercel account.

    83k GitHub starsUsed in 10 repos~797 tokens
    Auto-check passed
  • GitHub Deep Research

    bytedance/deer-flow

    Researches a GitHub repository over four rounds using the GitHub API and web search, then writes a structured markdown report with timeline, metrics and Mermaid diagrams.

    83k GitHub starsUsed in 5 repos~1.3k tokens
    Auto-check passed
  • Structured Image Generation

    bytedance/deer-flow

    Turns an image request into a structured JSON prompt and runs a bundled Python script to generate the picture, optionally guided by reference images.

    83k GitHub starsUsed in 5 repos~2.9k tokens
    Auto-check passed
  • Excel and CSV Data Analysis

    bytedance/deer-flow

    Analyzes uploaded Excel and CSV files with SQL through DuckDB, producing schema inspections, statistical summaries and exports to CSV, JSON or Markdown.

    83k GitHub starsUsed in 4 repos~2.2k tokens
    Auto-check passed
  • DeerFlow Smoke Test

    bytedance/deer-flow

    Walks through an end-to-end smoke test of a DeerFlow deployment: pull the latest code, deploy with Docker or locally, verify services, run health checks and write a report.

    83k GitHub stars~2.5k tokensUpdated today
    Auto-check: notes
  • Video Generation

    bytedance/deer-flow

    Generates short videos from a structured JSON prompt, optionally guided by a reference image used as the first or last frame.

    83k GitHub starsUsed in 3 repos~1.4k tokens
    Auto-check passed

Works with

Questions about Chart Visualization

What does Chart Visualization do?

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. Given data to visualize, the agent first chooses a chart type by the shape of the data: line and area charts for time series, bar, column and histogram charts for comparisons and distributions, pie and treemap for part-to-whole, scatter, Sankey and Venn for relationships, district, pin and path maps for geography, an organization chart or mind map for hierarchies, and specialized types such as radar, funnel, word cloud, boxplot, network graph, fishbone, flow diagram and spreadsheet.

When should I use Chart Visualization?

Chart Visualization fits situations like: turning a table of numbers into a chart image; choosing the right chart type for a trend, comparison or distribution; drawing a mind map, org chart or flow diagram from a description; plotting locations or routes on a map.

How do I install Chart Visualization in Claude Code?

Run `npx skills add bytedance/deer-flow --skill chart-visualization -a claude-code`. Or copy the skill folder (skills/public/chart-visualization in bytedance/deer-flow) 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 bytedance/deer-flow --skill chart-visualization -a codex`. Or copy the skill folder (skills/public/chart-visualization in bytedance/deer-flow) 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 bytedance/deer-flow --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 (node). Our summary lists: Node.js 18.0.0 or later. Compatibility (from SKILL.md): {"nodejs":">=18.0.0"}.

Does Chart Visualization access the network?

SKILL.md names 1 domain. As links in the text: github.com. 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

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 840 tokens (SKILL.md is roughly 3.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7.1k tokens, read only when the agent opens those files.

What are the alternatives to Chart Visualization?

Skills that share tags, products or a category with Chart Visualization: Chart Image (zebbern/claude-code-guide, 4.6k stars), Chart Image (sundial-org/awesome-openclaw-skills, 663 stars), Matplotlib (zLanqing/codex-claude-academic-skills, 4.6k stars) and Scientific Visualization (mims-harvard/OptimusKG, 146 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Chart Visualization?

bytedance (a GitHub organization) maintains it in bytedance/deer-flow, which has 83,441 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on October 7, 2026.

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