★ v2.0 · 26 tools · canvas feedback loop

Give your AI agent
a whiteboard.

A drop-in agent skill — with MCP server fallback — that hands Claude Code, Cursor, Codex CLI & friends a live Excalidraw canvas, with element-level control, scene awareness, and a tight draw → look → adjust loop.

↓ one command, then you're done

Install the skill for Claude Code bash

git clone https://github.com/yctimlin/mcp_excalidraw.git
mkdir -p ~/.claude/skills
cp -R mcp_excalidraw/skills/excalidraw-skill ~/.claude/skills/excalidraw-skill

More install options Watch 90-sec demo

Works with Claude Code Claude Desktop Cursor Codex CLI OpenCode Antigravity

127.0.0.1:3000 · canvas.live AGENT DRAWING

✓ describe_scene

↻ snapshot saved

this canvas is the actual thing

↓ watch it move

One prompt. A whole architecture diagram.

The agent creates 26 elements, aligns them, labels them, and ships a shareable URL — drawing live, at 4× speed.

demo · 1m32s YouTube ↗

· prompt → 26 elements → aligned → labeled → shareable URL · 4× speed · raw video on YouTube

✱ how it works

Two servers. One canvas. A closed feedback loop.

Your agent connects over stdio (MCP), the MCP server keeps the live canvas in sync via REST + WebSocket. Element-level CRUD on one end, a real Excalidraw app on the other.

stateful

Persistent live canvas

Not one-shot prompt-to-image. Real canvas state agents can read, edit, snapshot, restore.

sees its work

describe_scene + screenshot

Two tools let the agent inspect the canvas as structured text or an image — then iterate.

concurrent

Multi-agent friendly

Several agents can draw on the same canvas concurrently. Useful for swarms and pair design.

✶ build with it

Six things you couldn't easily do before.

Element-level control + scene awareness unlocks workflows the one-shot generators can't reach.

spec → diagram

Architecture from a prompt

Drop a PRD or paragraph. Agent lays out services, queues, and arrows — aligned and grouped.

mermaid → real

Mermaid, but editable

create_from_mermaid converts your existing diagrams into native Excalidraw you can keep editing by hand.

draw → look → adjust

Iterative refinement

describe_scene + get_canvas_screenshot let the agent see what it drew — and try again until it's right.

✱ shareable

Ship a URL, not a screenshot

export_to_excalidraw_url encrypts the scene, uploads to excalidraw.com, returns a link teammates can open.

agent ↔ agent

Multi-agent canvases

Several agents concurrently editing the same persistent canvas. Useful for design swarms and reviewer/builder pairs.

↺ snapshot

Save / restore states

snapshot_scene names a canvas state. restore_snapshot rewinds. Time-travel for diagrams.

↓ install

Pick your client. Copy. Paste. Restart.

The agent skill is the recommended path — drop a folder into your skills directory, no config to edit. MCP server config is below if you prefer that route. Either way, start the canvas at 127.0.0.1:3000 first.

1 Start the canvas server (once, leave it running)

Local bash

git clone https://github.com/yctimlin/mcp_excalidraw.git
cd mcp_excalidraw
npm ci && npm run build
PORT=3000 npm run canvas

Docker bash

docker run -d -p 3000:3000 \
  --name mcp-excalidraw-canvas \
  ghcr.io/yctimlin/mcp_excalidraw-canvas:latest

2 Wire it into your agent

Claude Code · skill · ~/.claude/skills/ bash

git clone https://github.com/yctimlin/mcp_excalidraw.git
mkdir -p ~/.claude/skills
cp -R mcp_excalidraw/skills/excalidraw-skill ~/.claude/skills/excalidraw-skill

Invoke with /excalidraw-skill in Claude Code. No config edits, no restart needed.

Codex CLI · skill · ~/.codex/skills/ bash

git clone https://github.com/yctimlin/mcp_excalidraw.git
mkdir -p ~/.codex/skills
cp -R mcp_excalidraw/skills/excalidraw-skill ~/.codex/skills/excalidraw-skill

Claude Code · claude mcp add bash

claude mcp add excalidraw --scope user \
  -e EXPRESS_SERVER_URL=http://127.0.0.1:3000 \
  -e ENABLE_CANVAS_SYNC=true \
  -- node /absolute/path/to/mcp_excalidraw/dist/index.js

Claude Desktop · claude_desktop_config.json json

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["/absolute/path/to/mcp_excalidraw/dist/index.js"],
      "env": {
        "EXPRESS_SERVER_URL": "http://127.0.0.1:3000",
        "ENABLE_CANVAS_SYNC": "true"
      }
    }
  }
}

Cursor · .cursor/mcp.json json

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["/absolute/path/to/mcp_excalidraw/dist/index.js"],
      "env": {
        "EXPRESS_SERVER_URL": "http://127.0.0.1:3000",
        "ENABLE_CANVAS_SYNC": "true"
      }
    }
  }
}

Codex CLI · codex mcp add bash

codex mcp add excalidraw \
  --env EXPRESS_SERVER_URL=http://127.0.0.1:3000 \
  --env ENABLE_CANVAS_SYNC=true \
  -- node /absolute/path/to/mcp_excalidraw/dist/index.js

OpenCode · opencode.json json

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "excalidraw": {
      "type": "local",
      "command": ["node", "/absolute/path/to/mcp_excalidraw/dist/index.js"],
      "enabled": true,
      "environment": {
        "EXPRESS_SERVER_URL": "http://127.0.0.1:3000",
        "ENABLE_CANVAS_SYNC": "true"
      }
    }
  }
}

Docker · no clone, no build bash

# 1. Start the canvas server
docker run -d -p 3000:3000 \
  --name mcp-excalidraw-canvas \
  ghcr.io/yctimlin/mcp_excalidraw-canvas:latest

# 2. Wire up your MCP client to the docker MCP image
#    (example for Claude Desktop config — same shape for others)
{
  "mcpServers": {
    "excalidraw": {
      "command": "docker",
      "args": [
        "run", "-i", "--rm",
        "-e", "EXPRESS_SERVER_URL=http://host.docker.internal:3000",
        "-e", "ENABLE_CANVAS_SYNC=true",
        "ghcr.io/yctimlin/mcp_excalidraw:latest"
      ]
    }
  }
}

3 Restart your client

Quit and reopen Claude Code / Cursor / your CLI so it picks up the new skill or MCP server.

✓ Ask the agent to draw

Open 127.0.0.1:3000 in a browser. Then ask your agent things like "sketch the auth flow" and watch the canvas fill in.

Give your AI agent a whiteboard.