/ ディレクトリ / プレイグラウンド / AntV Chart
← 全サーバー ↗ GitHub
● 公式 antvis ⚡ 即起動

AntV Chart

作者 antvis · antvis/mcp-server-chart

Ant GroupのAntVを活用し、折れ線・棒・サンキー・ファネル・レーダー・ワードクラウドなど25種類以上のチャートを生成できます。プロットライブラリの設定は不要です。

@antv/mcp-server-chart は、簡潔なJSON仕様から高品質なSVG/PNGチャートをレンダリングします。折れ線、棒、エリア、円、散布図、レーダー、サンキー、ファネル、ツリー、ワードクラウド、箱ひげ図、ヒストグラムなど多数のチャートタイプに対応しています。出力はURLまたはbase64 PNGで、レポートへの埋め込みも簡単です。

▶ デモを見る 📦 インストール 💡 ユースケース

なぜ使うのか

主な機能

ライブデモ

実際の動作

antv-chart.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "antv-chart",
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "antv-chart": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@antv/mcp-server-chart"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add antv-chart -- npx -y @antv/mcp-server-chart

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： AntV Chart

Postgresのクエリ結果を1つのプロンプトでチャート化する

👤 CSVではなくビジュアルで確認したいアナリスト ⏱ ~5 min beginner

使うタイミング： クエリを実行した直後に「これを棒グラフで見せて」と思ったとき。

前提条件
  • 行形式のデータ（他のMCPの出力またはペースト） — 通常はpostgres/mongodb/duckdbクエリの出力
フロー
  1. 適切なチャートタイプを選ぶ
    Given this data [paste rows with category + value], which AntV chart fits best? Options: bar, column, pie, line.✓ コピーしました
    → 根拠付きの選択（例：「column — カテゴリ vs 値、カテゴリ数≤20」）
  2. レンダリングする
    Generate a column chart with x=category, y=value, title '<Title>'. Return the image URL.✓ コピーしました
    → URLまたはbase64画像
  3. スタイルを調整する
    Same chart but sort bars by value desc, add data labels, use a single color (teal).✓ コピーしました
    → 調整後のチャート画像

結果： プロットライブラリを触ることなく、30秒でレポート用チャート画像を作成できます。

注意点
  • カテゴリが多すぎると棒グラフが読みにくくなる — 上位15件＋「その他」に絞る。高カーディナリティのデータにはツリーマップやヒートマップを使用
組み合わせ： postgres · mongodb

イベントカウントからコンバージョンファネルを可視化する

👤 グロース / プロダクトアナリスト ⏱ ~15 min intermediate

使うタイミング： ステップごとのイベントカウント（signup → verify → first-action → paid）があり、ファネルチャートが必要なとき。

フロー
  1. ステップごとのカウントを取得する
    From Postgres: count distinct users at each funnel step in the last 30 days, in order.✓ コピーしました
    → ステップ＋カウントの行データ
  2. ファネルをレンダリングする
    Generate an AntV funnel chart with those steps. Show absolute count and step-to-step conversion %.✓ コピーしました
    → ラベル付きファネル画像
  3. セグメントを比較する
    Now generate 2 funnels side-by-side: mobile vs desktop. Same steps; annotate biggest drop-off differences.✓ コピーしました
    → 比較ビジュアライゼーション

結果： セグメント比較付きの、すぐに貼り付けられるファネルビジュアルが完成します。

注意点
  • ユニークでないイベントをカウントすると後半のステップが膨らむ — イベント行数ではなく、必ずステップごとにdistinct user_idでカウントする
組み合わせ： postgres

リレーションシップをサンキーまたはツリー図で生成する

👤 フローや階層構造を説明したいすべての人 ⏱ ~15 min intermediate

使うタイミング： 「流入元 → ランディング → コンバージョン」のトラフィックや組織図を可視化したいとき。

