Excalidraw MCP サーバー: LLM 統合のための強力な描画 API

Excalidrawのダイアグラムや描画とのシームレスなインタラクションを可能にする、包括的なモデルコンテキストプロトコル（MCP）サーバーです。このサーバーは、構造化された開発者フレンドリーなAPIを通じて、LLM（大規模言語モデル）にExcalidraw描画の作成、変更、クエリ、操作機能を提供します。

特徴

• 完全なExcalidraw要素コントロール: あらゆるExcalidraw要素を作成、更新、削除、照会します

• 高度な要素操作: 要素のグループ化、整列、分散、ロック、ロック解除

• リソース管理: シーン情報、ライブラリ、テーマ、要素にアクセスして変更します

• 簡単な統合: Claude Desktop やその他の LLM プラットフォームと連携

• Docker サポート: コンテナ化オプションによるシンプルなデプロイメント

Related MCP server: Excalidraw MCP Server

APIツールリファレンス

要素の作成と変更

• 要素を作成する

  • 新しい Excalidraw 要素 (長方形、楕円、ダイヤモンドなど) を作成します。

  • 必須入力: type 、 x 、 y座標

  • オプションの入力: 寸法、色、スタイル設定プロパティ

• 要素の更新

  • 既存のExcalidraw要素をIDで更新する

  • 必須入力: 更新する要素のid

  • オプションの入力: 変更する要素のプロパティ

• 要素を削除する

  • Excalidraw要素を削除する

  • 必須入力: 削除する要素のid

• クエリ要素

  • オプションのフィルタリングを備えたクエリ要素

  • オプションの入力: 要素タイプでフィルタリングするtype 、キーと値のペアでオブジェクトfilter

リソース管理

• リソースを取得する

  • シーン情報やすべての要素などの特定のリソースを取得する

  • 必須入力: resourceタイプ (シーン、ライブラリ、テーマ、要素)

要素の構成

• グループ要素

  • 複数の要素をグループ化する

  • 必須入力: グループelementIds要素IDの配列

• 要素のグループ化を解除

  • 要素のグループを解除する

  • 必須入力: グループ化を解除するグループのgroupId

• 要素を揃える

  • 指定された配置に基づいて複数の要素を配置する

  • 必要な入力: elementIds配列とalignment (左、中央、右、上、中央、下)

• 要素を分配する

  • 要素を空間全体に均等に分散する

  • 必須入力: elementIds配列とdirection (水平または垂直)

• ロック要素

  • 変更を防ぐために要素をロックする

  • 必須入力: ロックする要素のelementIds

• 要素のロックを解除

  • 変更を許可するには要素をロック解除します

  • 必須入力: ロック解除する要素のelementIds配列

Claude Desktopとの統合

このサーバーを Claude Desktop アプリケーションで使用するには、 claude_desktop_config.jsonの「mcpServers」セクションに次の構成を追加します。

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["src/index.js"],
      "env": {
        "LOG_LEVEL": "info",
        "DEBUG": "false"
      }
    }
  }
}

カーソルとの統合

このサーバーを Cursor で使用するには、次の構成でワークスペースに.cursor/mcp.jsonファイルを作成します。

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": [
        "/path/to/your/directory/mcp_excalidraw/src/index.js"
      ],
      "env": {
        "LOG_LEVEL": "info",
        "DEBUG": "false"
      }
    }
  }
}

必ず次の点に注意してください:

1. /path/to/your/directory 、mcp_excalidraw インストールの実際の絶対パスに置き換えます。

2. .cursorディレクトリが存在しない場合は作成します

3. index.jsへのパスが正しく、ファイルが存在することを確認してください

Docker統合

{
  "mcpServers": {
    "excalidraw": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "mcp/excalidraw"],
      "env": {
        "LOG_LEVEL": "info",
        "DEBUG": "false"
      }
    }
  }
}

インストールガイド

NPMのインストール

# Install dependencies
npm install

# Start the server
npm start

Dockerのインストール

# Build the Docker image
docker build -t mcp/excalidraw .

# Run the container
docker run -i --rm mcp/excalidraw

設定オプション

サーバーは次の環境変数を使用して構成できます。

• LOG_LEVEL - ログレベルを設定します（デフォルト: "info")

• DEBUG - デバッグモードを有効にする（デフォルト: "false"）

• DEFAULT_THEME - デフォルトのテーマを設定します（デフォルト: "light")

使用例

Excalidraw MCP サーバーの使用方法の実際的な例をいくつか示します。

長方形要素の作成

{
  "type": "rectangle",
  "x": 100,
  "y": 100,
  "width": 200,
  "height": 100,
  "backgroundColor": "#ffffff",
  "strokeColor": "#000000",
  "strokeWidth": 2,
  "roughness": 1
}

特定の要素のクエリ

{
  "type": "rectangle",
  "filter": {
    "strokeColor": "#000000"
  }
}

複数の要素のグループ化

{
  "elementIds": ["elem1", "elem2", "elem3"]
}

ライセンス

このExcalidraw MCPサーバーはMITライセンスに基づいてライセンスされています。MITライセンスの条件に従って、ソフトウェアを自由に使用、改変、配布することができます。詳細については、プロジェクトリポジトリのLICENSEファイルをご覧ください。