A
licenseA
qualityD
maintenanceEnables creation, management, and export of Excalidraw drawings through natural language. Supports CRUD operations on drawings and export to SVG, PNG, and JSON formats with file-based storage.
8
2,464 npm
-
excalidraw
by cmd8
Allows creating and modifying Excalidraw diagrams, including nodes, edges, and full diagram state.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@excalidrawAdd a new node labeled 'User Service' to the diagram."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
@cmd8/excalidraw-mcp
Model Context Protocol (MCP) server for Excalidraw diagrams.
🛠️ Installation
Requirements
Node.js >= v18.0.0
Add to your Cursor MCP config (~/.cursor/mcp.json):
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@cmd8/excalidraw-mcp", "--diagram", "/path/to/diagram.excalidraw"]
}
}
}claude mcp add excalidraw -- npx -y @cmd8/excalidraw-mcp --diagram /path/to/diagram.excalidrawamp mcp add excalidraw -- npx -y @cmd8/excalidraw-mcp --diagram /path/to/diagram.excalidrawAdd to your VS Code MCP settings:
{
"mcp": {
"servers": {
"excalidraw": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@cmd8/excalidraw-mcp", "--diagram", "/path/to/diagram.excalidraw"]
}
}
}
}Add to your Windsurf MCP config:
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@cmd8/excalidraw-mcp", "--diagram", "/path/to/diagram.excalidraw"]
}
}
}Add to your claude_desktop_config.json:
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@cmd8/excalidraw-mcp", "--diagram", "/path/to/diagram.excalidraw"]
}
}
}Add to your Codex MCP config:
[mcp_servers.excalidraw]
command = "npx"
args = ["-y", "@cmd8/excalidraw-mcp", "--diagram", "/path/to/diagram.excalidraw"]Related MCP server: Excalidraw MCP Server
CLI Options
-d, --diagram(required): Path to the Excalidraw diagram file
🔨 Available Tools
createNode
Create a new node (shape with label) in the diagram. Returns the created node ID.
createEdge
Create an arrow connecting two nodes. Nodes can be referenced by ID or by label text.
deleteElement
Delete a node or edge from the diagram by ID or label.
getFullDiagramState
Returns a markdown representation of the complete diagram, including nodes, relationships, labels, frames, and colors.
License
MIT
This server cannot be deployed
Maintenance
ActivityInactive
ResponsivenessNo issues
Related MCP Connectors
Create, validate, edit, export (markdown/svg/png/mermaid), and search JSON Canvas files.
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
Create, read and live-edit visual boards, Kanban plans, Gantt timelines and diagrams with AI agents.
Generate, edit, and manage Eraser diagrams and docs with AI.
Related MCP Servers
- AlicenseAqualityCmaintenanceEnables AI agents to programmatically generate, edit, and view Excalidraw diagrams with real-time browser synchronization. It provides a suite of tools for adding shapes, text, and arrows to diagrams through natural language interactions.112,464 npm100MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to create, modify, and share diagrams on a live Excalidraw canvas through MCP tools, supporting shapes, text, arrows, batch operations, and export to shareable links with images.1,645 npm8MIT
- AlicenseNot gradedqualityCmaintenanceEnables AI agents to build, edit, organize, and export Excalidraw diagrams (architecture, flowcharts, etc.) entirely headless, producing .excalidraw files, SVG, and PNG renders.2,464 npmMIT