yctimlin/mcp_excalidraw
MCP server and Claude Code skill for Excalidraw — programmatic canvas toolkit to create, edit, and export diagrams via AI agents with real-time canvas sync.
What the project does
mcp‑excalidraw‑server turns a local Excalidraw canvas into a programmable workbench that AI coding agents (Claude Code, Cursor, Codex, etc.) can drive. The canvas runs completely locally (Node ≥ 20, no API keys) and can be accessed in three ways:
- CLI –
npx -y mcp-excalidraw-server <command>– a set of JSON‑based commands that start the canvas automatically, add/update/delete elements, take screenshots, export files, etc. - MCP server – a Model Context Protocol (MCP) stdio server exposing 26 tools, so any MCP‑compatible client can call drawing operations directly.
- REST API – plain HTTP/WebSocket endpoints for frameworks like LangChain.
The result is a live, mutable diagram that an agent can inspect (via describe or screenshots), refine element‑by‑element, and finally export as a .excalidraw file that lives next to your source code or in an Obsidian vault.
Who might use it
- Coding assistants that need to generate architecture diagrams, flowcharts, or UI mock‑ups as part of a development workflow.
- Teams that want diagram files version‑controlled alongside code (e.g., commit
.excalidrawfiles to Git). - Obsidian users who want to keep diagrams in their vaults with full editability.
- Anyone building a custom AI‑agent toolchain that can call MCP tools or a REST API.
Key features (as described in the README)
| Feature | What it means |
|---|---|
| Local canvas server | Runs an Excalidraw web UI on http://127.0.0.1:3000 with real‑time WebSocket sync. No external services required. |
| CLI‑first design | All capabilities are exposed as composable commands (add, apply, query, screenshot, export, mermaid, snapshot, arrange, share, …). JSON is printed on stdout, exit codes indicate success/failure. |
| MCP integration | Implements MCP protocol revision 2026‑07‑28; 26 tools let any MCP client (Claude Desktop, Cursor, Codex CLI, Antigravity, etc.) manipulate the canvas via stdio. |
| REST API | Simple HTTP endpoints for LangChain or custom scripts. |
| Element‑level CRUD | Create, read, update, delete individual shapes, arrows, text, groups, locks, etc. |
| Iterative refinement | Agents can describe the scene, take a screenshot, adjust layout, and repeat until the diagram is clean. |
| Export / Import | Export to native .excalidraw JSON or Obsidian‑compatible .excalidraw.md. Imports support both formats, including compressed vault files. |
| Deterministic exports | IDs, seeds, and key ordering are stable, so unchanged diagrams produce identical files – no noisy Git diffs. |
| Mermaid conversion | Paste Mermaid syntax; the server merges the generated diagram into the existing canvas. |
| Viewport control | Commands to zoom, pan, or fit selected elements. |
| Share | Optional encrypted upload to excalidraw.com for a shareable URL. |
| Docker image | Pre‑built container (ghcr.io/yctimlin/mcp_excalidraw) for easy deployment. |
| Agent skill bundle | A portable skill (skills/excalidraw-skill/) that can be installed into an agent’s skill directory with a single install-skill command. |
| Zero‑setup auto‑start | CLI commands and the MCP server automatically spawn the canvas if it isn’t already running (unless EXCALIDRAW_NO_AUTOSTART=1). |
How to get started (quick‑start)
# Install and start the canvas (auto‑starts on first draw command)
npx -y mcp-excalidraw-server start
open http://127.0.0.1:3000 # optional – needed for screenshots/mermaid
# Add two boxes and an arrow (JSON via stdin)
echo '[
{"id":"api","type":"rectangle","x":100,"y":100,"width":160,"height":80,"text":"API Server","backgroundColor":"#a5d8ff"},
{"id":"db","type":"rectangle","x":400,"y":100,"width":160,"height":80,"text":"Database","backgroundColor":"#99e9f2"},
{"type":"arrow","startElementId":"api","endElementId":"db","text":"SQL"}
]' | npx -y mcp-excalidraw-server add
# Let the agent see the diagram
npx -y mcp-excalidraw-server describe
npx -y mcp-excalidraw-server screenshot --out diagram.png
# Export for version control
npx -y mcp-excalidraw-server export --out docs/architecture.excalidraw
The same commands can be called from any MCP‑compatible client or via HTTP.
Limitations / open issues (as listed)
- The server binds only to
127.0.0.1by default; exposing it externally requires the user to add their own network firewall or reverse‑proxy – there is no built‑in authentication. - Some operations (e.g.,
screenshot,mermaidconversion) need an open browser tab because they rely on the client‑side Excalidraw UI. - The README mentions a few “known issues / TODO” sections but does not enumerate concrete bugs; users should check the issue tracker for the latest status.
Who maintains it
The repository is owned by yctimlin and is published on npm as mcp-excalidraw-server (MIT license). Continuous integration runs tests and builds a Docker image on each push.
TL;DR
mcp-excalidraw-server gives AI coding agents a real, editable drawing surface they can control programmatically. It works via a simple CLI, an MCP stdio server, or a REST API, and it stores diagrams as version‑controlled .excalidraw files – making it a practical bridge between LLM‑generated architecture ideas and concrete, editable diagrams.
Related
- Project
- Project
- Project
- Project
- Project