excalidraw-mcp

name	excalidraw-mcp
description	Create, edit, and export live Excalidraw diagrams using mcp-excalidraw-server (MCP tools + canvas REST API). Use when an agent needs to draw/lay out diagrams, convert Mermaid to Excalidraw, query/update/delete elements, or export/import elements from a running canvas server (EXPRESS_SERVER_URL, default http://localhost:3100).

Excalidraw MCP

Overview

Create and refine diagrams on a live Excalidraw canvas via MCP tools, with helper scripts for export/import workflows.

Quick Start

• Start the canvas server on port 3100 first — from the mcp_excalidraw project run PORT=3100 npm run canvas. The MCP server (~/.claude/mcp.json → EXPRESS_SERVER_URL) and every scripts/*.cjs default to http://localhost:3100; override with EXPRESS_SERVER_URL to point elsewhere. (Port 3100 avoids the 3000/3002 collisions with the Fourth Connect / NorthStar dev servers.)
• Use MCP tools for interactive diagram edits; use scripts/*.cjs for file-ish workflows (export/import/clear/health).
• For detailed endpoint/tool reference, read references/cheatsheet.md.

Workflow: Draw A Diagram (From Empty Canvas)

1. Confirm canvas is up:
   • Run node scripts/healthcheck.cjs (or GET /health).
2. Optional: clear the canvas:
   • Run node scripts/clear-canvas.cjs.
3. Create shapes first (rectangles/diamonds/ellipses), using create_element.
4. Put text on shapes by setting the shape’s text field (do not create a separate text element unless you need standalone text).
5. Create arrows/lines after both endpoints exist.
6. Use align_elements / distribute_elements after rough placement; group only after layout stabilizes.

Workflow: Refine An Existing Diagram

1. Discover what’s already there:
   • Prefer get_resource with resource: "elements" or query_elements.
2. Identify targets by stable signals (id, type, label text), not by exact x/y.
3. Update with update_element (move/resize/colors/text) or delete with delete_element.
4. If deletes/updates “don’t work”, check:
   • You’re pointing to the right EXPRESS_SERVER_URL.
   • The element id exists on the canvas (use get_resource / GET /api/elements/:id).
   • The element isn’t locked (use unlock_elements first).

Workflow: Export / Import (Repository-Friendly)

• Export current elements to a JSON file:
  • node scripts/export-elements.cjs --out diagram.elements.json
• Import elements (append) using batch create:
  • node scripts/import-elements.cjs --in diagram.elements.json --mode batch
• Import elements (overwrite canvas) using sync:
  • node scripts/import-elements.cjs --in diagram.elements.json --mode sync

Notes:

• --mode sync clears the canvas and then writes the provided elements (good for “make canvas match this file”).
• If you want stable ids across updates, keep ids in the exported JSON; if you want fresh ids, regenerate before importing.

Workflow: CRUD Smoke Test (Create → Update → Delete)

1. Clear:
   • node scripts/clear-canvas.cjs
2. Create a large visible rectangle + label:
   • Use node scripts/create-element.cjs twice (rectangle + text).
3. Update:
   • Move the rectangle with node scripts/update-element.cjs.
4. Delete:
   • Remove both with node scripts/delete-element.cjs.

References

• references/cheatsheet.md: MCP tool list + REST API endpoints + payload shapes