Навыки агента визуализации диаграмм

Навыки визуализации диаграмм

Превращение данных в визуальный язык для лучшего мышления.

Обзор

В эпоху принятия решений на основе данных эффективная и точная визуализация и анализ данных имеют первостепенное значение. AntV предлагает профессиональный набор решений для визуализации, предоставляющий надежный инструментарий и всесторонний набор навыков для всего рабочего процесса — от проектирования диаграмм и интерактивного исследования до углубленного анализа данных. Он позволяет пользователям быстро преобразовывать сложные наборы данных в интуитивно понятные визуальные диаграммы, значительно снижая порог создания благодаря интеллектуальным дизайн-спецификациям и богатой библиотеке компонентов. Будь то ежедневная отчетность, динамические информационные панели или сложный интерактивный анализ, AntV обеспечивает надежную поддержку. Интегрируя возможности ИИ, эти инструменты дополнительно упрощают и автоматизируют генерацию и оптимизацию визуализаций. Это позволяет аналитикам больше сосредоточиться на выявлении инсайтов и принятии бизнес-решений, действительно делая данные видимыми и понятными.

[!WARNING] Этот проект только объединяет код, сгенерированный ИИ.

Как внести вклад:

1. Отправьте issue, четко описывающий проблему
2. Назначьте его @copilot с вашими требованиями

Использование

Добавьте этот маркетплейс в Claude Code:

/plugin marketplace add antvis/chart-visualization-skills

Или вы можете напрямую установить навыки для ваших агентов:

npx skills add antvis/chart-visualization-skills

Доступные навыки

• 📊 chart-visualization: Комплексный навык создания диаграмм на базе AntV, предоставляющий более 26 типов диаграмм для интеллектуальной визуализации данных.

Chart Visualization интеллектуально выбирает наиболее подходящий тип диаграммы из более чем 26 доступных вариантов, извлекает параметры на основе детальных спецификаций и генерирует высококачественные изображения диаграмм. Он охватывает временные ряды, сравнения, часть-целое, отношения, географические, иерархические, статистические и специализированные визуализации.

• 🎨 infographic-creator: Создание красивых инфографик на основе заданного текстового контента. Используйте, когда пользователи просят создать инфографику.

Infographic Creator использует AntV Infographic для преобразования данных, информации и знаний в воспринимаемый визуальный язык. Он объединяет визуальный дизайн с визуализацией данных, предоставляя более 50 шаблонов, включая списки, последовательности, иерархии, сравнения, отношения и диаграммы. Он сжимает сложную информацию с помощью интуитивно понятных символов, помогая аудитории быстро понять и запомнить ключевые моменты.

• 🖼️ icon-retrieval: Поиск и извлечение SVG-строк иконок из библиотеки иконок. По умолчанию возвращает до 5 подходящих иконок (настраивается).

Icon Search помогает пользователям находить подходящие иконки для различных случаев использования, включая инфографику, веб-разработку, дизайн и многое другое. Поиск по ключевым словам для обнаружения доступных иконок и прямого извлечения их SVG-строк. Каждый поиск возвращает до 5 подходящих иконок по умолчанию (настраивается через параметр topK) с их URL-адресами и полным SVG-содержимым.

• 📝 narrative-text-visualization: Генерация структурированных визуализаций повествовательного текста из данных с использованием синтаксиса T8.

Narrative Text Visualization (T8) преобразует неструктурированные данные в семантически насыщенные повествовательные отчеты с использованием синтаксиса T8 — декларативного языка, подобного Markdown, для создания повествований о данных с аннотациями сущностей. Он дружественен к LLM и не зависит от фреймворков, бесшовно работая с HTML, React и Vue. Идеально подходит для создания отчетов по анализу данных, резюме и документов с инсайтами, где сущности, такие как метрики, значения, тренды и измерения, правильно размечены. Возможности включают встроенные мини-диаграммы, стандартизированное оформление и профессиональное форматирование. Поддерживает аутентичные источники данных и обеспечивает легковесный, технологически-агностический рендеринг.

• 📋 antv-s2-expert: Ассистент по разработке многомерных кросс-аналитических таблиц S2. Используйте, когда пользователям нужна помощь с сводными таблицами S2, листами таблиц или любой разработкой, связанной с @antv/s2.

AntV S2 Expert помогает пользователям разрабатывать с помощью движка многомерных кросс-аналитических таблиц S2. Он предоставляет всестороннее руководство по основному движку @antv/s2, привязкам к фреймворкам @antv/s2-react и @antv/s2-vue, компонентам расширенного анализа @antv/s2-react-components и серверному рендерингу @antv/s2-ssr. Охватывает сводные таблицы, листы таблиц, пользовательские ячейки, темизацию, события, взаимодействия, сортировку, итоги, всплывающие подсказки, закрепленные строки/столбцы, иконки, пагинацию и многое другое.

• 🕸️ antv-g6-graph: Генератор кода визуализации графов G6 v5. Используйте, когда пользователям необходимо генерировать графы G6 — сетевые графы, древовидные графы, блок-схемы, ментальные карты и любые визуализации данных с реляционной или графовой структурой с помощью библиотеки G6.

AntV G6 Graph генерирует точный, исполняемый код G6 v5, следуя лучшим практикам. Он охватывает инициализацию основного графа, структуры данных (узлы, ребра, комбо), более 10 алгоритмов раскладки (force, dagre, circular, grid, mindmap, fishbone и т.д.), все встроенные типы узлов/ребер/комбо, управление состоянием, более 15 поведений (drag-canvas, zoom-canvas, click-select, lasso и т.д.), более 10 плагинов (minimap, tooltip, toolbar, legend, timebar и т.д.), разработку пользовательских элементов, трансформации и анимацию. Встроенные защитные механизмы предотвращают распространенные ошибки миграции с v4 на v5, такие как использование устаревших конструкторов G6.Graph(), API graph.data() или конфигурации поведения на основе Mode.

