# @ansuman-shukla/whiteboard-mcp 中文文档 规范地址：https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/ 版本：0\.3\.5 npm 元数据更新时间：2026-10-30T16:44:11.715Z 中文译文更新时间：2026-11-06T23:26:07.937Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40ansuman-shukla/whiteboard-mcp 原文对照：https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/?lang=original 项目主页：https://github.com/ansuman-shukla/whiteboard-mcp#readme 源码仓库：https://github.com/ansuman-shukla/whiteboard-mcp ## 关键信息（来自 npm 元数据） - 包体积（解压后）：21.4 MB，391 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - Node.js 要求：\>=20 - 运行依赖：1 个 - 首次发布：2026-10-23T10:42:29.236Z - 最新版本发布：2026-10-30T16:44:11.440Z - 近 30 天下载量：2170（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：10（近 12 个月 10 个） ## 中文简介 本地, 离线 Excalidraw 白板 MCP 服务器: 您的编码代理( Claude Code, Codex, Cursor, 双子座 CLI, VS Code) 绘制图活在聊天旁并查看您提取回的内容 。 还有一个CLI. ## 安装 ```sh npm install @ansuman-shukla/whiteboard-mcp ``` 也可以使用：`pnpm add @ansuman-shukla/whiteboard-mcp`、`yarn add @ansuman-shukla/whiteboard-mcp`、`bun add @ansuman-shukla/whiteboard-mcp` ## README [![Whiteboard MCP: a live whiteboard your coding agent draws on. You draw back.](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/media/readme/hero-light.svg)](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/#readme-quick-start) [https://github.com/user-attachments/assets/197876d8-5620-4c1b-9bc3-332e0e7d5622](https://github.com/user-attachments/assets/197876d8-5620-4c1b-9bc3-332e0e7d5622) **白板 MCP** 自由且极具象征性 **白板 MCP** 运行的地方。 你的编码代理在聊天旁的活板上绘制出图表,并查看所画的回放. [每个代理安装一个命令QQ](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/#readme-add-it-to-your-agent) ## 特征 ![Why Whiteboard MCP: draws step by step, sees what you draw, right beside the chat, remembers boards, local and private, tiny (one runtime dependency, about 7 KB of tool schema per turn).](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/media/readme/features-light.svg) ## 你能用它做什么吗 ### 理解一个架构 ![An agent chat beside a live whiteboard: the agent draws a checkout architecture step by step, the human drags Postgres, circles the queue and sends a note asking what happens if the email worker is down, and the agent reads the changes and adds a dead-letter queue](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/media/architecture.gif) ### 解释一个流 ![The agent draws a login flow step by step, highlights the parts it explains, then answers a note left by the human](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/media/demo.gif) ### 游戏 ![Playing Dots and Boxes with a coding agent: the human draws a line on the board, the agent sees the move and plays back, until red wins 12 to 4](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/media/dots-and-boxes.gif) ### 做点什么 ![An agent paints the Mona Lisa on the board, then refines the sky, hair and dress with pencil strokes](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/media/mona-lisa.gif) ## 快开始 ![Get started in a minute: 1. Add it to your agent with one npx line. 2. Start a new chat. 3. Ask for a drawing.](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/media/readme/steps-light.svg) ### 添加到您的代理中 ```sh # 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"]}' ``` **光标、 Claude 桌面、 Windsurf 和其他 JSON 配置** (单位:千美元)`~/.cursor/mcp.json`,克洛德桌面的配置,...: ```json { "mcpServers": { "whiteboard": { "command": "npx", "args": ["-y", "@ansuman-shukla/whiteboard-mcp"] } } } ``` **打开代码** (单位:千美元)`opencode.json`: ```json { "mcp": { "whiteboard": { "type": "local", "command": ["npx", "-y", "@ansuman-shukla/whiteboard-mcp"] } } } ``` 没有 MCP 、 项目级别配置 等 的 代理 : [客户端设置](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/clients.md)。 。 。 . 捆绑起来 [技能](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/clients.md#the-skill-recommended-for-every-agent) 当绘制有帮助时,会教给代理. ## 白板 MCP vs Excalidraw MCP [![Whiteboard MCP vs Excalidraw MCP: Whiteboard MCP sees what you draw back as a short list of changes, screenshots its own board, edits one shape in place, keeps boards beyond the chat, works in any MCP client plus a CLI, and converts Mermaid. Excalidraw MCP has animated camera moves and zero install.](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/media/readme/compare-light.svg)](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/comparison.md) 想在克洛德或ChatGPT网上 快速的一次性图表吗? Excalidraw MCP是很好的这一点. [全面比较](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/comparison.md) [客户端设置](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/clients.md) • 妇女 [董事会](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/boards.md) • 妇女 [IDE 面板](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/ide-panel.md) • 妇女 [工具如何工作( How)](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/tools.md) • 妇女 [配置](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/configuration.md) • 妇女 [警卫](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/docs/security.md) • 妇女 [捐款](https://npmcn.com/package/%40ansuman-shukla/whiteboard-mcp/CONTRIBUTING.md) 麻省理工学院许可证 [缩略图](https://github.com/excalidraw/excalidraw) ## 常见问题 ### @ansuman-shukla/whiteboard-mcp 是什么？ 本地, 离线 Excalidraw 白板 MCP 服务器: 您的编码代理\( Claude Code, Codex, Cursor, 双子座 CLI, VS Code\) 绘制图活在聊天旁并查看您提取回的内容 。 还有一个CLI\. ### 如何安装 @ansuman-shukla/whiteboard-mcp？ 在项目目录运行 npm install @ansuman-shukla/whiteboard-mcp，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 whiteboard-mcp，可以用 npx whiteboard-mcp 直接运行。 ### @ansuman-shukla/whiteboard-mcp 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/ansuman-shukla\_\_whiteboard-mcp 是否存在。 ### @ansuman-shukla/whiteboard-mcp 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @ansuman-shukla/whiteboard-mcp 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @ansuman-shukla/whiteboard-mcp 可以商用吗？ @ansuman-shukla/whiteboard-mcp 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @ansuman-shukla/whiteboard-mcp 的下载量有多少？ 根据 npm 官方下载统计，@ansuman-shukla/whiteboard-mcp 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,170 次，日均约 72 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @ansuman-shukla/whiteboard-mcp 还在维护吗？ 最新版本 0\.3\.5 发布于 2026/10/31（8 天前）；至今共发布 10 个版本，其中过去 12 个月发布了 10 个；首次发布于 2026/10/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。