Drawing Hand-Drawn Style Diagrams with AI Using Excalidraw MCP Server & Agent Skill

I found the open-source Excalidraw MCP Server & Agent Skill to be very useful for having AI draw hand-drawn style diagrams.

What It Can Do

For example, you can simply throw a prompt like this and it will draw a diagram for you.

claude code, codex, gemini cli の比較を作成

The AI interprets the prompt and generates a hand-drawn style diagram on the Excalidraw canvas. The generated diagram can be viewed in real time on localhost, and you can also manually edit it in the browser. The appeal is how smoothly you can collaborate — have the AI draw a rough draft, then make fine adjustments yourself.

Setup

1. Build

npm ci
npm run build

2. Start the Canvas Server

HOST=0.0.0.0 PORT=3010 npm run canvas

The default port is 3000, but since it often conflicts with other applications (such as Next.js), I use port 3010 instead.

3. Start the MCP Server

Start the MCP server in a separate terminal.

EXPRESS_SERVER_URL=http://localhost:3010 node dist/index.js

4. Register the MCP Server with Claude Code

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

Replace /absolute/path/to/mcp_excalidraw/ with the actual path. With ENABLE_CANVAS_SYNC=true, diagrams drawn by the AI are reflected on the browser canvas in real time.

Once registered, simply open http://localhost:3010 in your browser and send a prompt to Claude Code.

Watch Out for Port 3000 Conflicts

The default port 3000 is used by many frameworks such as Next.js and Rails as their development server default. If you plan to keep the Excalidraw Canvas server running persistently, changing to a different port like 3010 will help avoid conflicts.

Note that when changing the port, you need to specify the same port number for both the Canvas server and the MCP server.

Summary

With Excalidraw MCP Server & Agent Skill, you can have AI draw hand-drawn style diagrams with just a prompt and manually edit them right in the browser. The workflow of having AI sketch the outline and humans refine the details should prove invaluable for documentation and architecture design.

That’s all from the Gemba, reporting on Excalidraw MCP Server & Agent Skill for having AI draw hand-drawn style diagrams.