Excalidraw Skill

Programmatic control over Excalidraw canvases with proper iterative refinement built in. Works via MCP tools or a REST fallback, letting agents create diagrams, check their own work with screenshots, and fix spacing or overlap issues before moving on. The mandatory quality gate is the real value here: it forces you to verify text isn't truncated, arrows don't cross randomly, and elements have actual breathing room. Ships with coordinate planning guides and arrow routing patterns. You'll need the canvas server running locally, but once it's up you can script architecture diagrams, export to PNG or SVG, and manage snapshots. Best for agents that need to draw and iterate, not just dump JSON and hope.

skills.sh installs: 1.6K
GitHub stars: 459
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add lingzhi227/agent-research-skills --skill excalidraw-skill --agent claude-code

Installs into .claude/skills of the current project.

Files

Excalidraw Skill

Step 0: Detect Connection Mode

Before doing anything, determine which mode is available. Run these checks in order:

Check 1: MCP Server (Best experience)

mcp-cli tools | grep excalidraw

If you see tools like excalidraw/batch_create_elements → use MCP mode. Call MCP tools directly.

Check 2: REST API (Fallback — works without MCP server)

curl -s http://localhost:3000/health

If you get {"status":"ok"} → use REST API mode. Use HTTP endpoints (curl / fetch) from the cheatsheet.

Check 3: Nothing works → Guide user to install

If neither works, tell the user:

The Excalidraw canvas server is not running. To set up:
Clone: git clone https://github.com/yctimlin/mcp_excalidraw && cd mcp_excalidraw

Build: npm ci && npm run build

Start canvas: HOST=0.0.0.0 PORT=3000 npm run canvas

Open http://localhost:3000 in a browser
(Recommended) Install the MCP server for the best experience:
claude mcp add excalidraw -s user -e EXPRESS_SERVER_URL=http://localhost:3000 -- node /path/to/mcp_excalidraw/dist/index.js