Whiteboard MCP

Whiteboard MCP は、オフラインでもローカルで動作する、無料のオープンソース Excalidraw ホワイトボード MCP サーバーです。コーディングエージェントはチャットの隣にあるライブボードに図を描き、あなたが描いた内容も確認できます。Claude Code、Codex、Cursor、Gemini CLI、VS Code、Windsurf、Devin、その他あらゆる MCP クライアントで動作します。

claude mcp add whiteboard --scope user -- npx -y @ansuman-shukla/whiteboard-mcp

_{Node.js 20+ が必要です。Codex、Cursor、Gemini CLI、VS Code、または他のエージェントをお使いですか？ 各エージェント用のコマンドはこちら ↓}

_{エージェントとドッツ・アンド・ボックスをプレイ：あなたが線を引くと、エージェントは手を確認して打ち返します。}

特長

できること

アーキテクチャを理解する

「一般的なチェックアウトバックエンドの仕組みを、ホワイトボードに描いてください。」 エージェントは少しずつ図を描き、説明している箇所を強調表示します。ボックスを動かしたり、わからない箇所を丸で囲んだり、メモを残したりできます。エージェントは変更点を正確に読み取り、ボード上で回答します。

フローを説明する

「このアプリのログインの仕組みは？」 矢印は要素を動かしてもつながったままで、エージェントは次にボードを確認したときにメモへ回答します。

何かを作る

「モナ・リザを描いてから、鉛筆で仕上げてください。」 図形、フリーハンドの線、フレームをすべて編集できます。

ほかにも試してみましょう

• 「このリポジトリでリクエストがどう流れるか、ホワイトボードで説明してください。」
• 「TCPハンドシェイクの仕組みを、段階を追って教えてください。」
• 「デプロイパイプラインを描いて、単一障害点に印を付けてください。」
• 「オプションAとオプションBを、ボード上で並べて比較してください。」
• 「ボードに丸で囲んだところがあります。見てください。」

クイックスタート

エージェントに追加する

Node.js 20+ が必要です。追加したら、新しいチャットを開始してください。

# Claude Code
claude mcp add whiteboard --scope user -- npx -y @ansuman-shukla/whiteboard-mcp

# Codex CLI
codex mcp add whiteboard -- npx -y @ansuman-shukla/whiteboard-mcp

# Gemini CLI
gemini mcp add --scope user whiteboard npx -y @ansuman-shukla/whiteboard-mcp

# Devin CLI
devin mcp add whiteboard --scope user -- npx -y @ansuman-shukla/whiteboard-mcp

# VS Code
code --add-mcp '{"name":"whiteboard","command":"npx","args":["-y","@ansuman-shukla/whiteboard-mcp"]}'

Cursor、Claude Desktop、Windsurf、その他のJSON設定（~/.cursor/mcp.json、Claude Desktopの設定など）：

{ "mcpServers": { "whiteboard": { "command": "npx", "args": ["-y", "@ansuman-shukla/whiteboard-mcp"] } } }

OpenCode（opencode.json）：

{ "mcp": { "whiteboard": { "type": "local", "command": ["npx", "-y", "@ansuman-shukla/whiteboard-mcp"] } } }

MCPに対応していないエージェント、プロジェクト単位の設定などについては、クライアントの設定をご覧ください。チャットの隣のタブにボードを表示するには、IDEパネルをインストールしてください。同梱のスキルは、描画が役立つ場面をエージェントに教えます。

Whiteboard MCP と Excalidraw MCP の比較

_{Claude やウェブ版 ChatGPT で手早く一度きりの図を作りたい場合は、Excalidraw MCP が最適です。比較の詳細 →}

FAQ

ローカルで動作し、オフラインでも使える Excalidraw MCP サーバーはありますか？

はい、Whiteboard MCP がそれに当たります。127.0.0.1 で小さなデーモンを実行し、フォントを同梱した Excalidraw ビューアーを配信します。最初に npx でダウンロードすれば、インターネットもアカウントも API キーも必要ありません。ボードは ~/.whiteboard-mcp にプレーンな JSON ファイルとして保存されます。

Claude Code、Codex、Cursor で図を描くにはどうすればよいですか？

上記にあるエージェント用の1行コマンドで MCP サーバーを追加し、新しいチャットを開始して、*「このリポジトリがリクエストを処理する仕組みをホワイトボードに描いてください。」*と頼んでください。エージェントがチャットの横にあるライブ Excalidraw ボードに、手順を追って描画します。

エージェントはホワイトボードに自分で描いた内容を確認できますか？

はい。エージェントがボードを見るたびに、追加、移動、削除した項目の短いリストと、残したメモを確認できます。また、ボードの PNG スクリーンショットを撮って、自分でレイアウトを確認することもできます。

どのエージェントやエディターで使えますか？

あらゆる MCP クライアントで使えます。Claude Code、Claude Desktop、OpenAI Codex、Cursor、Gemini CLI、VS Code（Copilot エージェントモード）、Windsurf、Devin、OpenCode などに対応しています。MCP に対応していないエージェントでは、プレーンな whiteboard-mcp call CLI を使用できます。IDE パネルを使うと、VS Code、Cursor、Windsurf、Devin Desktop ではチャットの横のタブにボードが表示されます。それ以外の環境では、ブラウザーで開きます。

Mermaid を Excalidraw の図に変換したり、エクスポートしたりできますか？

はい。canvas_mermaid は Mermaid（フローチャート、シーケンス図など）を編集可能な手描き風の要素に変換し、canvas_export はボードをプロジェクト内の .excalidraw または .png として保存します。

ボードは保存されますか？後で再び開けますか？

チャットごとに専用のボードが作成され、ディスクに保存されます。後のチャットでは、別のフォルダーからでも、名前を指定して再び開いたり、ボード上のテキストから見つけたりできます。また、保存用ライブラリに固定したコピーを残すこともできます。ボードをご覧ください。

無料で、プライバシーも守られますか？

はい。MIT ライセンスで提供されており、ライセンスキーも有料プランもありません。すべてのデータはお使いのマシン内に保持されます。デーモンは 127.0.0.1 でのみ待ち受け、API 呼び出しにはすべてユーザーごとのトークンが必要です。セキュリティをご覧ください。

クライアントの設定 · ボード · IDE パネル · ツールと仕組み · 設定 · セキュリティ · コントリビューション
MIT ライセンス · Excalidraw を基盤に構築