Empowers AI agents to create, edit, and manage Excalidraw diagrams
Excalidraw MCP Server
An MCP (Model Context Protocol) server that empowers AI agents (like Claude, Cursor, Windsurf) to create, edit, and manage Excalidraw diagrams directly within your conversation.
Why Excalidraw? Its hand-drawn aesthetic and JSON-based format are perfect for rapid, programmable diagramming. This server bridges standard MCP clients with a local Excalidraw instance, enabling AI-powered visual thinking.
✨ Features
| Feature | Description |
|---|---|
| 🎨 Real-time Preview | Changes appear instantly in a local browser window via WebSocket |
| 📐 Smart Layout | Automatically calculates text width and binds labels to containers |
| 🔄 Multi-Session | Switch between different diagrams seamlessly |
| 🧜 Mermaid Support | Convert Mermaid syntax to Excalidraw diagrams instantly |
| 📦 Export Options | Export to PNG, SVG, or JSON formats |
| 🏗️ Templates | Built-in architecture diagram templates |
🚀 Quick Start
You don't need to clone this repo. Just configure your MCP client:
Claude Code (cc)
claude mcp add excalidraw -- npx -y @scofieldfree/excalidraw-mcp
Codex CLI
codex mcp add excalidraw -- npx -y @scofieldfree/excalidraw-mcp
Cursor / Windsurf
Go to Settings > MCP → Add New MCP Server:
| Field | Value |
|---|---|
| Name | excalidraw |
| Type | command |
| Command | npx -y @scofieldfree/excalidraw-mcp |
Cline (VS Code Extension)
Open Cline settings and add to MCP Servers:
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
GitHub Copilot
Use the Copilot CLI to interactively add:
/mcp add
Alternatively, create or edit ~/.copilot/mcp-config.json:
{
"mcpServers": {
"excalidraw": {
"type": "local",
"command": "npx",
"tools": ["*"],
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
Kiro
Follow the MCP Servers documentation. Add to .kiro/settings/mcp.json:
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
opencode
opencode mcp add excalidraw -- npx -y @scofieldfree/excalidraw-mcp
VS Code
One-click install:
Or install via CLI:
# For VS Code
code --add-mcp '{"name":"excalidraw","command":"npx","args":["-y","@scofieldfree/excalidraw-mcp"]}'
# For VS Code Insiders
code-insiders --add-mcp '{"name":"excalidraw","command":"npx","args":["-y","@scofieldfree/excalidraw-mcp"]}'
Claude Desktop
Add to your claude_desktop_config.json:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - Windows:
%APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
🛠️ Available Tools
| Tool | Description |
|---|---|
start_session |
Start browser preview and open Excalidraw editor |
add_elements |
Add shapes, text, arrows to the canvas |
update_element |
Modify existing element properties |
delete_element |
Remove elements from canvas |
Tools (4)
start_sessionStart browser preview and open Excalidraw editoradd_elementsAdd shapes, text, arrows to the canvasupdate_elementModify existing element propertiesdelete_elementRemove elements from canvasConfiguration
{"mcpServers": {"excalidraw": {"command": "npx", "args": ["-y", "@scofieldfree/excalidraw-mcp"]}}}