手書き風の図を AI に描いてもらうのに、オープンソースの Excalidraw MCP Server & Agent Skill が便利でした。

どんなことができるのか

たとえば、以下のようなプロンプトを投げるだけで図を描いてくれます。

claude code, codex, gemini cli の比較を作成

AI がプロンプトの内容を解釈して Excalidraw のキャンバス上に手書き風の図を生成してくれます。生成された図は localhost でリアルタイムに確認でき、人間がブラウザ上で手動編集することもできます。AI にざっくり描いてもらって、細かい調整は人間が行うという協調作業がスムーズにできるのが魅力です。

セットアップ

1. ビルド

npm ci
npm run build

2. Canvas サーバーの起動

HOST=0.0.0.0 PORT=3010 npm run canvas

デフォルトのポートは 3000 ですが、他のアプリケーション（Next.js など）と衝突しやすいので 3010 に変更して使っています。

3. MCP サーバーの起動

別のターミナルで MCP サーバーを起動します。

EXPRESS_SERVER_URL=http://localhost:3010 node dist/index.js

4. Claude Code への MCP サーバー登録

claude mcp add excalidraw --scope user \
  -e EXPRESS_SERVER_URL=http://localhost:3010 \
  -e ENABLE_CANVAS_SYNC=true \
  -- node /absolute/path/to/mcp_excalidraw/dist/index.js

/absolute/path/to/mcp_excalidraw/ は実際のパスに置き換えてください。ENABLE_CANVAS_SYNC=true により、AI が描いた図がリアルタイムでブラウザのキャンバスに反映されます。

登録が完了したら http://localhost:3010 をブラウザで開き、Claude Code にプロンプトを投げるだけです。

ポート 3000 の衝突に注意

デフォルトの 3000 番ポートは、Next.js や Rails など多くのフレームワークが開発サーバーのデフォルトポートとして使用しています。Excalidraw の Canvas サーバーを常駐させておく場合は、3010 など別のポートに変更しておくと衝突を避けられます。

ポートを変更した場合は、Canvas サーバーと MCP サーバーの両方で同じポート番号を指定する必要がある点に注意してください。

まとめ

Excalidraw MCP Server & Agent Skill を使うと、プロンプトひとつで手書き風の図を AI に描いてもらい、その場でブラウザから手動編集もできます。AI に大枠を描かせて人間が仕上げるというワークフローは、ドキュメント作成やアーキテクチャ設計の場面で重宝しそうです。

以上、手書き風の図を AI に描いてもらう Excalidraw MCP Server & Agent Skill を紹介した、現場からお送りしました。

参考情報

• yctimlin/mcp_excalidraw
• excalidraw/excalidraw