# チャート可視化エージェントスキル

> AntVチャート可視化スキルで複雑なデータセットを直感的なビジュアルチャートに変換。26種類以上のチャートタイプとAI生成機能を提供。インパクトのあるデータストーリーを簡単に作成しましょう。

- Canonical: https://nanoskill.ai/ja/skills/chart-visualization-skills
- Markdown: https://nanoskill.ai/ja/skills/chart-visualization-skills.md
- Author: antvis
- Published: 2026-06-09T05:00:00.000Z
- Updated: 2026-07-25T04:33:38.870Z
- Language: ja
- Source type: github
- Popularity signal: 523

## Sources

- https://github.com/antvis/chart-visualization-skills

## Install

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

## About

AntVチャート可視化スキルは、複雑なデータセットを効率的かつ正確に直感的なビジュアルチャートに変換する専門の可視化ソリューションスイートです。Ant Groupによって開発されたこのスキルコレクションは、チャートデザインやインタラクティブな探索から詳細なデータ分析まで、全ワークフローをシームレスに進めることを可能にし、インテリジェントなデザイン仕様と豊富なコンポーネントライブラリにより、作成の敷居を大幅に下げます。日々のレポート、動的なダッシュボード、高度なインタラクティブ分析に強力なサポートを提供し、データを見える化し理解しやすくします。

このスイートには、26種類以上のチャートタイプを生成する「chart-visualization」、テキストを魅力的なビジュアルインフォグラフィックに変換する50以上のテンプレートを備えた「infographic-creator」、T8構文を使用して非構造化データを意味的に豊かなレポートに変換する「narrative-text-visualization」などの専門スキルが含まれています。これらの機能はAI統合によってさらに強化され、ビジュアライゼーションの生成と最適化を合理化・自動化し、アナリストが洞察の発見とビジネス上の意思決定により集中できるようにします。

開発者は、多次元クロス分析テーブル用の「antv-s2-expert」、G6 v5グラフ可視化生成用の「antv-g6-graph」、G2 v5統計チャート作成用の「antv-g2-chart」などの専用スキルも活用できます。これらのツールは、ベストプラクティスに従った正確で実行可能なコードを提供し、コア機能、さまざまなレイアウトアルゴリズム、コンポーネントタイプ、インタラクションを網羅しています。スキルはCLIやAPIを介してNode.jsプロジェクトに統合でき、さまざまな開発ニーズに対応する柔軟性を提供します。

## Key features

- **包括的なチャート生成**: 時系列、比較、関係、地理データなど、多様なデータ可視化ニーズに対応する26種類以上のインテリジェントなチャートタイプにアクセスできます。
- **AI駆動のインフォグラフィック作成**: 50以上のテンプレートを使用してテキストコンテンツから美しいインフォグラフィックを生成し、情報を直感的なシンボルで知覚可能な視覚言語に変換します。
- **構造化されたナラティブテキスト可視化**: エンティティ注釈やミニチャートを使用したデータナラティブのための Markdown ライクな言語である T8 シンタックスを使用して、非構造化データを意味的に豊かなナラティブレポートに変換します。
- **多次元クロス分析テーブル**: AntV S2 Expert を活用して、ピボットテーブル、テーブルシート、カスタムセルを開発し、多次元データ分析の包括的なガイダンスを提供します。
- **高度なグラフと統計チャートの生成**: ベストプラクティスに従って、ネットワーク、ツリー、フローチャートなどの正確な G6 グラフコードと、棒グラフ、折れ線グラフ、円グラフなどの統計可視化のための G2 チャートコードを生成します。

## Use cases

- **日次レポートと動的ダッシュボードの作成**: 複雑なデータセットを直感的なビジュアルチャートに迅速に変換し、日次レポートや動的ダッシュボードで効率的なデータ駆動型の意思決定を可能にします。
- **洗練されたインタラクティブ分析ツールの開発**: AntV の堅牢なツールキットを活用して、高度なインタラクティブ分析アプリケーションを構築し、詳細なデータ探索と可視化機能を提供します。
- **AI最適化された可視化の生成**: 統合されたAI機能により、データ可視化の生成と最適化を合理化・自動化し、アナリストがインサイトに集中できるようにします。
- **データを魅力的なインフォグラフィックに変換**: さまざまなテンプレートを使用して、データ、情報、知識を視覚的に魅力的なインフォグラフィックに変換し、複雑なアイデアを明確かつ記憶に残るように伝えます。

## Result preview

このスキルによって生成された専門のAI駆動データ可視化レポートをご覧ください。

