MCP server
by Scofieldfree
Excalidraw MCP Server: let AI agents generate, edit, and view Excalidraw diagrams via natural-language commands with rea
Lets AI assistants create, edit, and view Excalidraw diagrams with real-time browser synchronization. Supports natural language diagram creation with automatic layout and Mermaid syntax conversion.
Excalidraw MCP Server is a community-built MCP server published by Scofieldfree that provides AI assistants with tools and capabilities via the Model Context Protocol. Excalidraw MCP Server: let AI agents generate, edit, and view Excalidraw diagrams via natural-language commands with rea It is categorized under developer tools, design. This server exposes 11 tools that AI clients can invoke during conversations and coding sessions.
You can install Excalidraw MCP Server in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.
MIT
Excalidraw MCP Server is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.
Add new capabilities to Claude beyond text generation
Example
Access external data sources, execute code, interact with tools and services
Transform Claude from chatbot to action-taking agent
Provide Claude with access to relevant context and data
Example
Load project documentation, access knowledge bases, query databases
Get more accurate, context-aware responses
Automate multi-step workflows combining AI and external tools
Example
Research → Summarize → Create document → Send notification
Complete complex tasks end-to-end without manual steps
Share your MCP server with the developer community
We wired Excalidraw MCP Server into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
Excalidraw MCP Server has been reliable for tool-calling workflows; the MCP profile page is a good permalink for internal docs.
Excalidraw MCP Server is a well-scoped MCP server in the explainx.ai directory — install snippets and categories matched our Claude Code setup.
According to our notes, Excalidraw MCP Server benefits from clear Model Context Protocol framing — fewer ambiguous “AI plugin” claims.
Excalidraw MCP Server is among the better-indexed MCP projects we tried; the explainx.ai summary tracks the official description.
We evaluated Excalidraw MCP Server against two servers with overlapping tools; this profile had the clearer scope statement.
We wired Excalidraw MCP Server into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
Excalidraw MCP Server reduced integration guesswork — categories and install configs on the listing matched the upstream repo.
Strong directory entry: Excalidraw MCP Server surfaces stars and publisher context so we could sanity-check maintenance before adopting.
Excalidraw MCP Server has been reliable for tool-calling workflows; the MCP profile page is a good permalink for internal docs.
showing 1-10 of 37
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.
<p align="center"> <img src="/images/excalidraw-mcp-architechture.png" alt="Excalidraw MCP Demo" width="700"> </p>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.
| 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 |
You don't need to clone this repo. Just configure your MCP client:
claude mcp add excalidraw -- npx -y @scofieldfree/excalidraw-mcp
codex mcp add excalidraw -- npx -y @scofieldfree/excalidraw-mcp
Go to Settings > MCP → Add New MCP Server:
| Field | Value |
|---|---|
| Name | excalidraw |
| Type | command |
| Command | npx -y @scofieldfree/excalidraw-mcp |
Open Cline settings and add to MCP Servers:
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
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"]
}
}
}
Follow the MCP Servers documentation. Add to .kiro/settings/mcp.json:
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
opencode mcp add excalidraw -- npx -y @scofieldfree/excalidraw-mcp
One-click install:
<img src="https://img.shields.io/badge/Install_Server-VS_Code-blue?logo=visualstudiocode" alt="Install in VS Code"> <img src="https://img.shields.io/badge/Install_Server-VS_Code_Insiders-green?logo=visualstudiocode" alt="Install in VS Code Insiders">
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"]}'
Add to your claude_desktop_config.json:
~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
| 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 |
get_scene | Retrieve current diagram state |
create_from_mermaid | Convert Mermaid syntax to Excalidraw |
add_template_architecture | Add a pre-built architecture diagram template |
create_diagram | Create a new diagram or clear existing |
export_diagram | Export diagram to PNG, SVG, or JSON |
list_sessions | List all active diagram sessions |
delete_diagram | Delete a diagram session |
You say:
"Draw a flowchart with three boxes: Input → Process → Output"
AI uses:
start_session → add_elements (3 rectangles + 2 arrows)
You say:
"Convert this Mermaid diagram to Excalidraw:
graph LR: A[User] --> B[API Gateway] --> C[Service] --> D[(Database)]"
AI uses:
start_session → create_from_mermaid
You say:
"Create an architecture diagram for a microservices system"
AI uses:
start_session → add_template_architecture (or) add_elements with custom layout
┌─────────────────────────────────────────────────────────────┐
│ AI Agent (Claude/Cursor) │
└─────────────────────────┬───────────────────────────────────┘
│ MCP Protocol (JSON-RPC over stdio)
▼
┌─────────────────────────────────────────────────────────────┐
│ Excalidraw MCP Server │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ Tool Router │──│ State Store │──│ WebSocket Broadcast │ │
│ └─────────────┘ └─────────────┘ └──────────┬──────────┘ │
└────────────────────────────────────────────────┼────────────┘
│ WebSocket
▼
┌───────────────────────────────────┐
│ Browser (Excalidraw Editor) │
└───────────────────────────────────┘
# Clone the repository
git clone https://github.com/Scofieldfree/excalidraw-mcp.git
cd excalidraw-mcp
# Install dependencies
pnpm install
# Start development server
pnpm dev
| Command | Description |
|---|---|
pnpm dev | Start dev server (backend + frontend) |
pnpm build | Build for production |
pnpm typecheck | Run TypeScript type checking |
pnpm lint | Run ESLint |
pnpm release | Create a new release version |
excalidraw-mcp/
├── packages/
│ └── mcp-server/ # Core MCP server + Excalidraw frontend
│ ├── src/
│ │ ├── index.ts # Entry point
│ │ ├── state.ts # Session state management
│ │ ├── http-server.ts
│ │ └── tools/ # MCP tool implementations
│ └── web/ # Excalidraw React frontend
├── docs/ # Documentation
└── package.json # Workspace configuration
The server automatically finds an available port starting from 3100. If you need a specific port, set the PORT environment variable.
Ensure you have a default browser configured. The server uses the open package to launch the browser.
Check if any firewall or antivirus is blocking WebSocket connections on localhost.
Contributions are welcome! Please read our Contributing Guide for details.
git checkout -b feature/amazing-feature)git commit -m 'feat: add amazing feature')git push origin feature/amazing-feature)MIT © Scofieldfree
Prerequisites
Time Estimate
15-60 minutes depending on server complexity
Steps
Troubleshooting
✓ Do
✗ Don't
💡 Pro Tips
Architecture
Model Context Protocol standardizes how AI hosts (Claude, Cursor) communicate with external tools and data sources through server implementations.
Protocols
Compatibility
✓ Use when
Use when you need Claude to access external data, execute actions, or integrate with tools. Best for extending AI capabilities beyond conversation.
✗ Avoid when
Avoid when native integrations exist (use official APIs directly), for real-time critical systems, or when security/compliance requires zero external dependencies.