Whiteboard MCP gives a coding agent a local, live Excalidraw-style whiteboard beside the chat to draw, inspect human edits, and persist reusable boards.
Open/show a chat's board, reuse another chat's board, load saved boards, clear/retitle boards.
Read the scene as summary/JSON plus human changes and notes since last read.
Draw/update shapes, text, arrows/lines, frames, freedraw; bind arrows; style, group, lock, label elements.
Delete elements or clear the board.
Focus/zoom/highlight elements to explain.
Screenshot the board as PNG.
Convert Mermaid diagrams into editable elements.
Export boards as .excalidraw JSON or PNG.
Save/search reusable board copies across chats/folders.
Read a guide for effective canvas explanation.
Allows converting Mermaid diagram syntax into editable hand-drawn elements on the whiteboard, enabling the agent to create sequence diagrams and flowcharts from Mermaid definitions.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@whiteboard-mcp sketch the login flow step by step on the whiteboard"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
https://github.com/user-attachments/assets/197876d8-5620-4c1b-9bc3-332e0e7d5622
Related MCP server: cnvs-whiteboard
# Claude Code
claude mcp add whiteboard --scope user -- npx -y @ansuman-shukla/whiteboard-mcp
# Codex CLI
codex mcp add whiteboard -- npx -y @ansuman-shukla/whiteboard-mcp
# Gemini CLI
gemini mcp add --scope user whiteboard npx -y @ansuman-shukla/whiteboard-mcp
# Devin CLI
devin mcp add whiteboard --scope user -- npx -y @ansuman-shukla/whiteboard-mcp
# VS Code
code --add-mcp '{"name":"whiteboard","command":"npx","args":["-y","@ansuman-shukla/whiteboard-mcp"]}'Cursor, Claude Desktop, Windsurf and other JSON configs (~/.cursor/mcp.json, Claude Desktop's config, …):
{ "mcpServers": { "whiteboard": { "command": "npx", "args": ["-y", "@ansuman-shukla/whiteboard-mcp"] } } }OpenCode (opencode.json):
{ "mcp": { "whiteboard": { "type": "local", "command": ["npx", "-y", "@ansuman-shukla/whiteboard-mcp"] } } }Agents without MCP, project-level configs and more: client setup. The bundled skill teaches the agent when a drawing helps.
Delete elements by id (arrows bound to them are detached), or everything with all:true.
Inputs: all, ids.
Create or update elements. Re-using an id updates only the given fields. Arrows bind with from/to element ids.
Inputs: elements (required).
Save the board to a file: .excalidraw JSON (default) or PNG. Relative paths resolve against the workspace.
Inputs: path (required), format.
Scroll/zoom the human's view to elements (whole scene if no ids); highlight pulses them. Use it to point while explaining.
Inputs: ids, zoom, highlight.
How to explain well on this canvas: layout, sizes, colours, the live explain loop. Read once before your first drawing.
Inputs: no named parameters.
Convert a Mermaid definition (flowchart, sequence, class…) into editable elements on the board.
Inputs: definition (required), x, y.
Show this chat's own whiteboard to the human beside the chat. Name it with title. To reuse another chat's drawing (any folder), pass board.
Inputs: open, board, fresh, saved, +1 more.
Read the board: scene description (or JSON), then what the human changed and noted since your last read.
Inputs: ids, format.
Save a frozen copy of this board to the user's library so any later chat can find it with canvas_search. The same name again overwrites it.
Inputs: name.
PNG of the board as the human sees it, to check your layout.
Inputs: ids, dark.
Find boards of every folder (this one first) by name or text: other chats' live boards and saved copies. Open with canvas_open {board} or {saved}.
Inputs: query.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 11 tools
Each tool has a clearly distinct role in the whiteboard workflow: opening, reading, drawing, deleting, focusing, screenshotting, Mermaid import, exporting, saving, searching, and guidance. The potentially overlapping pairs (read vs. screenshot, save vs. export, search vs. open) are explicitly differentiated by their descriptions. An agent should be able to select the right tool without confusion.
All tool names use the same snake_case canvas_ prefix and a short action/object suffix. Although some suffixes are nouns (screenshot, mermaid, guide), the overall pattern is highly predictable. There is no mixing of camelCase, inconsistent prefixes, or chaotic verb styles.
The server exposes 11 tools, which is well within the appropriate range for a feature-rich interactive whiteboard. Each tool appears to earn its place by covering a distinct part of the drawing, sharing, and explanation workflow. The set does not feel bloated or thin.
The tool surface covers the full lifecycle: find/open a board, read its state, draw/update/delete elements, import Mermaid, focus attention, screenshot for layout verification, export to file, save to a library, and search saved/other boards. Guidance is provided for the human-facing explanation workflow. No obvious CRUD or workflow gaps remain.
Online whiteboard your AI agent draws on: live shared canvases, solo or with your team.
Give Claude a whiteboard: notes, links, images and diagrams on a board you both see and edit.
Create, read and live-edit visual boards, Kanban plans, Gantt timelines and diagrams with AI agents.
A collaborative whiteboard your AI assistant can read, fill and show live, with changes you review.