chart-visualizationавтор AntV

Chart Visualization Skill.

Навык для Claude Code и Codex для диаграмм и графиков: визуализирует данные в виде столбчатых, линейных, круговых, лепестковых, Sankey-диаграмм, mind-map и блок-схем через AntV API.

Diagrams & Data Visualization
Chart image

Скачать OpenDesign Инструкция по использованию

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

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

Вводная информация и заголовки разделов считаны из исходного файла 2026-09-14 · полностью 3 736 символов

01 Что делает

Что делает skill chart-visualization в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Этот skill превращает данные пользователя в диаграммы, вызывая API генерации диаграмм AntV. Он анализирует данные и запрос пользователя, чтобы выбрать наиболее подходящий тип диаграммы из широкого каталога (столбчатая, линейная, круговая, радарная, sankey, mind-map, flow-diagram и другие), формирует тело JSON-запроса с необходимыми полями type и source, вызывает API с помощью curl и выводит полученный URL изображения как Markdown-изображение.

Он документирует контракт формы данных для каждого из примерно 20 поддерживаемых типов диаграмм, а также общие опциональные параметры, такие как theme, width, height и title, давая агенту конкретный справочник для построения корректных запросов, а не для угадывания форматов.

Что он выдаёт

Ответ JSON API, содержащий флаг success и URL изображения resultObj

Смотрите пример запроса ↗

Как это работает

01
Выбор типа диаграммы
Проанализируйте данные и требования пользователя, чтобы выбрать наиболее подходящий тип диаграммы.
02
Сформировать тело запроса
Сконструируйте JSON-тело запроса согласно спецификации API.
03
Вызвать API
Используйте инструмент curl для вызова API и генерации изображения диаграммы.
04
Вывести изображение
Выведите URL возвращённого изображения в формате Markdown-изображения.

02 Определите своё применение

Когда использовать навык chart-visualization

Используйте skill chart-visualization в Claude Code или Codex, когда задача — диаграммы и графики такого рода. Область применения и ограничения ниже взяты из собственного файла skill.

Хорошо подходит

Визуализация временных тенденций с помощью линейной диаграммы или накопительных тенденций с помощью диаграммы с областями
Сравнение категорий по горизонтали с помощью столбчатой диаграммы или по вертикали с помощью гистограммы
Отображение пропорционального состава с помощью круговой диаграммы или иерархической доли с помощью treemap
Отображение потоков между категориями с помощью диаграммы Сэнки или корреляции с помощью точечной диаграммы
Отображение иерархических или древовидных структур с помощью organization-chart или mind-map

Знайте границы

Требуется AntV APISKILL.md указывает эту зависимость; навык не работает без неё в вашем проекте.

Что предоставить

Массив данных, специфичный для диаграммыКаждый тип диаграммы ожидает определённую форму данных, например bar/column требуют массивы {category, value, group?}, sankey требует массивы {source, target, value}.
Необязательные параметры отображенияМожно указать theme, width, height, title, style.texture, а для осевых диаграмм — axisXTitle/axisYTitle для настройки вывода.

03 Внутри скилла

Правила, которые skill chart-visualization задаёт Claude Code и Codex

7 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

Обязательные поля
Каждое тело запроса должно включать поле type и поле source со значением "chart-visualization-skills".
Фиксированная конечная точка
Диаграммы генерируются с помощью POST-запроса на единую фиксированную конечную точку API.
Размер холста по умолчанию
Ширина диаграммы по умолчанию — 600, высота — 400, если не указано иное.
Варианты темы
Тема по умолчанию — "default", но можно задать "academy" или "dark".
Стиль текстуры
style.texture по умолчанию равен "default", но может быть установлен в "rough" для эффекта рисунка от руки.
Настройки стекирования по умолчанию
Столбчатые диаграммы (bar) по умолчанию используют stack: true, а колоночные диаграммы (column) по умолчанию используют group: true.
Формат вывода
URL resultObj из ответа API должен быть отрендерен как изображение в формате Markdown с использованием шаблона .

04 Применение

Установите chart-visualization в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте chart-visualization в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

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

Общая форма CLI-команды skills для skills/chart-visualization/SKILL.md; репозиторий может документировать собственный путь.

Дайте навыку первую задачу на диаграммы и графики

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

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.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Сопоставьте выбранный тип диаграммы с руководством по выбору диаграмм на основе характеристик данных (временной ряд, сравнение, пропорция, взаимосвязь, иерархия)

В OpenDesign импортируйте chart-visualization по ссылке SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Ветка master
Файл skill: skills/chart-visualization/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 089b687
License: MIT Из LICENSE.
Звёзды репозитория: 489 Снимок GitHub сделан 14.09.2026 для всего репозитория antvis/chart-visualization-skills, который содержит 2 навыка в этом каталоге. Не является рейтингом или счётчиком использования для chart-visualization.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

步骤Четыре шага: анализ данных, построение JSON-тела запроса, вызов API через curl, вывод изображения в формате Markdown
图表选择指南Сопоставляет характеристики данных (временной ряд, сравнение, пропорция, взаимосвязь, иерархия) с типами диаграмм
API 接口Описывает POST-эндпоинт, обязательные поля и пример запроса/ответа curl
支持的图表类型Таблица со всеми поддерживаемыми типами диаграмм, сгруппированными по категориям
通用可选参数Общие необязательные параметры (theme, width, height, title, texture) и их значения по умолчанию
各图表 data 格式Точная структура данных и необязательные поля, необходимые для каждого отдельного типа диаграммы

Собственное описание skill

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

Описание из front-matter в SKILL.md. Полный файл составляет около 3 736 символов. Читайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill chart-visualization

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Какие типы диаграмм может создавать этот skill

Он поддерживает широкий каталог, включающий 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.

В каком формате приходит результат

API возвращает JSON-объект с URL resultObj, который skill затем выводит как ссылку на изображение в формате Markdown.

Chart Visualization

Запустите chart-visualization на реальной задаче по диаграммам и графикам.

Скачайте OpenDesign, импортируйте chart-visualization по его ссылке SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

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