Excalidraw MCP Server: Leistungsstarke Zeichen-API für die LLM-Integration

📣 NEUIGKEITEN: Version 1.0.0 ist jetzt auf npm veröffentlicht! Sie können Excalidraw MCP direkt mit npx excalidraw-mcp ohne Installation ausführen. Keine Einrichtung erforderlich – einfach ausführen und loslegen!

Ein umfassender Model Context Protocol (MCP)-Server, der eine nahtlose Interaktion mit Excalidraw-Diagrammen und -Zeichnungen ermöglicht. Dieser Server bietet LLMs (Large Language Models) die Möglichkeit, Excalidraw-Zeichnungen über eine strukturierte, entwicklerfreundliche API zu erstellen, zu ändern, abzufragen und zu bearbeiten.

Schnellstart

Sie können den Excalidraw MCP-Server direkt mit npx ausführen, ohne etwas zu installieren:

npx excalidraw-mcp

Wenn Sie es lieber global installieren möchten:

npm install -g excalidraw-mcp
excalidraw-mcp

Optionen

Die folgenden Befehlszeilenoptionen sind verfügbar:

-d, --debug            Enable debug logging
-?, --help             Show this help message

Hinweis: Die folgenden Optionen sind derzeit nur in der Docker-Version voll funktionsfähig:

-p, --port <port>      Port to run the server on (default: 3000)
-h, --host <host>      Host to bind the server to (default: localhost)
-m, --mode <mode>      Transport mode: 'stdio' or 'http' (default: stdio)

Beispiele

Mit Standardoptionen ausführen:

npx excalidraw-mcp

Aktivieren Sie die Debug-Protokollierung:

npx excalidraw-mcp --debug

Related MCP server: Excalidraw MCP Server

Merkmale

• Vollständige Excalidraw-Elementsteuerung : Erstellen, aktualisieren, löschen und abfragen Sie jedes Excalidraw-Element

• Erweiterte Elementmanipulation : Elemente gruppieren, ausrichten, verteilen, sperren und entsperren

• Ressourcenverwaltung : Zugriff auf und Änderung von Szeneninformationen, Bibliotheken, Themen und Elementen

• Einfache Integration : Funktioniert mit Claude Desktop und anderen LLM-Plattformen

• Docker-Support : Einfache Bereitstellung mit Containerisierungsoptionen

API-Tools-Referenz

Elementerstellung und -änderung

• Element erstellen

  • Erstellen Sie ein neues Excalidraw-Element (Rechteck, Ellipse, Raute usw.).

  • Erforderliche Eingaben: type , x , y -Koordinaten

  • Optionale Eingaben: Abmessungen, Farben, Stileigenschaften

• Update-Element

  • Aktualisieren eines vorhandenen Excalidraw-Elements anhand der ID

  • Erforderliche Eingabe: id des zu aktualisierenden Elements

  • Optionale Eingaben: jede zu ändernde Elementeigenschaft

• delete_element

  • Löschen eines Excalidraw-Elements

  • Erforderliche Eingabe: id des zu löschenden Elements

• Abfrageelemente

  • Abfrageelemente mit optionaler Filterung

  • Optionale Eingaben: type zum Filtern nach Elementtyp, filter mit Schlüssel-Wert-Paaren

Ressourcenmanagement

• Ressource abrufen

  • Holen Sie sich eine bestimmte Ressource wie Szeneninformationen oder alle Elemente

  • Erforderliche Eingabe: resource (Szene, Bibliothek, Thema, Elemente)

Elementorganisation

• Gruppenelemente

  • Gruppieren Sie mehrere Elemente

  • Erforderliche Eingabe: elementIds -Array mit zu gruppierenden Element-IDs

• Gruppierung von Elementen aufheben

  • Gruppierung einer Elementgruppe aufheben

  • Erforderliche Eingabe: groupId der Gruppe, deren Gruppierung aufgehoben werden soll

• Elemente ausrichten

  • Mehrere Elemente basierend auf der angegebenen Ausrichtung ausrichten

  • Erforderliche Eingaben: elementIds -Array und alignment (links, Mitte, rechts, oben, Mitte, unten)

• Elemente verteilen

  • Elemente gleichmäßig im Raum verteilen

  • Erforderliche Eingaben: elementIds -Array und direction (horizontal oder vertikal)

• Sperrelemente

  • Sperren Sie Elemente, um Änderungen zu verhindern

  • Erforderliche Eingabe: elementIds Array der zu sperrenden Elemente

• Elemente entsperren

  • Entsperren Sie Elemente, um Änderungen zu ermöglichen

  • Erforderliche Eingabe: elementIds Array der zu entsperrenden Elemente

Integration mit Claude Desktop

Um diesen Server mit der Claude Desktop-Anwendung zu verwenden, fügen Sie dem Abschnitt „mcpServers“ Ihrer claude_desktop_config.json die folgende Konfiguration hinzu:

{
  "mcpServers": {
    "mcp_excalidraw": {
      "command": "npx",
      "args": ["-y", "excalidraw-mcp"]
    }
  }
}

Integration mit Cursor

Um diesen Server mit der Cursor-Anwendung zu verwenden, fügen Sie dem Abschnitt „mcpServers“ Ihrer .cursor/mcp.json die folgende Konfiguration hinzu:

{
  "mcpServers": {
    "mcp_excalidraw": {
      "command": "npx",
      "args": ["-y", "excalidraw-mcp"]
    }
  }
}

Integration mit Cursor

Um diesen Server mit Cursor zu verwenden, erstellen Sie in Ihrem Arbeitsbereich eine .cursor/mcp.json Datei mit der folgenden Konfiguration:

{
  "mcpServers": {
    "mcp_excalidraw": {
      "command": "npx",
      "args": ["-y", "excalidraw-mcp"]
    }
  }
}

Stellen Sie Folgendes sicher:

1. Ersetzen Sie /path/to/your/directory durch den tatsächlichen absoluten Pfad zu Ihrer mcp_excalidraw-Installation

2. Erstellen Sie das .cursor -Verzeichnis, falls es nicht existiert

3. Stellen Sie sicher, dass der Pfad zu index.js korrekt ist und die Datei vorhanden ist

Docker-Integration

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

Installationsanleitung

NPM-Installation

# Install globally
npm install -g excalidraw-mcp

# Run the server
excalidraw-mcp

Lokales Entwicklungs-Setup

# Clone the repository
git clone <repository-url>
cd excalidraw-mcp

# Install dependencies
npm install

# Start the server
npm start

Docker-Installation

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

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

Konfigurationsoptionen

Der Server kann mit den folgenden Umgebungsvariablen konfiguriert werden:

• LOG_LEVEL - Setzt die Protokollierungsebene (Standard: "info")

• DEBUG - Debug-Modus aktivieren (Standard: „false“)

• DEFAULT_THEME – Legt das Standarddesign fest (Standard: „hell“)

Anwendungsbeispiele

Hier sind einige praktische Beispiele zur Verwendung des Excalidraw MCP-Servers:

Erstellen eines Rechteckelements

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

Abfragen bestimmter Elemente

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

Gruppieren mehrerer Elemente

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

Lizenz

Dieser Excalidraw MCP-Server ist unter der MIT-Lizenz lizenziert. Sie können die Software unter den Bedingungen der MIT-Lizenz frei verwenden, ändern und weitergeben. Weitere Informationen finden Sie in der Lizenzdatei im Projekt-Repository.

Entwicklung

Klonen Sie das Repository und installieren Sie Abhängigkeiten:

git clone <repository-url>
cd excalidraw-mcp
npm install

Starten Sie den Entwicklungsserver:

npm run dev