![A chart visualizing 'Salary Distribution by Department' using box plots for Engineering, Design, Marketing, Sales, and Support. Each box plot shows median, interquartile ranges, whiskers, and outliers, with distinct color coding for each department. The chart clearly conveys salary spread and variability across departments.](https://file.nanoskill.ai/chart-outcome-1.png)

![A line chart titled 'Cumulative Growth Trajectory' showing growth over quarters from Q1 23 to Q4 24. Data points are labeled with numerical values and connected by a green line, with a shaded area beneath to highlight cumulative increase. The chart demonstrates steady upward growth from 1,200 to 6,100.](https://file.nanoskill.ai/chart-outcome-2.png)

![A composite image containing two data visualizations. The upper chart is a scatter plot titled 'Investment vs Performance' comparing investment amounts to performance scores for three groups, represented by color-coded circular markers of varying sizes. The lower chart is a bubble chart titled 'GDP vs Life Expectancy' showing GDP per capita versus life expectancy for countries including Japan, Sweden, USA, Germany, China, Brazil, India, and Kenya. Each country is represented by a colored bubble sized by an additional variable, highlighting global economic and health disparities.](https://file.nanoskill.ai/chart-outcome-3.png)

## Result walkthrough

### インストール

AIエージェントにAntVチャート可視化スキルを追加します。

![A screenshot of an AI assistant terminal showing the installation of the AntV chart-visualization-skills package. The assistant logs the execution of the command to add the skills repository via 'npx skills add', confirms interactive selection with the '--yes' flag, and lists all 9 installed skills including chart generation, graph visualization, multi-dimensional tables, editing engines, infographics, narrative visualizations, and skill maintenance. The log notes symlinking into Hermes Agent and a security assessment showing low/medium risk with nothing critical.](https://file.nanoskill.ai/chart-visualization-install.png)

### 説明

可視化したいトピック領域について、目的、対象読者、希望するチャートの種類やスタイルを含めて説明してください。

![A screenshot of an AI assistant task panel for creating a comprehensive AntV chart visualization package. The instructions specify generating multiple chart types, infographics from textual data with templates, and narrative-style reports. Emphasis is on a clean, modern, professional style, ensuring readability, hierarchy, interactivity, dynamic dashboards, drill-down exploration, cross-analysis, and production-ready code snippets for Node.js integration. The final output should be a structured PDF or interactive dashboard, balancing aesthetic elegance with functional clarity.](https://file.nanoskill.ai/chart-visualization-task.png)

### 可視化を最適化

このスキルは、明確さ、レイアウト、洞察に最適化されたチャートやダッシュボードを生成します。

![A screenshot showing the AI assistant output after loading AntV visualization skills and preparing a professional PowerPoint deck. The assistant indicates understanding of all AntV visualization tools and plans to build a data visualization showcase featuring real data across multiple chart types, infographics, narrative visualizations, network graphs, and S2 tables, ready for presentation in PPT format.](https://file.nanoskill.ai/chart-visualization-outcome.png)

## Skill definition

# チャート可視化スキル

データを視覚言語に変換し、より良い思考を実現します。

## 概要

データドリブンな意思決定の時代において、効率的かつ正確なデータ可視化と分析が最も重要です。AntVはプロフェッショナルな可視化ソリューション群を提供し、チャート設計からインタラクティブな探索、深いデータ分析に至るワークフロー全体をカバーする堅牢なツールキットと包括的なスキルセットを提供します。ユーザーは複雑なデータセットを直感的なビジュアルチャートに素早く変換でき、インテリジェントなデザイン仕様と豊富なコンポーネントライブラリによって作成のハードルを大幅に下げます。日常的なレポート作成、動的なダッシュボード、高度なインタラクティブ分析のいずれにおいても、AntVは信頼性の高いサポートを提供します。AI機能の統合により、これらのツールは可視化の生成と最適化をさらに効率化し自動化します。これにより、アナリストは洞察の発見とビジネス上の意思決定により集中できるようになり、データを真に可視化し理解可能にします。

> [!WARNING]
> このプロジェクトはAIが生成したコードをマージするだけです。
>
> **貢献方法:**
> 1. 問題を明確に説明するIssueを作成してください
> 2. 要件とともに@copilotにアサインしてください

## 使用方法

このマーケットプレイスをClaude Codeに追加します：
```bash
/plugin marketplace add antvis/chart-visualization-skills
```

または、複数のエージェントに対して直接スキルをインストールすることもできます：

```bash
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`は、インフォグラフィック、Web開発、デザインなど様々なユースケースに適したアイコンを見つけるのを支援します。キーワードで検索し、利用可能なアイコンを発見し、そのSVG文字列を直接取得します。各検索では、デフォルトで最大5つの一致するアイコン（topKパラメータでカスタマイズ可能）がURLと完全なSVGコンテンツとともに返されます。

- 📝 **narrative-text-visualization**: T8 Syntaxを使用して、データから構造化されたナラティブテキスト可視化を生成します。

`Narrative Text Visualization`（T8）は、T8 Syntax（エンティティ注釈付きのデータナラティブを作成するための宣言的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ライブラリで生成する必要があるときに使用します。

`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など）、カスタムエレメント開発、トランスフォーム、アニメーションをカバーします。非推奨の`G6.Graph()`コンストラクタ、`graph.data()` API、Modeベースのビヘイビア設定など、v4からv5への移行でよくある落とし穴を防ぐガードレールが組み込まれています。

- 📈 **antv-g2-chart**: G2 v5チャートコードジェネレーター。ユーザーが棒グラフ、折れ線グラフ、円グラフ、散布図、面グラフ、ヒートマップなどの統計データ可視化をG2ライブラリで生成する必要があるときに使用します。

`AntV G2 Chart`は、Spec Modeのベストプラクティスに従った正確で実行可能なG2 v5コードを生成します。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）、マルチビューコンポジションをカバーします。非推奨のチェーンAPI、無効なパレット名、ユーザーコード内での`d3`参照など、v4からv5への移行でよくある落とし穴を防ぐガードレールが組み込まれています。

**評価結果**

Harness Engineeringアプローチは174のチャート生成テストケースに対して厳密にテストされ、ベースライン手法に対する大幅な改善を示しました：

| **モデル** | **G2** | **G6** |
| :---: | :---: | :---: |
| qwen3-coder-480b-a35b-instruct | ✨ 98.2% <sup><sub>+17.7%</sub></sup> | 94.8% <sup><sub>+15.6%</sub></sup> |
| Kimi-K2.5 | 97.7% <sup><sub>+17.2%</sub></sup> | 96.9% <sup><sub>+17.7%</sub></sup> |
| GLM-5.1 | 93.6% <sup><sub>+13.1%</sub></sup> | 92.8% <sup><sub>+13.6%</sub></sup> |
| DeepSeek-V3.2 | 90.8% <sup><sub>+10.3%</sub></sup> | ✨ 97.9% <sup><sub>+18.7%</sub></sup> |
| Context7 <sub>ベースライン</sub> | 80.5% | 79.2% |

この結果は、Harness EngineeringによってLLMが本番環境に近い精度（最大98.2%）を達成でき、Context7ベースラインアプローチを大幅に上回ることを示しています。

> [!TIP]
> さらに多くのスキルが近日公開予定です。

## ライブラリの使用

`CLI`と`API`を使って、Node.jsプロジェクトでライブラリとして使用できます。

### CLIの使用

ターミナルで簡単に使用できる`antv`という名前のCLIツールも提供しています。グローバルにインストールしてください：

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

**クエリによるスキルの取得または一覧表示**:

```bash
# クエリでスキルを取得（メタデータのみ）
antv retrieve "bar chart" --library g2 --topk 10

# 完全なマークダウンコンテンツを含むスキルを取得（コア制約は自動的に先頭に追加されます）
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 [オプション] [コマンド]

AntVチャート可視化スキル取得のためのCLIツール

オプション:
  -V, --version               バージョン番号を出力
  -h, --help                  コマンドのヘルプを表示

コマンド:
  retrieve [オプション] <クエリ>  クエリに一致するスキルを検索
  get [オプション] <ID>          正確なIDでスキルを取得
  list [オプション]              利用可能なすべてのスキルを一覧表示
  info [オプション]              SKILL.mdからのスキル情報を表示
  help [コマンド]              コマンドのヘルプを表示

retrieveのオプション:
  --library <lib>             ライブラリでフィルタ（例: g2, g6）
  --topk <n>                  返す結果の数（デフォルト: 7）
  --content                   結果にマークダウンコンテンツ本体を含める；コア制約（SKILL.mdセクション1-2）は常に最初の結果として先頭に追加される
  --output <format>           出力形式: json | text（デフォルト: "text"）
```

> 注意: `--content`は常にライブラリのコア制約（SKILL.mdのセクション1と2、`<!-- CONSTRAINTS:END -->`マーカーまで）を最初の結果として先頭に追加し、モデルが参照ドキュメントとともに必須ルールを確実に受け取るようにします。

### APIの使用

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

// メタデータのみ（コンテンツなし）
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// 完全なマークダウンコンテンツを含む（コア制約は自動的に最初の結果として先頭に追加）
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// コンテンツあり、コア制約なし
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });
```

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

interface RetrieveOptions {
  library?: string;   // ライブラリフィルタ、例: 'g2' または 'g6'
  topK?: number;      // 結果の数（デフォルト: 7）
  content?: boolean;  // マークダウンコンテンツ本体を含める（デフォルト: false）
  includeInfo?: boolean; // SKILL.mdのコア制約を先頭に追加（デフォルト: contentと同じ）
}
```

| オプション | 型 | デフォルト | 説明 |
| :--- | :--- | :--- | :--- |
| `library` | `string` | all | ライブラリフィルタ（`g2` または `g6`） |
| `topK` | `number` | `7` | 結果の数 |
| `content` | `boolean` | `false` | マークダウンコンテンツ本体を含める |
| `includeInfo` | `boolean` | `content`と同じ | SKILL.mdのコア制約（セクション1-2）を最初の結果として先頭に追加 |

> 注:
> - デフォルトの取得では、`content`フィールドのない軽量な結果オブジェクトが返されます。
> - `content: true`はマークダウンコンテンツ本体を返します（フロントマターメタデータは除外されます）。
> - `includeInfo`がtrue（`content: true`の場合のデフォルト）の場合、コア制約ブロック — SKILL.mdの`<!-- CONSTRAINTS:END -->`まで — が最初の要素（IDに`__info__`のプレフィックスが付く）として挿入され、モデルが常に必須ルールを確認できるようにします。

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

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

```typescript
info(library?: string): SkillInfo | undefined

interface SkillInfo {
  name: string;
  description: string;
  content: string;            // SKILL.mdの本文全体（フロントマターの後）
  constraintsContent: string; // <!-- CONSTRAINTS:END -->マーカーまでのSKILL.md本文; includeInfo: trueのときにretrieveによって挿入される
}
```

| パラメータ | 型 | デフォルト | 説明 |
| :--- | :--- | :--- | :--- |
| `library` | `string` | `'g2'` | 情報を取得するライブラリ（`g2` または `g6`） |

## ライセンス

MITライセンス - 詳細は[LICENSE](LICENSE)ファイルを参照してください。

## FAQ

### AntV チャート可視化スキルとは何ですか？

AntV チャート可視化スキルは、AntV によって提供されるツールと機能のスイートで、ユーザーが効率的かつ正確にデータを可視化し分析できるように設計されています。これには、チャート生成、インフォグラフィック作成、ナラティブテキスト可視化、および専門的なグラフや統計チャートの開発のための機能が含まれます。

### チャート可視化スキルは何種類のチャートタイプをサポートしていますか？

チャート可視化スキルは、インテリジェントなデータ可視化のために26種類以上のチャートタイプを提供し、時系列、比較、関係、地理データなど、幅広いデータ表現をカバーしています。

### これらのスキルでインフォグラフィックを作成できますか？

はい、インフォグラフィック作成スキルを使用すると、与えられたテキストコンテンツに基づいて美しいインフォグラフィックを作成できます。AntV Infographic を使用し、50以上のテンプレートを提供して、データを知覚可能な視覚言語に変換します。

### ナラティブテキスト可視化（T8 シンタックス）とは何ですか？

ナラティブテキスト可視化（T8）は、宣言的な Markdown ライクな言語である T8 シンタックスを使用して、非構造化データを意味的に豊かなナラティブレポートに変換します。エンティティ注釈、ミニチャート、プロフェッショナルなフォーマットを使用したデータナラティブの作成に設計されており、分析レポートやインサイトドキュメントに適しています。

### AntV チャート可視化スキルは、多次元分析にどのように役立ちますか？

antv-s2-expert スキルは、S2 多次元クロス分析テーブルエンジンの開発アシスタントとして機能します。ピボットテーブル、テーブルシート、カスタムセル、および @antv/s2 のその他のさまざまな機能に関する包括的なガイダンスを提供します。

### 特定のグラフや統計チャートを生成するためのツールはありますか？

はい、antv-g6-graph スキルは、ネットワークグラフ、ツリーグラフ、フローチャートなどのグラフ可視化のための G6 v5 コードを生成します。antv-g2-chart スキルは、棒グラフ、折れ線グラフ、円グラフ、散布図などの統計チャートのための G2 v5 コードを、ベストプラクティスに従って生成します。