Chart

公式

AntVを使用してビジュアルチャートを生成するためのModel Context Protocolサーバー。

GitHub
4.3k

Chart MCPで何ができますか？

  • 一般的な統計チャートを生成 — generate_line_chart などのツールを使用して、データから折れ線、棒、積み上げ棒、面、円、散布、レーダー、または二軸チャートを作成します。
  • 分布と割合を可視化 — ヒストグラム、箱ひげ図、バイオリンプロット、ツリーマップ、リキッドフィルゲージ、またはファネルチャートを生成し、データのばらつきや部分と全体の関係を探ります。
  • 図や構造化ビジュアルを作成 — フローチャート、マインドマップ、組織図、フィッシュボーン（石川）図、サンキーフロー、ネットワークグラフ、またはベン図を構築します。
  • 地理マップをレンダリング — generate_district_map、generate_pin_map、generate_path_map（中国地域のみ）を使用して、地区、ピン、またはパスマップにデータをプロットします。
  • 表形式データを表示 — generate_spreadsheet を使用して、構造化データをスプレッドシートまたはピボットテーブルに変換します。
  • ワードクラウドを生成 — generate_word_cloud_chart を使用して、テキストから単語の頻度を可視化します。

ドキュメント

MCPサーバー Chart

AntVを用いたチャート生成のためのモデルコンテキストプロトコルサーバーです。このMCPサーバーは_チャート生成_と_データ分析_に利用できます。

build npm Version npm License codecov smithery installations badge Visitors

mcp-server-chart technical digram

これは、チャート生成機能を提供するTypeScriptベースのMCPサーバーです。MCPツールを通じて様々な種類のチャートを作成できます。Difyでも使用可能です。

📋 目次

✨ 機能

現在、26以上のチャートがサポートされています。

mcp-server-chart preview
  1. generate_area_chart: areaチャートを生成します。連続的な独立変数の下でのデータの傾向を表示し、全体的なデータ傾向の観察を可能にします。
  2. generate_bar_chart: barチャートを生成します。異なるカテゴリ間の値を比較するために使用され、水平方向の比較に適しています。
  3. generate_boxplot_chart: boxplotを生成します。中央値、四分位数、外れ値を含むデータの分布を表示するために使用されます。
  4. generate_column_chart: columnチャートを生成します。異なるカテゴリ間の値を比較するために使用され、垂直方向の比較に適しています。
  5. generate_district_map - district-mapを生成します。行政区画とデータ分布を表示するために使用されます。
  6. generate_dual_axes_chart: dual-axesチャートを生成します。異なる単位または範囲を持つ2つの変数間の関係を表示するために使用されます。
  7. generate_fishbone_diagram: fishbone図（特性要因図とも呼ばれる）を生成します。問題の根本原因を特定して表示するために使用されます。
  8. generate_flow_diagram: flowchartを生成します。プロセスのステップと順序を表示するために使用されます。
  9. generate_funnel_chart: funnelチャートを生成します。異なる段階でのデータ損失を表示するために使用されます。
  10. generate_histogram_chart: histogramを生成します。データを区間に分割し、各区間のデータポイント数をカウントすることでデータの分布を表示するために使用されます。
  11. generate_line_chart: lineチャートを生成します。時間または別の連続変数にわたるデータの傾向を表示するために使用されます。
  12. generate_liquid_chart: liquidチャートを生成します。データの割合を表示するために使用され、水で満たされた球の形でパーセンテージを視覚的に表現します。
  13. generate_mind_map: mind-mapを生成します。思考プロセスと階層情報を表示するために使用されます。
  14. generate_network_graph: networkグラフを生成します。ノード間の関係と接続を表示するために使用されます。
  15. generate_organization_chart: organizationalチャートを生成します。組織の構造と人事関係を表示するために使用されます。
  16. generate_path_map - path-mapを生成します。POIのルート計画結果を表示するために使用されます。
  17. generate_pie_chart: pieチャートを生成します。データの割合を表示するために使用され、各部分のパーセンテージを示す扇形に分割されます。
  18. generate_pin_map - pin-mapを生成します。POIの分布を表示するために使用されます。
  19. generate_radar_chart: radarチャートを生成します。多次元データを包括的に表示するために使用され、レーダーのような形式で複数の次元を表示します。
  20. generate_sankey_chart: sankeyチャートを生成します。データフローと量を表示するために使用され、サンキー形式で異なるノード間のデータの移動を表現します。
  21. generate_scatter_chart: scatterプロットを生成します。2つの変数間の関係を表示するために使用され、データポイントを座標系上の散在するドットとして表示します。
  22. generate_treemap_chart: treemapを生成します。階層データを表示するために使用され、矩形のサイズがデータの値を表す矩形形式でデータを表示します。
  23. generate_venn_chart: venn図を生成します。積集合、和集合、差集合を含む集合間の関係を表示するために使用されます。
  24. generate_violin_chart: violinプロットを生成します。データの分布を表示するために使用され、箱ひげ図と密度プロットの特徴を組み合わせて、データ分布のより詳細なビューを提供します。
  25. generate_word_cloud_chart: word-cloudを生成します。テキストデータ内の単語の頻度を表示するために使用され、フォントサイズが各単語の頻度を示します。
  26. generate_spreadsheet: 表形式データを表示するためのspreadsheetまたはピボットテーブルを生成します。'rows'または'values'フィールドが提供された場合はピボットテーブル（クロス集計）としてレンダリングされ、それ以外の場合は通常のテーブルとしてレンダリングされます。

