使い方ガイドへスキップ
chart-visualization作者 AntV

Chart Visualization スキル。

Claude Code と Codex 向けの図表・チャート用スキル。AntV API を通じて、棒グラフ、折れ線グラフ、円グラフ、レーダーチャート、サンキーダイアグラム、マインドマップ、フローチャートをレンダリングします。

  • Diagrams & Data Visualization
  • Chart image
antvis/chart-visualization-skills · skills/chart-visualization/SKILL.mdSKILL.md
--- name: chart-visualization description: 将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能,通过 curl 工具调用 AntV API 生成图表图片 --- ## 步骤 ## 图表选择指南 ## API 接口 ## 支持的图表类型 ## 通用可选参数 ## 各图表 data 格式
アップストリームファイルから 2026-09-14 に読み込まれた Front matter とセクション見出し · 全文 3,736 文字

01 できること

Claude CodeとCodexにおいてchart-visualizationスキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

このスキルは、AntVのチャート生成APIを呼び出すことで、ユーザーのデータをチャートに変換します。データとユーザーのリクエストを分析し、幅広いカタログ(棒グラフ、線グラフ、円グラフ、レーダーチャート、サンキー図、マインドマップ、フロー図など)から最も適したチャートタイプを選択し、必要なtypeとsourceフィールドを含むJSONリクエストボディを構築し、curlでAPIを呼び出し、返された画像URLをMarkdown画像として出力します。

サポートされている約20種類のチャートタイプそれぞれについて、theme、width、height、titleといった共有のオプションパラメータとともにデータ形式の仕様を文書化しており、エージェントが形式を推測するのではなく、有効なリクエストを構築するための具体的な参考資料を提供します。

生成されるもの

  • successフラグとresultObj画像URLを含むJSON APIレスポンスです
プロンプト例を見る ↗

仕組み

  1. 01
    チャートタイプの選択

    ユーザーのデータと要件を分析し、最適なチャートタイプを選択します。

  2. 02
    リクエストボディを構築する

    APIの仕様に従ったJSONリクエストボディを構築します。

  3. 03
    APIを呼び出す

    curlツールを使用してAPIを呼び出し、チャート画像を生成します。

  4. 04
    画像を出力する

    返された画像URLをMarkdownの画像形式で出力します。

02 適合性を確認

chart-visualization スキルを使用するタイミング

この種の図表やチャート作業の場合は、Claude Code または Codex で chart-visualization スキルを使用してください。適合性と制限については、スキル自体のファイルから取得されています。

適している場合

  • ラインチャートで時系列トレンドを可視化する、またはエリアチャートで累積トレンドを可視化する
  • バーチャートでカテゴリを水平方向に比較する、またはカラムチャートで垂直方向に比較する
  • パイチャートで構成比を示す、またはツリーマップで階層的な割合を示す
  • サンキーダイアグラムでカテゴリ間のフローをマッピングする、または散布図で相関を示す
  • 組織図やマインドマップで階層構造やツリー構造を表現する

境界を知る

  • AntV API が必要SKILL.md にこの依存関係が記載されています。プロジェクトにこれがないとスキルは動作しません。

提供すべきもの

  • チャート固有のデータ配列各チャートタイプには特定のデータ形式が必要です。例えば、bar/columnには{category, value, group?}の配列が必要で、sankeyには{source, target, value}の配列が必要です。
  • オプションの表示パラメータtheme、width、height、title、style.texture、および軸チャートの場合はaxisXTitle/axisYTitleを指定して、出力をカスタマイズできます。

03 スキルの内部

chart-visualization SkillがClaude CodeとCodexに与えるルール

SKILL.mdがエージェントに設定する7つの具体的な指示、デフォルト、制限 — ファイルの中で結果を変える部分です。

  1. 必須フィールド

    すべてのリクエストボディには、typeフィールドと"chart-visualization-skills"に設定されたsourceフィールドを含める必要があります。

  2. 固定エンドポイント

    チャートは単一の固定APIエンドポイントへのPOSTによって生成されます。

  3. デフォルトのキャンバスサイズ

    チャートのwidthはデフォルトで600、heightはデフォルトで400ですが、上書きできます。

  4. テーマオプション

    テーマはデフォルトで"default"ですが、"academy"または"dark"に設定できます。

  5. テクスチャスタイル

    style.texture のデフォルトは「default」ですが、手描き風にする場合は「rough」に設定できます。

  6. 積み上げのデフォルト設定

    バーチャートは stack: true がデフォルトで、カラムチャートは group: true がデフォルトです。

  7. 出力形式

    API レスポンスの resultObj の URL は、そのパターンを使って Markdown 画像としてレンダリングする必要があります。

04 実際に使う

Claude Code または Codex に chart-visualization をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、または任意のエージェントに chart-visualization を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

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

skills/chart-visualization/SKILL.md 用の汎用的な skills CLI 形式です。リポジトリによっては独自のパスが記載されている場合があります。

スキルに最初の図表とチャートのタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

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.md 自体が正しい結果として示しているもの:

  • 選択したチャートタイプを、データの特性(時系列、比較、割合、関係性、階層)に応じた選択ガイドと照合してください

OpenDesign では、SKILL.md のリンクから chart-visualization をインポートします:Plugins → Add → Skill → Import from link。その後、上部バーで選択してください。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
AntV
Repository
github.com/antvis/chart-visualization-skills ブランチ master
スキルファイル
skills/chart-visualization/SKILL.md 検証時にコンテンツチェックサムを記録。コミット 089b687
License
MIT LICENSE より。
リポジトリスター数
489 antvis/chart-visualization-skills リポジトリ全体の GitHub スナップショットを 2026-09-14 に取得。このリポジトリにはカタログ内に 2 つのスキルが含まれています。chart-visualization の評価や利用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。

SKILL.md の中身

  1. 手順4つのステップ:データの分析、JSONボディの構築、curlによるAPI呼び出し、Markdown画像の出力
  2. チャート選択ガイドデータの特性(時系列、比較、割合、関係性、階層)をチャートタイプに対応付けます
  3. API インターフェースPOSTエンドポイント、必須フィールド、curlのリクエスト/レスポンス例について説明します
  4. 対応チャートタイプサポートされているすべてのチャートタイプをカテゴリ別に一覧化した表
  5. 共通の任意パラメータ共通の任意パラメータ(theme、width、height、title、texture)とそのデフォルト値
  6. 各チャートの data 形式各チャートタイプごとに必要な、正確なデータ形状と任意フィールド
スキル自身による説明
「データをチャートとして可視化します。ユーザーが棒グラフ、折れ線グラフ、円グラフ、散布図、レーダーチャート、サンキー図、マインドマップ、フローチャートなどのチャート生成を必要とする場合にこのスキルを呼び出し、curl ツールで AntV API を呼び出してチャート画像を生成します」

SKILL.md からの Front-matter の説明です。ファイル全体は約 3,736 文字です。完全なファイルを GitHub で読む。

06 インストールする前に

chart-visualization スキルについてのよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

このスキルはどのようなチャートタイプを生成できますか

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はresultObjのURLを含むJSONオブジェクトを返し、スキルはそれをMarkdown画像リンクとして出力します。

Chart Visualization

実際の図表とチャートのタスクで chart-visualization を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから chart-visualization をインポートし、上記のプロンプトを貼り付けて、結果の前に計画を確認してください。

ターミナル
npx skills add https://github.com/antvis/chart-visualization-skills --skill chart-visualization

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応