Excalidraw MCP-Server

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

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:

Ersetzen Sie /path/to/your/directory durch den tatsächlichen absoluten Pfad zu Ihrer mcp_excalidraw-Installation
Erstellen Sie das .cursor -Verzeichnis, falls es nicht existiert
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

You must be authenticated.

security – no known vulnerabilities

license - not found

quality - confirmed to work

hybrid server

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

Tools

View all tools

Ein Model Context Protocol-Server, der es LLMs ermöglicht, Excalidraw-Diagramme über eine strukturierte API zu erstellen, zu ändern und zu bearbeiten.

Related Resources

Reddit Discussion about this server

Related MCP Servers

Math-MCP
EthanHenrickson
A
security
A
license
A
quality
A Model Context Protocol server that provides basic mathematical and statistical functions to LLMs, enabling them to perform accurate numerical calculations through a simple API.
Last updated -
13
13
TypeScript
MIT License
Excalidraw MCP Server
i-tozer
-
security
F
license
-
quality
A Model Context Protocol server that provides API functionality for creating, managing, and exporting Excalidraw drawings in various formats like SVG, PNG, and JSON.
Last updated -
3
JavaScript
Compiler Explorer MCP
torshepherd
-
security
F
license
-
quality
A Model Context Protocol server that connects LLMs to the Compiler Explorer API, enabling them to compile code, explore compiler features, and analyze optimizations across different compilers and languages.
Last updated -
Python
Calculator MCP
wrtnlabs
A
security
A
license
A
quality
A Model Context Protocol server that provides basic calculator functionality for LLMs, enabling them to perform mathematical operations like addition, subtraction, multiplication, division, modulo, and square root.
Last updated -
6
125
12
TypeScript
MIT License

View all related MCP servers

Excalidraw MCP Server