[!NOTE] 上記の地理的可視化チャート生成ツールはAMapサービスを使用しており、現在は中国国内の地図生成のみをサポートしています。

🤖 使用方法

Claude、VSCode、Cline、Cherry Studio、CursorなどのDesktop APPで使用するには、以下のMCPサーバー設定を追加します。Macシステムの場合：

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

Windowsシステムの場合：

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

また、HTTP、SSEプロトコルを使用してaliyun、modelscope、glama.ai、smithery.aiなどでも使用できます。

🎨 スキルの使用

スキルをサポートするAI IDE（Claude Codeなど）を使用している場合、chart-visualizationスキルを使用して最適なチャートタイプを自動的に選択し、可視化を生成できます。

以下を使用してhttps://github.com/antvis/chart-visualization-skillsからスキルを追加できます：

npx skills add antvis/chart-visualization-skills

次に、データを提供するか、希望する可視化を説明します。スキルは25以上のチャートタイプからインテリジェントに選択し、チャートを生成します。

🚰 SSEまたはStreamableトランスポートでの実行

直接実行

パッケージをグローバルにインストールします。

npm install -g @antv/mcp-server-chart

希望するトランスポートオプションでサーバーを実行します：

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

その後、以下の場所でサーバーにアクセスできます：

  • SSEトランスポート: http://localhost:1122/sse
  • Streamableトランスポート: http://localhost:1122/mcp

Dockerデプロイ

dockerディレクトリに入ります。

cd docker

docker-composeを使用してデプロイします。

docker compose up -d

その後、以下の場所でサーバーにアクセスできます：

  • SSEトランスポート: http://localhost:1123/sse
  • Streamableトランスポート: http://localhost:1122/mcp

🎮 CLIオプション

MCPサーバーの実行時に以下のCLIオプションも使用できます。-HでCLIを実行する際のコマンドオプション。

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ 環境変数

変数説明デフォルト例
VIS_REQUEST_SERVERプライベートデプロイ用のカスタムチャート生成サービスURLhttps://antv-studio.alipay.com/api/gpt-vishttps://your-server.com/api/chart
SERVICE_IDチャート生成記録用のサービス識別子-your-service-id-123
DISABLED_TOOLS無効にするツール名のカンマ区切りリスト-generate_fishbone_diagram,generate_mind_map

📠 プライベートデプロイ

MCP Server Chartはデフォルトで無料のチャート生成サービスを提供します。プライベートデプロイが必要なユーザーは、VIS_REQUEST_SERVERを使用して独自のチャート生成サービスをカスタマイズしてみることができます。

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

AntVのプロジェクトGPT-Vis-SSRを使用して、プライベート環境にHTTPサービスをデプロイし、env VIS_REQUEST_SERVERを通じてURLアドレスを渡すことができます。

  • メソッド: POST
  • パラメータ: GPT-Vis-SSRに渡されてレンダリングされます。例：{ "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }。
  • 戻り値: HTTPサービスの戻りオブジェクト。
    • success: boolean チャート画像の生成が成功したかどうか。
    • resultObj: string チャート画像のURL。
    • errorMessage: string success = falseの場合、エラーメッセージを返します。

[!NOTE] プライベートデプロイソリューションは現在、geographic-district-map、geographic-path-map、geographic-pin-mapの3つのツールを含む地理的可視化チャート生成をサポートしていません。

🗺️ 生成記録

デフォルトでは、ユーザーは結果を自分で保存する必要がありますが、チャート生成記録を表示するサービスも提供しており、ユーザーは自身のサービス識別子を生成して設定する必要があります。

Alipayでスキャンしてミニプログラムを開き、個人サービス識別子を生成します（下部の「My」メニューをクリックし、「My Services」ページに入り、「Generate」ボタンをクリックし、成功後に「Copy」ボタンをクリックします）：

my service identifier website

次に、MCPサーバー設定にSERVICE_ID環境変数を追加する必要があります。例えば、Macの設定は以下の通りです（Windowsシステムの場合は、env変数を追加するだけです）：

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

MCPサーバー設定を更新した後、AIクライアントアプリケーションを再起動し、MCPサーバーが正常に起動して接続されているかどうかを再度確認する必要があります。その後、再度マップを生成してみてください。生成が成功したら、ミニプログラムの「My Map」ページに移動して、マップ生成記録を表示できます。

my map records website

🎛️ ツールフィルタリング

DISABLED_TOOLS環境変数を使用して、特定のチャート生成ツールを無効にできます。これは、特定のツールがMCPクライアントと互換性の問題がある場合や、利用可能な機能を制限したい場合に便利です。

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

フィルタリングに使用可能なツール名 ✨ 機能を参照してください。

🔨 開発

依存関係をインストールします：

npm install

サーバーをビルドします：

npm run build

MCPサーバーを起動します：

npm run start

SSEトランスポートでMCPサーバーを起動します：

node build/index.js -t sse

StreamableトランスポートでMCPサーバーを起動します：

node build/index.js -t streamable

📄 ライセンス

MIT@AntV。