フロー
  1. データを整形する
    I have source → destination → value edges [paste]. Shape them for an AntV sankey.✓ コピーしました
    → 正規化されたエッジ配列
  2. サンキーをレンダリングする
    Generate the sankey with node labels and link weights. Use the '3-color' palette.✓ コピーしました
    → サンキー画像
  3. ツリーで代替表現する
    If hierarchical instead, render as a treemap or org tree — same data, different chart type.✓ コピーしました
    → 代替ビジュアライゼーション

結果： ストーリーに最適なリレーションシップビジュアライゼーションを一発で作成できます。

注意点
  • ノードが多すぎるとサンキーがスパゲッティ状になる — 小さいソースを「その他」に統合し、レイヤーあたり≤20ノードに抑える
組み合わせ： neo4j

組み合わせ

他のMCPと組み合わせて10倍の力を

antv-chart + postgres

1つのプロンプトでクエリからチャートまで — PMレポート向け

Query weekly signups for the last 12 weeks from Postgres, then generate an AntV line chart of the trend.✓ コピーしました
antv-chart + mongodb

ドキュメントデータの集計＋可視化

Aggregate orders by country this quarter from Mongo, render as a column chart sorted desc.✓ コピーしました
antv-chart + filesystem

生成した画像をレポートマークダウンと一緒に保存

Render the funnel chart, save the PNG to /reports/funnel-<date>.png, and embed in /reports/weekly.md.✓ コピーしました
antv-chart + notion

チャートをNotionのレポートページに埋め込む

Generate the three weekly KPI charts; create a Notion page with each chart URL embedded as an image block.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
generate_line_chart / generate_column_chart / generate_bar_chart data: row[], x, y, title?, style? 時系列 / カテゴリ比較 free
generate_pie_chart / generate_donut_chart data, value, category, title? カテゴリ≤6の構成比表示 free
generate_funnel_chart data: [{step, value}] コンバージョンフロー free
generate_sankey_chart nodes, links: [{source,target,value}] カテゴリ間のフロー free
generate_scatter_chart / generate_bubble_chart data, x, y, size?, color? 相関分析や分布の探索 free
generate_radar_chart data: {dimensions, series} ≤2エンティティの多次元比較 free
generate_word_cloud_chart data: [{word, weight}] テキスト頻度の可視化 free
generate_treemap_chart / generate_histogram_chart / generate_boxplot_chart data, fields 分布およびネストされたカテゴリ free

コストと制限

運用コスト

APIクォータ
認証不要。実質的なレートリミットはホスティングバックエンドに依存（通常のインタラクティブ利用であれば問題なし）
呼び出しあたりのトークン
仕様＋レスポンス: 300〜1500トークン
金額
無料 — npxによるローカル実行 / AntVの公開レンダリングサービスを利用
ヒント
チャートあたりのデータポイントは数百件以内に抑え、生イベントではなく集計済みデータを送信してください。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： 不要
データ送信先： 仕様に含めたデータは画像URL生成のためにAntVのレンダリングサービスに送信されます。個人情報や機密データは送信しないでください

トラブルシューティング

よくあるエラーと対処法

Invalid data format / missing field

各チャートタイプには固有のデータ形状が必要です。ツールのinputsを再確認してください — funnelは{step, value}、sankeyは{source, target, value}を期待します。

Returned URL 404 after a while

ホスティングされたURLには有効期限があります。永続化が必要な場合は、生成直後にfilesystemで画像をローカルに保存してください。

Chart unreadable — too many bars/nodes

上位N件＋「その他」に集計するか、カーディナリティに適したチャートタイプ（sankey/treemap）に切り替えてください。

代替案

AntV Chart 他との比較

代替案代わりに使う場面トレードオフ
QuickChartChart.jsスタイルのチャートをURL経由で生成したいときAntVと比べてニッチなチャートタイプが少ない
Mermaid MCPデータチャートではなくダイアグラム（フローチャート、シーケンス図）が必要なとき数値データの可視化には不向き
Vega-Lite MCPGrammar-of-Graphicsアプローチを使いたいとき仕様が複雑だが、柔軟性は高い

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る