MCP Server Chart

MCP Server Chart

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

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

📋 目次

• ✨ 機能
• 🤖 使用方法
• 🎨 スキルの使用方法
• 🚰 SSEまたはStreamableトランスポートで実行
• 🎮 CLIオプション
• ⚙️ 環境変数
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 プライベートデプロイ
• 🗺️ レコードの生成
• 🎛️ ツールのフィルタリング
• 🔨 開発
• 📄 ライセンス

✨ 機能

現在、26種類以上のチャートに対応しています。

1. `generate_area_chart`：`area` チャートを生成します。連続した独立変数におけるデータの傾向を表示し、データ全体の傾向を把握できます。 1. `generate_bar_chart`：`bar` チャートを生成します。異なるカテゴリ間の値を比較するために使用し、横方向の比較に適しています。 1. `generate_boxplot_chart`：`boxplot` を生成します。中央値、四分位数、外れ値を含むデータの分布を表示します。 1. `generate_column_chart`：`column` チャートを生成します。異なるカテゴリ間の値を比較するために使用し、縦方向の比較に適しています。 1. `generate_district_map` - `district-map` を生成し、行政区画とデータの分布を表示します。 1. `generate_dual_axes_chart`：`dual-axes` チャートを生成します。単位または範囲が異なる2つの変数の関係を表示します。 1. `generate_fishbone_diagram`：`fishbone` 図（石川図とも呼ばれます）を生成し、問題の根本原因を特定して表示します。 1. `generate_flow_diagram`：`flowchart` を生成し、プロセスの手順と順序を表示します。 1. `generate_funnel_chart`：`funnel` チャートを生成し、各段階でのデータの減少を表示します。 1. `generate_histogram_chart`：`histogram` を生成します。データを区間に分割し、各区間のデータポイント数を数えることで、データの分布を表示します。 1. `generate_line_chart`：`line` チャートを生成し、時間または別の連続変数に応じたデータの傾向を表示します。 1. `generate_liquid_chart`：`liquid` チャートを生成し、水で満たされた球体の形で割合を視覚的に表現して、データの比率を表示します。 1. `generate_mind_map`：`mind-map` を生成し、思考プロセスと階層情報を表示します。 1. `generate_network_graph`：`network` グラフを生成し、ノード間の関係とつながりを表示します。 1. `generate_organization_chart`：`organizational` チャートを生成し、組織の構造と人員の関係を表示します。 1. `generate_path_map` - `path-map` を生成し、POI のルート計画の結果を表示します。 1. `generate_pie_chart`：`pie` チャートを生成します。データを扇形で表される部分に分け、各部分の割合を示して、データの比率を表示します。 1. `generate_pin_map` - `pin-map` を生成し、POI の分布を表示します。 1. `generate_radar_chart`：`radar` チャートを生成し、複数の次元をレーダー状に表示して、多次元データを包括的に示します。 1. `generate_sankey_chart`：`sankey` チャートを生成します。サンキー図形式で異なるノード間のデータの移動を表し、データの流れと量を表示します。 1. `generate_scatter_chart`：`scatter` プロットを生成します。座標系上にデータポイントを散布点として表示し、2つの変数の関係を示します。 1. `generate_treemap_chart`：`treemap` を生成します。データを長方形で表示し、そのサイズでデータの値を表して、階層データを表示します。 1. `generate_venn_chart`：`venn` 図を生成し、共通部分、和集合、差集合を含む集合間の関係を表示します。 1. `generate_violin_chart`：`violin` プロットを生成します。箱ひげ図と密度プロットの特徴を組み合わせ、データの分布をより詳細に表示します。 1. `generate_word_cloud_chart`：`word-cloud` を生成し、テキストデータ内の単語の出現頻度を表示します。フォントサイズで各単語の頻度を示します。 1. `generate_spreadsheet`：表形式データを表示するための`spreadsheet`またはピボットテーブルを生成します。`rows`または`values`フィールドが指定されている場合はピボットテーブル（クロス集計）として、それ以外の場合は通常のテーブルとして表示します。 > [!NOTE] > 上記の地理情報ビジュアライゼーションチャート生成ツールは[AMap サービス](https://lbs.amap.com/)を使用しており、現在は中国国内の地図生成のみをサポートしています。

🤖 使い方

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などでも使用できます。

🎨 スキルの使い方

Claude Codeなど、スキルに対応した AI IDE を使用している場合は、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	プライベートデプロイ用のチャート生成サービス URL	https://antv-studio.alipay.com/api/gpt-vis	https://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 サービスをデプロイし、その URL アドレスを環境変数 VIS_REQUEST_SERVER に渡すことができます。

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

メモ

現在、プライベートデプロイソリューションでは、次の 3 つのツールを含む地理情報の可視化チャートの生成はサポートされていません：geographic-district-map、geographic-path-map、geographic-pin-map。

🗺️ 生成記録

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

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

次に、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」ページでマップの生成記録を確認できます。

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

環境変数 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。