excalidraw/excalidraw-mcp View GitHub Homepage for Latest Official Releases

AIクライアントが、スムーズなビューポートカメラ制御とフルスクリーン編集を備えたインタラクティブな手描きExcalidraw図をチャット内で直接生成およびレンダリングできるようにする、高速でストリーミング可能なMCPサーバー。

TypeScriptexcalidraw-mcpexcalidraw 2.7k Last Updated: February 20, 2026

Excalidraw MCP App Server

高速でストリーミング可能な Excalidraw MCP アプリ — AI チャットクライアント内で直接、美しい手書き風の図を生成します。

📌 概要

Excalidraw MCP は、Excalidraw チームによって構築されたオープンソースの Model Context Protocol (MCP) サーバーです。AI クライアント（Claude、ChatGPT、VS Code、Goose など）が、Excalidraw を利用したインタラクティブな手書き風の図を生成・レンダリングできるようにすることで、AI 言語モデルとビジュアル図作成の間のギャップを埋めます。これらすべては、チャットインターフェース内で完結します。

この MCP サーバーは、図のテキスト説明を返すだけでなく、スムーズなビューポートカメラ制御とフルスクリーン編集モードを備えたインタラクティブな HTML キャンバスをクライアントにストリーミングします。

✨ 主な機能

  • ストリーミング可能な図: 静的な画像ではなく、チャットウィンドウに直接レンダリングされるライブでインタラクティブな HTML として図を返します。
  • 手書き風の美しさ: 生成されるすべての図に、Excalidraw 特有のスケッチ調の手書き風ビジュアルスタイルを活用します。
  • スムーズなカメラ制御: ビューポートのパンとズームをサポートし、ユーザーが大きな図を快適に探索できるようにします。
  • フルスクリーン編集: 生成された図をフルスクリーンエディターで開き、AI 生成後に手動で調整できます。
  • MCP Apps 標準: 公式の MCP Apps 拡張機能に基づいて構築されており、サーバーがプレーンテキストではなくリッチなインタラクティブ UI コンポーネントを返すことを可能にします。
  • マルチクライアント対応: Claude、ChatGPT、VS Code Copilot、Goose など、MCP 互換のクライアントであればどれでも動作します。
  • 簡単なデプロイ: 環境変数を必要とせず、Vercel へのワンクリックデプロイが可能です。

🏗️ アーキテクチャ

ユーザープロンプト (例: "アーキテクチャ図を描いてください")
        │
        ▼
  AI クライアント (Claude / ChatGPT / VS Code)
        │  MCP プロトコル
        ▼
  Excalidraw MCP サーバー (Node.js / TypeScript)
        │  インタラクティブな HTML をストリーミング
        ▼
  Excalidraw キャンバス (チャット UI でレンダリング)
        │
        ▼
  ユーザーが図をライブで表示・編集

サーバーは TypeScript で記述されており、Vercel (サーバーレス) を介して提供され、フロントエンドのバンドルには Vite を使用しています。MCP Apps プロトコルに従い、完全な Excalidraw キャンバスをインタラクティブなアーティファクト応答として埋め込みます。

🚀 開始方法

オプション 1: リモート (推奨)

インストールは不要です。クライアントで以下の URL をリモート MCP サーバーとして追加してください。

https://excalidraw-mcp-app.vercel.app/mcp

Claude.ai の例: 設定 → コネクタ → カスタムコネクタを追加 → URL を貼り付けます。

オプション 2: 拡張機能ファイル経由でのローカル実行

  1. リリースページから excalidraw-mcp-app.mcpb をダウンロードします。
  2. ダブルクリックして Claude Desktop にインストールします。

オプション 3: ソースからビルド

git clone https://github.com/excalidraw/excalidraw-mcp.git
cd excalidraw-mcp
npm install && npm run build

その後、Claude Desktop の設定ファイル ~/Library/Application Support/Claude/claude_desktop_config.json に以下を追加します。

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["/path/to/excalidraw-mcp/dist/index.js", "--stdio"]
    }
  }
}

Claude Desktop を再起動すれば準備完了です。

💬 プロンプト例

接続後、以下のような自然言語プロンプトを使用できます。

  • "Excalidraw を使ってかわいい猫を描いてください"
  • "ユーザーが API サーバーに接続し、そのサーバーがデータベースと通信する様子を示すアーキテクチャ図を描いてください"
  • "CI/CD パイプラインのフローチャートを作成してください"
  • "3つのサーバーとロードバランサーを持つネットワークトポロジをスケッチしてください"

AI は MCP サーバーを呼び出し、サーバーは図を生成してチャット内のインタラクティブなキャンバスとしてストリーミングバックします。

🛠️ テックスタック

レイヤー テクノロジー
言語 TypeScript (90.1%)、JavaScript (4.7%)
フロントエンド Excalidraw、Vite、CSS
バックエンド Node.js (Express スタイルのサーバーレス)
デプロイ Vercel
プロトコル Model Context Protocol (MCP) + MCP Apps 拡張機能

🌐 セルフホスティング / デプロイ

独自のインスタンスを数分で Vercel にデプロイできます。

  1. リポジトリをフォークします。
  2. vercel.com/new にアクセスし、フォークしたリポジトリをインポートします。
  3. 環境変数は不要です — デプロイをクリックするだけです。
  4. サーバーは https://your-project.vercel.app/mcp で利用可能になります。

🤝 貢献

PR を歓迎します！このプロジェクトは、Excalidraw チームとコミュニティの貢献者によって積極的にメンテナンスされています。貢献するには：

  1. リポジトリをフォークし、ローカルにクローンします。
  2. npm install && npm run build を実行して開発環境をセットアップします。
  3. 変更を加えてプルリクエストを送信してください。

🔗 関連リソース

🏷️ 要約

MCP — これは Model Context Protocol 上に構築された MCP サーバーであり、AI クライアントがチャットインターフェース内で直接 Excalidraw の手書き風図を生成・インタラクティブに編集できるようにします。

Star History Chart