图表可视化智能体技能

图表可视化技能

将数据转化为视觉语言，让思考更清晰。

概述

在数据驱动决策的时代，高效而准确的数据可视化与分析至关重要。AntV 提供专业级的可视化解决方案，为从图表设计、交互探索到深度数据分析的整个流程，提供了一套强大的工具集和全面的技能。它让用户能够快速将复杂的数据集转化为直观的视觉图表，通过智能设计规范和丰富的组件库显著降低了创作门槛。无论是日常报表、动态仪表板，还是复杂的交互分析，AntV 都能提供可靠支持。通过集成 AI 能力，这些工具进一步简化和自动化了可视化的生成与优化过程。这让分析人员可以更专注于发现洞察和推动业务决策，真正让数据可见、可理解。

[!WARNING] 此项目仅合并 AI 生成的代码。

如何贡献：

1. 提交 issue 清晰描述问题
2. 将问题分配给 @copilot 并附上你的需求

使用方法

将此市场添加到 Claude Code：

/plugin marketplace add antvis/chart-visualization-skills

或者你可以直接为你的多代理安装技能：

npx skills add antvis/chart-visualization-skills

可用技能

• 📊 图表可视化：一项由 AntV 驱动的综合图表生成技能，提供 26 种以上的图表类型，用于智能数据可视化。

图表可视化 从 26 种以上可用选项中智能选择最合适的图表类型，根据详细规范提取参数，并生成高质量图表图像。它涵盖时间序列、比较、部分与整体、关系、地理、层次、统计和专业可视化。

• 🎨 信息图创建器：根据给定的文本内容创建漂亮的信息图。当用户要求创建信息图时使用。

信息图创建器 使用 AntV Infographic 将数据、信息和知识转化为可感知的视觉语言。它将视觉设计与数据可视化相结合，提供 50 多种模板，包括列表、序列、层次、比较、关系和图表。它用直观的符号压缩复杂信息，帮助受众快速理解和记住关键点。

• 🖼️ 图标检索：从图标库中搜索并获取图标 SVG 字符串。默认返回最多 5 个匹配图标（可自定义）。

图标搜索 帮助用户为信息图、Web 开发、设计等各种用例找到合适的图标。通过关键词搜索发现可用图标并直接获取其 SVG 字符串。每次搜索默认返回最多 5 个匹配图标（可通过 topK 参数自定义），并附有其 URL 和完整 SVG 内容。

• 📝 叙事文本可视化：使用 T8 语法从数据生成结构化的叙事文本可视化。

叙事文本可视化 (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 多种布局算法（力导向、dagre、圆形、网格、思维导图、鱼骨等）、所有内置节点/边/组合类型、状态管理、15 多种行为（拖动画布、缩放画布、点击选择、套索等）、10 多种插件（小地图、工具提示、工具栏、图例、时间轴等）、自定义元素开发、变换和动画。内置的防护措施可以防止常见的 v4→v5 迁移陷阱，例如使用已弃用的 G6.Graph() 构造函数、graph.data() API 或基于模式的行为配置。

• 📈 antv-g2-chart：G2 v5 图表代码生成器。当用户需要生成 G2 图表——条形图、折线图、饼图、散点图、面积图、热力图以及任何使用 G2 库的统计数据可视化时使用。

AntV G2 Chart 生成遵循规范模式最佳实践的准确、可运行的 G2 v5 代码。它涵盖 30 多种图表类型（区间、线、面积、点、矩形、单元格、树图、桑基图、弦图、词云、仪表盘等）、数据变换（堆叠 Y、分组 X、分箱 X、折叠等）、坐标系（笛卡尔、极坐标、theta、径向）、比例尺、交互（刷选、滑块、图例过滤）、组件（坐标轴、图例、工具提示、注释）以及多视图组合。内置的防护措施可以防止常见的 v4→v5 迁移陷阱，例如使用已弃用的链式 API、无效的调色板名称或在用户代码中引用 d3。

评估结果

Harness Engineering 方案经过 174 个图表生成测试用例的严格测试，与基线方法相比有显著改进：

结果显示，Harness Engineering 使 LLM 能够达到接近生产就绪的准确率（最高 98.2%），显著优于 Context7 基线方法。

[!TIP] 更多技能即将推出。

库的使用方式

它可以在你的 Node.js 项目中作为库使用，提供 CLI 和 API 两种方式。

CLI 使用方式

我们还提供了一个名为 antv 的 CLI 工具，便于在终端中使用，全局安装：

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

命令用法：

Usage: antv [options] [command]

用于 AntV 图表可视化技能检索的 CLI 工具

Options:
  -V, --version               输出版本号
  -h, --help                  显示命令帮助信息

Commands:
  retrieve [options] <query>  搜索匹配查询的技能
  get [options] <id>          通过精确 ID 获取技能
  list [options]              列出所有可用技能
  info [options]              显示来自 SKILL.md 的技能信息
  help [command]              显示命令帮助信息

Options for retrieve:
  --library <lib>             按库过滤（例如 g2, g6）
  --topk <n>                  返回结果的数量（默认：7）
  --content                   在结果中包含 markdown 内容主体；核心约束（SKILL.md 第 1-2 节）始终作为第一个结果前置
  --output <format>           输出格式：json | text（默认："text"）

注意：--content 始终将库的核心约束（SKILL.md 的第 1 节和第 2 节，直到 <!-- 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 --> 标记的部分；当 includeInfo 为 true 时由 retrieve 注入
}

许可证

MIT 许可证——详情请参见 LICENSE 文件。