Whiteboard MCP

Whiteboard MCP 是一款免费、开源的 Excalidraw 白板 MCP 服务，可在本地运行，甚至支持离线使用。你的编码 Agent 会在聊天旁边的实时白板上绘制图表，也能看到你画的内容。适用于 Claude Code、Codex、Cursor、Gemini CLI、VS Code、Windsurf、Devin 以及任何其他 MCP 客户端。

claude mcp add whiteboard --scope user -- npx -y @ansuman-shukla/whiteboard-mcp

_{需要 Node.js 20+。在使用 Codex、Cursor、Gemini CLI、VS Code 或其他 Agent？查看各 Agent 的配置命令 ↓}

_{与 Agent 玩点和方格：你画一条线，它看到你的走法并跟着画。}

功能

你可以用它做什么

理解架构

“典型的结账后端是如何工作的？在白板上画出来。” Agent 会逐步绘制，并突出显示它正在讲解的内容。你可以移动方框、圈出不确定的部分并留下备注。它会准确读取你的修改，并在白板上回答。

讲解流程

“这里的登录是如何工作的？” 箭头会随内容移动并保持连接，Agent 下次查看时会回答你的备注。

创作内容

“画一幅蒙娜丽莎，然后用铅笔润色。” 图形、手绘笔迹和画框都可以编辑。

更多尝试

• “在白板上讲解请求在这个代码仓库中的流转过程。”
• “一步步教我 TCP 握手的工作原理。”
• “画出我们的部署流水线，并标出单点故障。”
• “在白板上并排比较方案 A 和方案 B。”
• “我在白板上圈了个东西，看看。”

快速开始

添加到 Agent

需要 Node.js 20+。添加后，开始新的聊天：

# 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 和其他 JSON 配置（~/.cursor/mcp.json、Claude Desktop 的配置文件等）：

{ "mcpServers": { "whiteboard": { "command": "npx", "args": ["-y", "@ansuman-shukla/whiteboard-mcp"] } } }

OpenCode（opencode.json）：

{ "mcp": { "whiteboard": { "type": "local", "command": ["npx", "-y", "@ansuman-shukla/whiteboard-mcp"] } } }

不支持 MCP 的 Agent、项目级配置等更多信息：客户端配置。要在聊天旁边的标签页中使用白板，请安装 IDE 面板。内置的 技能 会教 Agent 何时绘图有帮助。

Whiteboard MCP 与 Excalidraw MCP

_{想在网页上的 Claude 或 ChatGPT 中快速绘制一次性图表？Excalidraw MCP 很适合。查看完整对比 →}

常见问题

有没有能在本地运行且支持离线使用的 Excalidraw MCP 服务？

有，Whiteboard MCP 就是。它会在 127.0.0.1 上运行一个小型守护进程，并提供捆绑字体的 Excalidraw 查看器。首次通过 npx 下载后，无需互联网、账户或 API 密钥。

如何让 Claude Code、Codex 或 Cursor 绘制图表？

使用上方为你的 Agent 提供的单行命令 添加 MCP 服务，开始新聊天并提出请求：“在白板上画出这个仓库如何处理请求。” Agent 会在聊天旁边的实时 Excalidraw 画板上逐步绘图。

Agent 能看到我在白板上画的内容吗？

能。每次查看时，它都会收到一份简短列表，说明你添加、移动或删除了哪些内容，以及你留下的任何备注。它还可以为画板截取 PNG 截图，以检查自己的布局。

它支持哪些 Agent 和编辑器？

任何 MCP 客户端：Claude Code、Claude Desktop、OpenAI Codex、Cursor、Gemini CLI、VS Code（Copilot Agent 模式）、Windsurf、Devin、OpenCode 等。不支持 MCP 的 Agent 可以使用普通的 whiteboard-mcp call 命令行。IDE 面板 可在 VS Code、Cursor、Windsurf 和 Devin Desktop 中的聊天旁边的选项卡内显示画板；在其他地方，画板会在浏览器中打开。

它能将 Mermaid 转换为 Excalidraw 图表或导出图表吗？

能。canvas_mermaid 可将 Mermaid（流程图、时序图……）转换为可编辑的手绘元素；canvas_export 可将画板保存为项目中的 .excalidraw 或 .png 文件。

画板会保存吗？之后能重新打开吗？

每个聊天都有自己的画板，并会保存到磁盘。之后的任何聊天（即使位于其他文件夹）都可以按名称重新打开画板，或根据画板上的文字查找；你还可以在保存的图库中保留冻结副本。参见画板。

它免费且私密吗？

是的。它采用 MIT 许可，无需许可证密钥，也没有付费层级。所有内容都保留在你的计算机上：守护进程只监听 127.0.0.1，每次 API 调用都需要用户专属令牌。参见安全性。

客户端设置 · 画板 · IDE 面板 · 工具与工作原理 · 配置 · 安全性 · 参与贡献
MIT 许可证 · 基于 Excalidraw 构建