Excalidraw MCP Server

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Integrations

  • Supports containerized deployment of the MCP server for simplified integration and consistent environment.

  • Enables creation, modification, and manipulation of Excalidraw diagrams, including element control, grouping, alignment, and resource management.

  • Provides installation and dependency management through npm, allowing users to easily set up and run the MCP server.

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

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

特徴

  • 完全なExcalidraw要素コントロール: あらゆるExcalidraw要素を作成、更新、削除、照会します
  • 高度な要素操作: 要素のグループ化、整列、分散、ロック、ロック解除
  • リソース管理: シーン情報、ライブラリ、テーマ、要素にアクセスして変更します
  • 簡単な統合: Claude Desktop やその他の LLM プラットフォームと連携
  • Docker サポート: コンテナ化オプションによるシンプルなデプロイメント

APIツールリファレンス

要素の作成と変更

  • 要素を作成する
    • 新しい Excalidraw 要素 (長方形、楕円、ダイヤモンドなど) を作成します。
    • 必須入力: typexy座標
    • オプションの入力: 寸法、色、スタイル設定プロパティ
  • 要素の更新
    • 既存の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ファイルをご覧ください。

-
security - not tested
F
license - not found
-
quality - not tested

LLM が構造化 API を通じて Excalidraw ダイアグラムを作成、変更、操作できるようにするモデル コンテキスト プロトコル サーバー。

  1. Features
    1. API Tools Reference
      1. Element Creation and Modification
      2. Resource Management
      3. Element Organization
    2. Integration with Claude Desktop
      1. Integration with Cursor
        1. Docker Integration
      2. Installation Guide
        1. NPM Installation
        2. Docker Installation
      3. Configuration Options
        1. Usage Examples
          1. Creating a Rectangle Element
          2. Querying Specific Elements
          3. Grouping Multiple Elements
        2. License
          ID: hhg9min24v