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 it does
mcp‑excalidraw‑server turns an Excalidraw canvas into a programmable workbench that AI coding agents (Claude Code, Cursor, Codex CLI, etc.) can drive. The agent can:
- Create, read, update, delete individual diagram elements via JSON commands.
- Take screenshots of the live canvas (now rendered headlessly in Node, no browser needed).
- Iteratively refine a diagram: draw → describe → screenshot → adjust → repeat.
- Export the result as a native
.excalidrawfile (or Obsidian‑compatible.excalidraw.md) that can be version‑controlled alongside code. - Import, merge Mermaid diagrams, share encrypted URLs, and take named snapshots.
All of this is exposed through three interchangeable interfaces:
- CLI (
npx -y mcp-excalidraw-server <command>), the recommended way for agents. - MCP server that speaks the Model Context Protocol (MCP 2026‑07‑28) for any MCP‑compatible client.
- REST API for LangChain or custom HTTP callers.
The actual drawing happens locally in a Node ≥ 20 process; no external API keys are required.
Who might use it
- Coding assistants that need to generate architecture diagrams, flowcharts, or UI mock‑ups as part of a development workflow.
- CI pipelines that automatically render updated diagrams when source code changes.
- Documentation pipelines (e.g., Obsidian vaults) that keep visual assets in sync with code.
- Teams that want a shared, real‑time canvas that multiple agents can edit concurrently.
How to get started
# One‑liner: start the canvas and watch it (optional)
npx -y mcp-excalidraw-server start
open http://127.0.0.1:3000 # view the UI in a browser
# Draw two boxes and an arrow via JSON
cat <<EOF | npx -y mcp-excalidraw-server add
[
{"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"}
]
EOF
# Let the agent see the diagram and capture a PNG
npx -y mcp-excalidraw-server describe
npx -y mcp-excalidraw-server screenshot --out diagram.png
# Save the diagram as a repo artifact
npx -y mcp-excalidraw-server export --out docs/arch.excalidraw
The same commands work inside a Docker container or from source after npm ci.
Key features at a glance
| Feature | What it gives you |
|---|---|
| CLI‑first design | All canvas actions are composable JSON commands; exit codes make scripting easy. |
| MCP compatibility | Works with Claude Desktop, Cursor, Codex CLI, Antigravity, etc., using the latest MCP protocol (no handshake needed). |
| Headless rendering | Screenshots and image exports are generated inside Node via jsdom + resvg – fast, deterministic, CI‑friendly. |
| Deterministic exports | Byte‑identical .excalidraw files for unchanged scenes → no noisy git diffs. |
| Obsidian support | Export to .excalidraw.md for the Obsidian Excalidraw plugin, preserving block references. |
| Mermaid import | Convert Mermaid text into live Excalidraw elements, merging with existing content. |
| Snapshot system | Named save/restore points let agents roll back or branch diagram states. |
| Layout tools | Align, distribute, group/ungroup, lock, duplicate – all via MCP tools or CLI flags. |
| Shareable URLs | Optional encrypted upload to excalidraw.com for easy sharing. |
| Zero‑config start | The first drawing command auto‑spawns the canvas server; set EXCALIDRAW_NO_AUTOSTART=1 to disable. |
Limitations / gotchas
- The server binds only to
127.0.0.1by default; exposing it externally requires your own network firewall – the API has no built‑in auth. - Some commands (
mermaidconversion, screenshot with--renderer browser) still need an actual browser tab open. - Requires Node ≥ 20; older versions are not supported.
- Font coverage is limited to the bundled TTFs; exotic scripts fall back to the host OS fonts.
License & community
- MIT license – free for commercial and personal use.
- Published on npm as
mcp-excalidraw-server(badge shows current version). - CI badges indicate automated testing and Docker builds.
- Contributions are welcomed; the repo includes a
CONTRIBUTINGstyle guide and adevelopmentsection for building from source.
TL;DR
mcp-excalidraw-server is a locally‑run, CLI‑driven Excalidraw canvas that AI coding agents can treat as a mutable drawing surface. It provides element‑level CRUD, headless screenshots, deterministic exports, and full MCP/REST integration, making it easy to generate, refine, and version‑control diagrams directly from AI workflows.
Related
- Dispatch
- Project
- Project
- Project
- Project