Whiteboard MCP

白板MCP

赋予你的AI绘画的能力。 架构图、流程图、线框、草图——从一条聊天消息中生成。

whiteboard-mcp.com --30秒后开始

](https://www.npmjs.com/package/whiteboard-mcp) 

白板MCP是 模型上下文协议 服务器，为像克劳德这样的人工智能代理提供了一个真正的画布。你的人工智能描述了要绘制的内容，你可以实时观看它的出现。

______________________________________________________________________

什么是白板MCP？

白板MCP将您的AI编码代理连接到交互式绘图画布。AI不是用文本描述图表或生成静态图像，而是直接在白板上绘制，您可以查看、交互和导出。

一个提示。一张图。无需手动绘制。

> Look at this codebase and draw me an architecture diagram

Claude: I'll analyze the codebase and create a diagram.
  ▸ open_canvas()
  ▸ create_flowchart(nodes: [...], edges: [...])
  ▸ take_screenshot()

Here's your architecture diagram showing the API Gateway
routing to Auth, Core, and Worker services.

画布将在浏览器中打开。AI绘制时，形状会实时显示。你可以平移、缩放、选择、移动、调整大小——这是一个完整的白板。

______________________________________________________________________

快速开始

最简单的方法

只需将此粘贴到您的AI助手（Claude Code、Cursor等）中：

为我安装白板mcp mcp服务器。您可以在以下网址找到安装说明https://whiteboard-mcp.com--将其添加到我的MCP配置中，以便我可以使用它。然后打开画布并为我绘制一个快速测试图。

你的AI应该处理剩下的事情。之后重新启动你的AI助手。

手动安装

有关编辑器特定配置的完整安装说明，请访问 whiteboard-mcp.com.

或者直接将白板MCP添加到编辑器的MCP配置中：

Claude Code

项目级别 --添加到 .mcp.json 在项目根目录中：

{
  "mcpServers": {
    "whiteboard": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

全球 --添加到 ~/.claude/settings.json 使其在所有项目中可用：

{
  "mcpServers": {
    "whiteboard": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

重新启动克劳德代码。然后问：

“打开白板，给我画一个登录过程的流程图”

Claude Desktop

编辑您的Claude Desktop配置：

• 雨衣： ~/Library/Application Support/Claude/claude_desktop_config.json
• 窗户： %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "whiteboard": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

Cursor

添加 .cursor/mcp.json 在项目根目录中：

{
  "mcpServers": {
    "whiteboard": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

VS Code (Copilot)

添加 .vscode/mcp.json 在项目根目录中：

{
  "servers": {
    "whiteboard": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

Windsurf

添加 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "whiteboard": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

Zed

添加到您的Zed settings.json 在...之下 context_servers:

{
  "context_servers": {
    "whiteboard": {
      "command": {
        "path": "npx",
        "args": ["-y", "whiteboard-mcp"]
      }
    }
  }
}

OpenCode

添加 opencode.json 在项目根目录中，或 ~/.config/opencode/opencode.json 全球：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "whiteboard-mcp": {
      "type": "local",
      "command": ["npx", "-y", "whiteboard-mcp"],
      "enabled": true
    }
  }
}

注： OpenCode使用 "mcp" （不是 "mcpServers")命令是一个数组。

Amp

添加 .amp/settings.json 在项目根目录中，或 ~/.config/amp/settings.json 全球：

{
  "amp.mcpServers": {
    "whiteboard-mcp": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

Roo Code

添加 .roo/mcp.json 在项目根目录中：

{
  "mcpServers": {
    "whiteboard": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

Cline

打开临床设置>MCP服务器>编辑全局MCP，然后添加：

{
  "mcpServers": {
    "whiteboard": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

Amazon Q Developer

添加 .amazonq/mcp.json 在项目根目录中，或 ~/.aws/amazonq/mcp.json 全球：

{
  "mcpServers": {
    "whiteboard": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

Any MCP Client

直接运行服务器：

npx -y whiteboard-mcp

或者配置您的MCP客户端以启动它 command: "npx" 和 args: ["-y", "whiteboard-mcp"] 使用stdio传输。

试试看

安装后，告诉你的AI：

• *“打开白板，给我画一个这个项目的架构图”*
• *“绘制显示用户注册过程的流程图”*
• *“画一只狗在阳光下嗅花”*
• *创建具有web客户端、API网关、身份验证服务和数据库的关系图*

______________________________________________________________________

特性

30+绘图工具

一个调用图

这 create_flowchart 该工具从简单的图形定义生成完整的自动布局图：

create_flowchart({
  nodes: [
    { id: "client", label: "Web Client" },
    { id: "api", label: "API Gateway" },
    { id: "db", label: "PostgreSQL", type: "ellipse" }
  ],
  edges: [
    { from: "client", to: "api", label: "HTTPS" },
    { from: "api", to: "db", label: "SQL" }
  ],
  layout: "TB"
})

一个工具调用。完整的图表。自动定位节点，标记箭头，适当间距。

智能箭头

connect_shapes 创建绑定到形状的箭头。移动形状时，箭头会跟随。AI用连接的组件构建图表，而不是断开的形状。

交互式画布

画布不仅适用于人工智能，你也可以使用它：

• 画 --矩形、椭圆、菱形、直线、箭头、徒手、文本工具
• 选择并移动 --点击选择，拖动移动
• 调整大小 --拖动角控点以调整任何元素的大小
• 平移和缩放 --滚动到平移，Ctrl+滚动到缩放，手动工具拖动平移
• 快照 --卡入网格和形状以实现精确定位
• 键盘快捷键 --V（选择）、R（矩形）、O（椭圆）、D（菱形）、L（直线）、A（箭头）、P（笔）、T（文本）、H（手）、删除、Ctrl+Z/Y

出口

• 便携式网络图形 --光栅导出以供共享和记录
• 可缩放矢量图形 --矢量导出，实现高质量打印和编辑
• JSON --保存并加载画布状态

偏好

• 画布背景颜色（包括深色模式）
• 网格可见性切换
• 对齐网格
• 捕捉形状

______________________________________________________________________

运作原理

白板MCP在您的计算机上作为本地MCP服务器运行。当您的AI代理呼叫时 open_canvas，它启动一个轻量级的web服务器，并在浏览器中打开画布。所有绘图都是通过MCP工具调用进行的——AI发送命令，画布通过WebSocket实时渲染命令。

AI Agent (Claude, Copilot, etc.)
    │
    │ MCP protocol (stdio)
    ▼
Whiteboard MCP Server
    │
    ├── HTTP server (serves canvas UI)
    ├── WebSocket (real-time state sync)
    │
    ▼
Browser Canvas (your whiteboard)

一切都在本地运行。没有云服务，没有数据离开你的机器，没有帐户要创建。

______________________________________________________________________

需求

• Node.js 18+ （适用于npx）
• 任何现代浏览器 （Chrome、Firefox、Edge、Safari）
• 与MCP兼容的AI代理 （克劳德代码、克劳德桌面、光标、VS代码、Windsurf、Zed等）

______________________________________________________________________

定价

白板MCP包括 14天免费试用 --无需信用卡。试用后，一次性支付购买许可证 $29.

购买许可证

激活您的许可证

购买后，将您的许可证密钥添加到MCP配置中：

{
  "mcpServers": {
    "whiteboard": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"],
      "env": {
        "WHITEBOARD_MCP_LICENSE_KEY": "YOUR-KEY-HERE"
      }
    }
  }
}

重新启动编辑器。试用横幅更改为 专业版.

______________________________________________________________________

支持

• 问题和功能请求：
• 电子邮件： whiteboard-mcp@fastmail.com
• 不一致： 可供许可证持有人使用——购买后提供加入链接

______________________________________________________________________

常见问题解答

Does it work with Claude Code?

对。Claude Code是主要目标。添加MCP配置后，Claude可以直接绘制图表、流程图和草图。

Does it work with Cursor / VS Code / Windsurf / Zed?

对。白板MCP可与支持模型上下文协议（MCP）的任何编辑器或AI代理配合使用。有关编辑器特定的配置，请参阅上面的安装说明。

Do I need to install anything besides Node.js?

号码 npx whiteboard-mcp 自动下载并运行所有内容。无需全局安装，无需构建步骤，无需管理依赖关系。

Does it send data to the cloud?

不，所有东西都在你的机器上本地运行。唯一的网络调用是许可证密钥验证（验证密钥的单个POST）。你的图纸、代码和数据永远不会离开你的电脑。

Can I use it without an AI agent?

画布有一个完整的交互式UI——您可以绘制形状、移动元素和手动导出。但真正的力量在于有一个人工智能来驱动它。这就是白板MCP的目的。

What happens after the trial?

14天后，这些工具仍然可以工作，但你会看到定期提醒购买许可证。只需29美元购买一次，即可永久拥有——包括终身更新。

Can I get a refund?

对。如果白板MCP不适合您，请发送电子邮件至whiteboard-mcp@fastmail.com30天内全额退款。

______________________________________________________________________

链接

• 网站
• 购买许可证
• 报告问题

______________________________________________________________________

*专为视觉思考的开发人员打造。*