Chart

公式

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

GitHub
4.4k
このMCPを試すスポンサー

Chart MCPで何ができますか？

  • 一般的なチャートタイプの生成 — 棒グラフ、折れ線グラフ、円グラフ、散布図、エリアチャートを、generate_bar_chart や generate_line_chart などのツールでリクエストし、トレンドや比較を可視化します。
  • 専門的な可視化の作成 — generate_sankey_chart、generate_venn_chart、generate_word_cloud_chart などの高度なチャートをリクエストし、フロー、集合関係、テキスト頻度分析を行います。
  • 図やマップの構築 — generate_flow_diagram、generate_organization_chart、generate_district_map を使用して、プロセス、階層、地理データ（中国に焦点を当てたマップ）を図示します。
  • データ分布の分析 — generate_boxplot_chart、generate_histogram_chart、generate_violin_chart を生成し、統計的な広がり、外れ値、密度を調べます。
  • 表形式データの表示 — generate_spreadsheet を使用して、通常のテーブルやピボットテーブルをレンダリングし、クロス集計の要約を作成します。

ドキュメント

MCP Server Chart

AntVを使用してチャートを生成するためのModel Context Protocolサーバーです。このMCPサーバーは、_チャート生成_と_データ分析_に使用できます。

build npm Version npm License codecov Listed on Skillselion 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サービスを使用しており、現在は中国国内の地図生成のみをサポートしています。

🤖 使用方法

Desktop APP（Claude、VSCode、Cline、Cherry Studio、Cursorなど）で使用するには、以下の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] プライベートデプロイメントソリューションは現在、地理的可視化チャート生成をサポートしていません。対象外の3つのツール：geographic-district-map、geographic-path-map、geographic-pin-map。

🗺️ 生成レコード

デフォルトでは、ユーザーは自分で結果を保存する必要がありますが、チャート生成レコードを表示するためのサービスも提供しています。これには、ユーザーが自分でサービス識別子を生成して設定する必要があります。

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

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 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。