Claude Codeで MCP【Excalidraw】を導入する方法

想定読者

• Excalidraw MCPを導入してCoding Agentで使いたい人
• Excalidraw MCPをClaude Codeに登録しようとしてコケた人

前提環境：

• Mac OS
• VSCode
• Node.js v24.4.0
• npm@11.4.2
• Claude Code v2.1.31 (Opus4.5)
• as of: 2026/2/7

Git Repository：

Excalidraw MCP の概要１

ExcalidrawのMCPを使用し、Claude Code上から自然言語で指示を出すことで、アイディアの図式化や、従来Markdown上のMermaid形式でしか実現できなかったフローチャートの可視化をより、楽にフレキシブルに実現できます。

導入の流れ

大まかな手順としては、

1. Excalidraw MCPをGithubのリポジトリからローカル環境にCloneし、Build
2. Claude Codeで MCPを登録

という流れであり、この記事で説明します。

Excalidrawは、Web版でインターネット上にも公開されており、マウス操作でも描画できますが、今回はローカルのExcalidrawへ、MCP越しにClaude Codeから、描画する手法の解説にフォーカスします。

Canvasというのは、その名の通りでExcalidraw上で、自由に絵を描画できるキャンバスですが、このMCPの醍醐味は、Claude CodeなどのCoding Agentに指示をして、開発の与件やアイディアをCanvas上に描画させることができる点です。

Agent-browserを使うことで、直接Web版のExcalidrawを触る試みもX上ではなされていますが、ここではピュアに、LocalでExcalidrawをHostして、MCP越しにCCから触るということをします。

[注記]ローカルでホストしたExcalidraw に対して、Agentにアイディアを描画させ、これをAgent-browser（Skill）でアクセスさせて実装に落とすという手法も考案しましたが、次の記事で紹介します。

導入手順１

GithubからCloneしてきます。

置き場所はどこでもいいですが、私は自分のPJディレクトリの中に直接配置してます。MCP登録をプロジェクト単位でしているため、この方がPathを通しやすいからです。

英語が苦手な方は、Cloneから実行まで以下のコマンドを、Terminalから開発中のRepositoryの中で一行ずつ実行してください。

git clone https://github.com/yctimlin/mcp_excalidraw mcp_excalidraw
cd mcp_excalidraw
npm install
npm run build

Globalで使いたい方は、PJ Repositoryの外側にCloneし、MCPの登録もグローバルの方~/.claudeに書き込むのがいいです。

なお、npm run buildした後はmcp_excalidrawフォルダの内部で以下のコマンドが通れば、準備完了です。

ls -l dist/index.js

導入手順２

さて、mcp_excalidraw内部でBuildが完了したら、
cd ..をしてPJディレクトリに戻ります。

普段ここをWorking Directoryとしているはずなので、Terminalから次のコマンドを打ちます。が、下記は テンプレートなので、PORT番号や絶対パスは環境に合わせて修正 をしてから実行してください。Back-slashで行送りしているので修正後に丸っと貼り付けます。

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

私は普段の開発で npm run devした時に、PORTが競合しないように、3201で設定しています。

/ZETTAI/path/to/PJ は今いる、PJディレクトリへの絶対パスです。Gitのコードをベタガキすると、/absolute/path/toと丁寧に書かれているせいでコケます。

これで完了です。

なお、--scope projectとすれば、Userオンリーではなく、プロジェクトの他のユーザーでも共有できるように、.mcp.jsonが生成されます。

また、ERRORなどで、設定をやり直したい場合は下記のコマンドでTerminalから、今登録しているMCPのリストの確認や削除をすることができます。

claude mcp list              # List configured servers
claude mcp remove excalidraw # Remove a server

実際の使用方法

導入が完了したら実際に、CanvasとServer（バックエンド）の二つのサーバーを立ち上げます。須くTerminalが二つ必要ですので、Tmuxを使うなどするのが良いです。両方、mcp_excalidraw/の内部で実行する必要があります。

Terminal 1: Canvas server

npm run canvas

Terminal 2: MCP server

npm start

使ってみた

Promptは下記の通り。

このCode Baseを解析し、Pdf Import部の使用を解析し、
その現状仕様とXXXの観点での改善案を検討してください。
その内容を、mcp_excalidraw を使って図式化してください。

出力結果

　以上です。