Excalidraw MCP Server (yctimlin)
Excalidraw MCPサーバー(yctimlin版)でClaude連携・図解キャンバスのAI操作を自動化
node /absolute/path/to/mcp_excalidraw/dist/index.js概要
Excalidraw MCP Server (yctimlin)の設定方法と使い方。
手描き風ホワイトボード「Excalidraw」のキャンバスをClaudeから生成・編集・エクスポートできるMCPサーバー。
26種類のMCPツールでノード追加、要素の選択・移動、属性変更、エクスポートなどを公開し、リアルタイムキャンバス同期にも対応する。
ClaudeとExcalidrawのMCPサーバー連携により、設計図・フロー図・アーキテクチャ図の作図作業を自動化できる。
設定方法はリポジトリのdist/index.jsを指定して claude mcp add するか、Dockerイメージで起動するだけでシンプルに完結する。
料金・APIキー情報
料金
完全無料APIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります(上記参照)。
こんな使い方ができます
Claudeに指示してアーキテクチャ図やフローチャートをExcalidraw上に自動生成できる
既存のExcalidrawファイルをClaudeに読ませて改善案や注釈を書き加えられる
テキスト要件から構成図のドラフトを瞬時に出力させられる
Claude DesktopやCursorからWebキャンバスにリアルタイム反映させて作図できる
セットアップ手順
- 1
リポジトリをcloneし、依存をインストール&ビルドして dist/index.js を作る(npm install && npm run build)
- 2
Express サーバー(Excalidrawキャンバス側)をローカル起動して http://127.0.0.1:3000 で待ち受けさせる
- 3
Claude Codeに追加:claude mcp add excalidraw --scope user -e EXPRESS_SERVER_URL=http://127.0.0.1:3000 -- node /absolute/path/to/mcp_excalidraw/dist/index.js
設定ファイル
コピー前に確認
Node.js環境(ローカル実行)または Docker(ghcr.ioイメージ)。Excalidrawキャンバスを表示するExpressサーバーが別途必要。MCPサーバーは npm 上で mcp-excalidraw-server として公開されている。APIキーは不要。
claude mcp add excalidraw -e EXPRESS_SERVER_URL=http://127.0.0.1:3000 -- node /absolute/path/to/mcp_excalidraw/dist/index.js注意事項
リポジトリ yctimlin/mcp_excalidraw が本体。MITライセンス。Claude Desktop / Cursor / Codex CLI / OpenCode / Antigravity など複数のクライアントに対応。既存の excalidraw-mcp-server.mdx(github_url 空欄)とは別ファイルとして掲載。