Excalidraw MCPを使ってClaude Codeにキュートな構成図を書かせる
はじめに
皆様こんにちは、あかいけです。
以前、以下の記事でExcalidrawというツールをご紹介しました。
それからというものExcalidrawの手書き風のゆるい雰囲気が気に入って、
ブログの構成図やLTの資料などでちょこちょこExcalidrawで描くことがありました。
しかし時代は変わるものです。
最近MCPサーバーの活用が広がる中で、Excalidraw MCPなるものを発見してしまいました。
これを使えばClaude Codeに指示するだけで、あのキュートな構成図を生成できてしまうのです。
そんなわけで今回は、
Excalidraw MCPを使ってClaude Codeにキュートな構成図を書かせてみます。
Excalidraw MCPとは
Excalidraw MCPは、MCP(Model Context Protocol)を通じてAIがExcalidrawを直接操作できるようにする機能です。
Claude Codeなどから「こういう構成図を描いて」と指示するだけで、Excalidrawのキュートな手書き風の図を自動生成してくれます。
現在いくつかの実装が公開されていますが、代表的なものを紹介します。
公式: excalidraw/excalidraw-mcp
Excalidraw公式チームが提供するMCPサーバーです。
Web版やデスクトップ版のClaudeからも手軽に使えるのが魅力ですが、現状ではClaude Codeで利用できないです。
コミュニティ版: yctimlin/mcp_excalidraw
コミュニティで開発されているMCPサーバーで、複数のツールを備えています。
最大の強みはClaude Codeで利用できることと、その結果として反復的な調整がやりやすい点でしょう。
セットアップ
方法1: 公式版 - Claudeのカスタムコネクタを使う
一番手軽なのは、claude(Web版やデスクトップ版)のカスタムコネクタ機能を使う方法です。
ローカルへのインストールが不要なので、とりあえず試してみたい方にはこちらがおすすめです。
Claudeへアクセスして設定からコネクタを開きます。
「カスタムコネクタを追加」をクリックします。
ここでツール名とURLを指定します。
- 名前：任意の名前
- リモートMCPサーバーURL：https://mcp.excalidraw.com
追加後はチャットのコネクタから有効化されていることが確認できます。
この状態で「構成図を描いて」など指示すると、Excalidrawの図がストリーミングで生成されます。
「Open in Excalidraw」でWeb版のOpen in Excalidrawでそのまま開いて編集できたり、「Edit」でClaude上でそのまま修正できて便利です。
また面白いのが書いてる途中はライブで進行して、手書きで書いてる感がすごいあることです。
以下READMEのgifがわかりやすいので、よければ見てみてください。
ちなみにExcalidrawで描けるものであればなんでも依頼はできるので、
以下のようにイラストを描かせることもできます。
方法2: コミュニティ版 - yctimlin/mcp_excalidrawを使う
Claude Codeで利用したい場合は、コミュニティ版のyctimlin/mcp_excalidrawを使います。
セットアップ方法はリポジトリをクローンしてビルドする方法とDocker版がありますが、今回はお手軽なDocker版を使います。
キャンバスサーバーの起動
まずキャンバスサーバーを起動します。
docker run -d -p 3000:3000 --name mcp-excalidraw-canvas \
ghcr.io/yctimlin/mcp_excalidraw-canvas:latest
ブラウザでhttp://localhost:3000にアクセスすると、Excalidrawのキャンバスが表示されます。
ここにClaude Codeが描画した内容がリアルタイムで反映されます。
Claude Codeへの登録
MCPサーバーをClaude Codeに登録します。
claude mcp add excalidraw --scope user \
-- docker run -i --rm \
-e EXPRESS_SERVER_URL=http://host.docker.internal:3000 \
-e ENABLE_CANVAS_SYNC=true \
ghcr.io/yctimlin/mcp_excalidraw:latest
登録できたらclaude mcp listで確認して表示されていればOKです。
% claude mcp list
Checking MCP server health...
excalidraw: docker run -i --rm -e EXPRESS_SERVER_URL=http://host.docker.internal:3000 -e ENABLE_CANVAS_SYNC=true ghcr.io/yctimlin/mcp_excalidraw:latest - ✓ Connected
Claude Codeに生成させてみた
それではコミュニティ版MCP(yctimlin/mcp_excalidraw)を使ってClaude Codeに図を書かせみます。
今回は4つのパターンで試してみました。
例1：AWSサービスの比較図
まずは文章でサービス比較図を作ってもらいます。
プロンプト1:
Amazon RDS、Amazon Aurora、Amazon DynamoDBの3つのデータベースサービスを比較する図を作成して。
以下の観点で比較して、見やすい表形式にして。
- サービスの種類(リレーショナル/NoSQL)
- スケーリング方式
- ユースケース
- 料金体系の特徴
結果1:
プロンプト2:
ElastiCacheも追加して。
結果2:
「ElastiCacheも追加して」の一言で問題なく列が追加されました。
例2: AWSシステム構成図
次にテキストでアーキテクチャを説明して、構成図を生成してもらいます。
プロンプト1:
以下のAWS構成の構成図を作成して。
- CloudFrontがエントリポイント
- ALBでロードバランシング
- ECS Fargate上でコンテナが2AZで稼働
- バックエンドのDBはAurora PostgreSQL(マルチAZ)
- VPCの中にパブリックサブネットとプライベートサブネットがある
- パブリックサブネットにNAT Gatewayを配置
- AWSのアイコンを使って、Excalidrawらしいキュートな感じにして
結果1:
できましたが、AWSのアイコンが使われていないのでちょっとわかりづらいです。
なのでアイコンを使うためにライブラリを追加します。
キャンバスの右側のLibraryを開いて、「Browse libraries」をクリックします。
AWSのライブラリをDownloadして、
あとはキャンバスの右側のLibraryを開いて、ダウンロードしたファイルをドラックアンドドロップで追加します。
なお追加したライブライはMCPとして用意されていないようでClaude Code側から認識できなかったので、
構成図に使いたいアイコンをキャンバスに追加した上で、再度修正依頼を出してみます。
プロンプト2:
構成図の右側にAWSのアイコンを追加しました。
既存の構成図のAWSサービスをアイコンに置き換えてください。
結果2:
結果的に問題なく置き換えてくれましたが、アイコンを手動で配置する手間を考えるとちょっとめんどくさいですね…。
例3: シーケンス図
3つ目はシーケンス図です。
設計ドキュメントやレビューで頻繁に使う図ですが、手動で描くと矢印の配置が面倒だったりします。
プロンプト:
以下のシーケンス図を作成して。
ECサイトの注文処理のシーケンス図:
1. ユーザーがブラウザから注文リクエストを送信
2. APIサーバーが認証サービスにトークン検証を依頼
3. 認証サービスがOKを返す
4. APIサーバーが在庫サービスに在庫確認を依頼
5. 在庫サービスがDBに在庫数を問い合わせ
6. DBが在庫数を返す
7. 在庫サービスが在庫OKを返す
8. APIサーバーが決済サービスに決済処理を依頼
9. 決済サービスが決済完了を返す
10. APIサーバーがユーザーに注文完了を返す
結果:
縦の線が斜めになっていますが、それ以外は概ね問題なさそうです。
例4: CI/CDパイプライン図
最後はCI/CDパイプライン図です。
チームへの共有やオンボーディング資料で使うことが多いのではないでしょうか。
プロンプト:
以下のCI/CDパイプラインのフロー図を作成して。
失敗した場合はSlackに通知が飛ぶようにしています。
パイプラインの流れがわかるように、左から右に描いて。
1. 開発者がGitHubにプッシュ
2. GitHub Actionsがトリガーされる
3. 以下のステップが順番に実行される:
- コードのチェックアウト
- 依存関係のインストール
- ユニットテスト実行
- Lintチェック
- Dockerイメージのビルド
- コンテナレジストリにプッシュ
4. ステージング環境にデプロイ
5. E2Eテスト実行
6. 承認待ち(手動承認)
7. 本番環境にデプロイ
結果:
横長になってしまっているのでちょと見づらいですが、
手動承認がダイヤモンド形で描かれていたり、失敗時のSlack通知が赤い点線で表現されていたり、一応フロー図として形をなしています。
さいごに
以上、Excalidraw MCPを使ってClaude Codeにキュートな構成図を書かせてみた話でした。
前回の記事で手動でキュートな構成図を描く楽しさをお伝えしてから数ヶ月、Claude Codeでも描けるようになって感動しました…。
レイアウトの崩れやアイコンの手動配置など、手動での修正はまだちょっと必要そうですが、ポン出しのたたき台としてはなかなか良いのではないでしょうか。
皆さんもぜひ試してみて下さい。
