Guide · Agent skill
How to use the Chart Visualization agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Chart Visualization skill is a packaged set of instructions and a script that lets an AI agent turn your data into a chart image. It is part of the public skills in the bytedance/deer-flow project and is licensed under MIT. This guide explains what the skill does, how to install it, how to ask for a chart in plain language, and what to check before sending data through it.
Chart Visualizationbytedance/deer-flow · MIT Download the skill Quick start
- 1Download and unzip. Download the skill ZIP from this page and unzip the chart-visualization folder.
- 2Place the folder. Move it to ~/.claude/skills/ for all projects, or to .claude/skills/ inside one project. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills instead.
- 3Check Node.js. Run node --version and confirm the version is 18.0.0 or newer.
- 4Prepare your data. Gather the table or list of numbers, the question the chart should answer and any title or axis labels.
- 5Ask in plain language. Describe the data and the visual you want. The agent selects the chart type and fills the fields.
- 6Review the args. Check the specification the agent returns against your data before sharing the chart.
- 7Open the image URL. Use the returned link only when the generation completed successfully.
What is an agent skill and what does this one do?
An agent skill is a folder of instructions and optional scripts that an AI agent can load when a task matches the skill's description. This skill is triggered when you want to visualize data.
The skill guides the agent through three steps: it selects a suitable chart type from 26 options (such as line, bar, pie, funnel, map and mind map), it extracts the fields that chart type requires from your data, and it runs a JavaScript script to generate a chart image. The agent then returns the image link together with the complete specification it used.
- Chart selection: matches the shape of your data to a chart type, for example a line or area chart for trends and a funnel chart for process stages.
- Parameter extraction: reads the reference file for the chosen chart and maps your data to its expected fields.
- Image generation: sends the request through scripts/generate.js, which calls an external chart service.
- Result: a link to the image plus the exact args used, so you can reproduce or adjust the chart.
Install the chart-visualization skill
Download the skill ZIP from this directory page and unzip it. For Claude Code or a compatible agent, place the unzipped chart-visualization folder in ~/.claude/skills/ to make it available across your projects, or in a project's .claude/skills/ folder to limit it to that project.
If you use the Claude apps, you can upload the ZIP instead. Open Settings, go to Capabilities, then Skills, and add the skill there.
- Personal install: ~/.claude/skills/chart-visualization/
- Project install: .claude/skills/chart-visualization/ inside your project folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Check the requirements before you run it
The skill needs Node.js 18 or newer, because its script runs with node. It also needs network access to the chart-generation service that scripts/generate.js calls. The service address is not stated in the provided files, so confirm with the directory or the upstream project what that endpoint is before relying on it.
You can check your Node.js version from a terminal with the command below.
- Node.js 18.0.0 or newer
- Network access to the chart service used by scripts/generate.js
- The skill runs scripts and uses the network
node --versionHow to trigger the skill with a natural request
You do not need to name the skill. Give the agent your data and describe what you want to see. Good requests say what the data is, what question the chart should answer, and any title or axis labels you want.
Include the actual numbers or a table in the message. If you have a time column, say so, since trend charts depend on it. If you are unsure which chart fits, ask the agent to choose one and explain why.
- "Visualize monthly signups from this table as a line chart with the title Signups 2024."
- "Make a funnel chart from these stages: visits, sign-ups, trials, paid customers."
- "Compare revenue by region as a bar chart and label the axes."
- "Show the share of each product in total sales as a pie chart."
What the agent returns and how to read it
When generation succeeds, the agent should return the image URL and the complete args specification used to create the chart. Keep the specification if you want to regenerate or tweak the chart later.
If the chart service request fails or the request is malformed, the script reports the error on stderr and exits with status 1. A URL should only be presented when the command exits successfully.
- Image URL: open it in a browser to view or download the chart.
- Specification (args): the data, title, theme and style used, so the chart can be reproduced.
- Errors: a missing tool name, an unknown tool or a failed service request is reported as an error rather than a chart.
Safety notes: data, scripts and the network
Chart data is sent to an external chart-service URL. Do not use this skill with confidential or personal data unless you have checked the service's privacy terms, which the SKILL.md does not describe. Offline or air-gapped environments will not work because the script requires network access.
The skill runs a script, so review the files in the folder before installing it. Output images depend on the remote service's rendering, so they are not suitable as pixel-precise publication graphics.
- Do not send sensitive figures without checking where they go.
- Expect no offline use: the script needs network access and Node.js.
- Review scripts/generate.js and the references before installing.
Tips for better charts
Keep category names short and make sure time values use one consistent format, such as YYYY-MM. The area chart reference recommends this format. For stacked charts, every group should cover the same time points, so fill any gaps first.
For bar charts with many series, consider stacking or filtering to the key items so the chart stays readable. Box plots work best with at least five samples per category, according to the box plot reference.
- Use a consistent time format such as YYYY-MM.
- Fill missing values in stacked series so each group covers the same time points.
- Use at least five samples per category for box plots.
- Shorten category names for bar charts.
What people use it for
- Turning a monthly table of sales or signups into a line or area trend chart for a report.
- Building a funnel chart from process stages such as visits, sign-ups and paid customers.
- Comparing categories like revenue by region with a bar or column chart.
- Showing the share of each part of a total with a pie chart or a treemap.
- Drafting a mind map or flow diagram from an outline the agent is given.
Frequently asked questions
Is the chart-visualization skill free?
The skill is licensed under the MIT License, as stated in its SKILL.md. The source does not describe pricing for the external chart service it calls, so check that service's terms yourself.
What do I need to install the chart-visualization skill?
Download the ZIP, unzip it and place the folder in ~/.claude/skills/ or a project's .claude/skills/ folder. You also need Node.js 18 or newer and network access to the chart service.
Does the skill work offline?
No. The script needs network access to the external chart-generation service, so offline or air-gapped use is not supported.
Is my data safe with this skill?
Chart data is sent to an external chart-service URL. The SKILL.md does not name the service or describe its privacy terms, so avoid confidential or personal data unless you have verified them.
Which chart types can it make?
The skill selects from 26 options. The guidelines name line, area, bar, column, histogram, pie, treemap, scatter, Sankey, Venn, district, pin and path maps, organization chart, mind map, radar, funnel, liquid, word cloud, box plot, violin, network graph, fishbone and flow diagram, and spreadsheet.
What should I do if chart generation fails?
Check that Node.js is version 18 or newer and that the network can reach the chart service. The script reports missing or unknown tools and failed requests on stderr and exits with status 1, so read that message to find the cause.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Choose this skill if you regularly want quick charts from tables or lists of numbers inside an agent workflow and your data is not sensitive. Pick a local tool or spreadsheet software if you need offline work, confidential data handling or publication-grade graphics.
Download the skill