Which integrations are available for this server?

Enables AI agents to programmatically generate, edit, and view Excalidraw diagrams, featuring tools for adding shapes, text, and arrows with real-time preview and bi-directional synchronization.

How do I use Excalidraw MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Excalidraw MCP Server Create a flowchart showing how a user logs into our app" 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.

Excalidraw MCP Server

by Scofieldfree

Overview Schema Related Servers Score Discussions

TypeScript

Hybrid

Excalidraw MCP Server

npm version License: MIT

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

Related MCP server: Excalidraw MCP Server

🚀 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
`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

💬 Usage Examples

Example 1: Create a Simple Diagram

You say:

"Draw a flowchart with three boxes: Input → Process → Output"

AI uses:

start_session → add_elements (3 rectangles + 2 arrows)

Example 2: Convert Mermaid to Excalidraw

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

Example 3: Architecture Diagram

You say:

"Create an architecture diagram for a microservices system"

AI uses:

start_session → add_template_architecture (or) add_elements with custom layout

🏗️ Architecture

┌─────────────────────────────────────────────────────────────┐
│                     AI Agent (Claude/Cursor)                │
└─────────────────────────┬───────────────────────────────────┘
                          │ MCP Protocol (JSON-RPC over stdio)
                          ▼
┌─────────────────────────────────────────────────────────────┐
│                   Excalidraw MCP Server                     │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ Tool Router │──│ State Store │──│ WebSocket Broadcast │  │
│  └─────────────┘  └─────────────┘  └──────────┬──────────┘  │
└────────────────────────────────────────────────┼────────────┘
                                                 │ WebSocket
                                                 ▼
                          ┌───────────────────────────────────┐
                          │     Browser (Excalidraw Editor)   │
                          └───────────────────────────────────┘

🔧 Development

Prerequisites

Node.js >= 18
pnpm >= 9

Setup

# Clone the repository
git clone https://github.com/Scofieldfree/excalidraw-mcp.git
cd excalidraw-mcp

# Install dependencies
pnpm install

# Start development server
pnpm dev

Scripts

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

📦 Project Structure

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

🐛 Troubleshooting

Port Already in Use

The server automatically finds an available port starting from 3100. If you need a specific port, set the PORT environment variable.

Browser Doesn't Open

Ensure you have a default browser configured. The server uses the open package to launch the browser.

WebSocket Connection Failed

Check if any firewall or antivirus is blocking WebSocket connections on localhost.

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'feat: add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📜 License

🔗 Links

Install Server

license - permissive license

quality

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

0dRelease cycle

2Releases (12mo)

Commit activity

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

View all tools

Related MCP Servers

Excalidraw MCP Server
Developer Tools Software Architecture App Automation
kakacoding1
A
license
-
quality
F
maintenance
Enables AI agents to programmatically control a live Excalidraw canvas through element-level CRUD operations and real-time synchronization. It allows agents to iteratively build, inspect, and refine diagrams while providing visual feedback via screenshots and scene descriptions.
Last updated 2026-03-22
1,985
MIT
Excalidraw MCP Server
Design Tools Developer Tools App Automation
ignizia-code
A
license
-
quality
D
maintenance
Enables AI agents to programmatically control a live Excalidraw canvas with element-level CRUD operations and real-time synchronization. It supports iterative diagramming through scene descriptions, screenshots, and advanced layout tools for collaborative AI-human workflows.
Last updated 2026-03-31
1,985
MIT
@kamiazya/whiteboard-mcp
Design Tools Software Architecture
kamiazya
A
license
-
quality
C
maintenance
Enables AI agents to collaboratively draw and annotate Excalidraw diagrams in real-time via MCP tools, synced to a browser canvas.
Last updated 2026-08-03
3
Apache 2.0
Excalidraw MCP Server
Design Tools Software Architecture
0xArtex
A
license
-
quality
D
maintenance
Enables 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.
Last updated 2026-03-03
1,985
8
MIT

View all related MCP servers

Related MCP Connectors

CodePic
AI agent draws editable hand-drawn diagrams (flowchart, ER, architecture) via MCP, not static images
cnvs.app
Real-time collaborative whiteboard — AI agents and humans edit the same board live over MCP.
hustcc-mcp-mermaid
Generate dynamic Mermaid diagrams and charts with AI assistance. Customize styles and export diagr…

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Scofieldfree/excalidraw-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server

Excalidraw MCP Server

✨ Features

🚀 Quick Start

Claude Code (cc)

Codex CLI

Cursor / Windsurf

Cline (VS Code Extension)

GitHub Copilot

Kiro

opencode

VS Code

Claude Desktop

🛠️ Available Tools

💬 Usage Examples

Example 1: Create a Simple Diagram

Example 2: Convert Mermaid to Excalidraw

Example 3: Architecture Diagram

🏗️ Architecture

🔧 Development

Prerequisites

Setup

Scripts

📦 Project Structure

🐛 Troubleshooting

Port Already in Use

Browser Doesn't Open

WebSocket Connection Failed

🤝 Contributing

📜 License

🔗 Links

Maintenance

Resources

Looking for Admin?

Tools

Related MCP Servers