yctimlin/mcp_excalidraw

これは何？

主な機能

• 01ライブのExcalidrawキャンバス上で要素単位の作成、読み取り、更新、削除が可能。
• 02ヘッドレスでのスクリーンショット撮影とPNG/SVGエクスポートに対応し、エージェント自身が図を確認可能。
• 03整列、分配、グループ化、ロック、複製のためのレイアウトツール。
• 04名前付きスナップショットの保存と復元に対応し、シーンをロールバック可能。
• 05Mermaidからキャンバスへの変換と、excalidraw.comへの暗号化共有リンクに対応。
• 06CLI、MCPサーバー、REST APIから利用可能。

ユースケース

• コーディングエージェントに、コードベースのアーキテクチャ図やフローチャートを描かせる。
• .excalidraw形式の図をリポジトリにエクスポートし、コードと一緒にバージョン管理する。
• ObsidianのVault内で図を生成・管理する。
• コミット済みの.excalidrawファイルを、ブラウザーを起動せずにCIでPNGにレンダリングする。

クイックスタート

1. 1

   npx でキャンバスサーバーを起動する

   npx -y mcp-excalidraw-server start
2. 2

   CLI でテスト用の図を描く

   npx -y mcp-excalidraw-server describe
3. 3

   エージェントスキルを skills ディレクトリにインストールする

   npx -y mcp-excalidraw-server install-skill --dir <skills-root>

使う前に知っておきたいこと

• !Mermaid の変換には、キャンバスを表示したブラウザータブを開いておく必要があります。
• !キャンバスページは esm.sh CDN から Excalidraw のフォントを読み込みます。

収録されている特集

トピック

よくある質問

mcp_excalidraw とは？

AIコーディングエージェントがExcalidrawのライブキャンバスで図の作成、スクリーンショット撮影、編集、エクスポートを行えるMCPサーバー、CLI、エージェントスキル。 mcp-excalidraw-serverを使うと、AIエージェントはローカルのライブキャンバス上でExcalidrawの図をプログラムから作成・編集できます。個々の要素の追加、検索、更新、削除に加え、整列、分配、グループ化などの操作で配置を調整できます。また、テキスト形式のシーン説明やレンダリング済みのスクリーンショットで、自らの作業を確認できます。

mcp_excalidraw は無料で使えますか？ライセンスは？

mcp_excalidraw は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

mcp_excalidraw は今もメンテナンスされていますか？

活発にメンテナンス中。mcp_excalidraw の最終コミットは 2026年10月30日 です。

mcp_excalidraw は何に使えますか？

コーディングエージェントに、コードベースのアーキテクチャ図やフローチャートを描かせる。 .excalidraw形式の図をリポジトリにエクスポートし、コードと一緒にバージョン管理する。 ObsidianのVault内で図を生成・管理する。 コミット済みの.excalidrawファイルを、ブラウザーを起動せずにCIでPNGにレンダリングする。

mcp_excalidraw のインストール方法は？

npx でキャンバスサーバーを起動する: npx -y mcp-excalidraw-server start CLI でテスト用の図を描く: npx -y mcp-excalidraw-server describe エージェントスキルを skills ディレクトリにインストールする: npx -y mcp-excalidraw-server install-skill --dir <skills-root>

mcp_excalidraw はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/yctimlin/mcp_excalidraw