• 📈 antv-g2-chart: Генератор кода диаграмм G2 v5. Используйте, когда пользователям необходимо генерировать диаграммы G2 — столбчатые диаграммы, линейные диаграммы, круговые диаграммы, точечные диаграммы, площадные диаграммы, тепловые карты и любые визуализации статистических данных с помощью библиотеки G2.

AntV G2 Chart генерирует точный, исполняемый код G2 v5, следуя лучшим практикам Spec Mode. Он охватывает более 30 типов диаграмм (interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge и другие), преобразования данных (stackY, dodgeX, binX, fold и т.д.), системы координат (cartesian, polar, theta, radial), масштабы, взаимодействия (brush, slider, legend filter), компоненты (axis, legend, tooltip, annotation) и многовидовые композиции. Встроенные защитные механизмы предотвращают распространенные ошибки миграции с v4 на v5, такие как использование устаревших цепочечных API, недопустимых названий палитр или ссылки на d3 в пользовательском коде.

Результаты оценки

Подход Harness Engineering был тщательно протестирован на 174 тестовых случаях генерации диаграмм, демонстрируя значительные улучшения по сравнению с базовыми методами:

Результаты показывают, что Harness Engineering позволяет LLM достигать точности, близкой к производственной (до 98,2%), значительно превосходя базовый подход Context7.

[!TIP] Скоро появятся новые навыки.

Использование библиотеки

Её можно использовать как библиотеку в ваших проектах Node.js с CLI и API.

Использование CLI

Мы также предоставляем инструмент CLI под названием antv для удобного использования в вашем терминале, установите глобально:

npm install -g @antv/chart-visualization-skills

Поиск или перечисление навыков по запросу:

# Поиск навыков по запросу (только метаданные)
antv retrieve "bar chart" --library g2 --topk 10

# Поиск навыков с полным содержимым markdown (основные ограничения автоматически добавляются в начало)
antv retrieve "bar chart" --library g2 --content

# Поиск навыков и вывод в формате JSON
antv retrieve "bar chart" --library g2 --output json

# Получить навык по его точному ID
antv get g2-mark-interval-basic --library g2

# Перечислить все доступные навыки
antv list --library g2 --category core

# Перечислить навыки и вывести в формате JSON
antv list --output json

# Показать информацию о навыке (основные ограничения из SKILL.md)
antv info --library g2

# Показать информацию о навыке в формате JSON
antv info --library g2 --output json

Использование для команды:

Использование: antv [параметры] [команда]

Инструмент CLI для поиска навыков визуализации диаграмм AntV

Параметры:
  -V, --version               вывести номер версии
  -h, --help                  показать справку по команде

Команды:
  retrieve [параметры] <запрос>  Поиск навыков, соответствующих запросу
  get [параметры] <id>          Получить навык по его точному ID
  list [параметры]              Перечислить все доступные навыки
  info [параметры]              Показать информацию о навыке из SKILL.md
  help [команда]              показать справку по команде

Параметры для retrieve:
  --library <библиотека>             Фильтр по библиотеке (например, g2, g6)
  --topk <n>                  Количество возвращаемых результатов (по умолчанию: 7)
  --content                   Включить тело содержимого markdown в результаты; основные ограничения (разделы 1-2 SKILL.md) всегда добавляются в начало как первый результат
  --output <формат>           Формат вывода: json | text (по умолчанию: "text")

Примечание: --content всегда добавляет основные ограничения библиотеки (разделы 1 и 2 SKILL.md, до маркера <!-- CONSTRAINTS:END -->) как первый результат, гарантируя, что модель получит основные правила вместе с справочными документами.

Использование API

import { retrieve } from '@antv/chart-visualization-skills';

// Только метаданные (без содержимого)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// С полным содержимым markdown (основные ограничения автоматически добавляются в начало как первый результат)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// С содержимым, но без основных ограничений
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });

retrieve(query: string, options?: RetrieveOptions): Skill[]

interface RetrieveOptions {
  library?: string;   // Фильтр библиотеки, например 'g2' или 'g6'
  topK?: number;      // Количество результатов (по умолчанию: 7)
  content?: boolean;  // Включить тело содержимого markdown (по умолчанию: false)
  includeInfo?: boolean; // Добавить в начало основные ограничения из SKILL.md (по умолчанию: как у content)
}

Примечания:

• По умолчанию поиск возвращает легковесные объекты результатов без поля content.
• content: true возвращает тело содержимого markdown (метаданные frontmatter исключаются).
• Когда includeInfo равно true (по умолчанию, когда content: true), блок основных ограничений — SKILL.md до <!-- CONSTRAINTS:END --> — вставляется как первый элемент (id с префиксом __info__), гарантируя, что модель всегда видит основные правила.

import { info } from '@antv/chart-visualization-skills';

const skillInfo = info('g2');
// => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' }

info(library?: string): SkillInfo | undefined

interface SkillInfo {
  name: string;
  description: string;
  content: string;            // Полное тело SKILL.md (после frontmatter)
  constraintsContent: string; // Тело SKILL.md до маркера <!-- CONSTRAINTS:END -->; вставляется при retrieve, когда includeInfo: true
}

Лицензия

Лицензия MIT - см. файл LICENSE для подробностей.