使用说明
排除MCP服务器
授权AI代理的MCP（模型上下文协议）服务器（如 克劳德, 光标, 帆板运动)创建、编辑和管理 白板绘图 直接在对话中使用图表。
为什么要开除？ 它的手绘美学和基于JSON的格式非常适合快速、可编程的图表绘制。该服务器将标准MCP客户端与本地Excalidraw实例连接起来，实现了人工智能驱动的视觉思维。
✨ 特性
| 特性 | 描述 |
|---|---|
| 🎨 实时预览 | 更改通过WebSocket立即显示在本地浏览器窗口中 |
| 📐 智能布局 | 自动计算文本宽度并将标签绑定到容器 |
| 🔄 多会话 | 在不同图表之间无缝切换 |
| 🧜 美人鱼支持 | 立即将Mermaid语法转换为Excalidraw图表 |
| 📦 导出选项 | 导出为PNG、SVG或JSON格式 |
| 🏗️ 模板 | 内置架构图模板 |
🚀 快速开始
您不需要克隆此仓库。只需配置您的MCP客户端：
克劳德代码（cc）
claude mcp add excalidraw -- npx -y @scofieldfree/excalidraw-mcp
Codex CLI
codex mcp add excalidraw -- npx -y @scofieldfree/excalidraw-mcp
光标/风帆
首选 设置>MCP → 添加新的MCP服务器:
| 字段 | 值 |
|---|---|
| 姓名 | excalidraw |
| 类型 | command |
| 指挥部 | npx -y @scofieldfree/excalidraw-mcp |
Cline（VS代码扩展）
打开临床设置并添加到MCP服务器：
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
GitHub Copilot
使用Copilot CLI交互式添加：
/mcp add
或者，创建或编辑 ~/.copilot/mcp-config.json:
{
"mcpServers": {
"excalidraw": {
"type": "local",
"command": "npx",
"tools": ["*"],
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
基罗
跟随 MCP服务器文档.添加到 .kiro/settings/mcp.json:
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
开源代码
opencode mcp add excalidraw -- npx -y @scofieldfree/excalidraw-mcp
VS Code
一键安装：
或通过CLI安装：
# For VS Code
code --add-mcp '{"name":"excalidraw","command":"npx","args":["-y","@scofieldfree/excalidraw-mcp"]}'
# For VS Code Insiders
code-insiders --add-mcp '{"name":"excalidraw","command":"npx","args":["-y","@scofieldfree/excalidraw-mcp"]}'
克劳德桌面版
添加到您的 claude_desktop_config.json:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - 视窗:
%APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"excalidraw": {
"command": "npx",
"args": ["-y", "@scofieldfree/excalidraw-mcp"]
}
}
}
🛠️ 可用工具
| 工具 | 说明 |
|---|---|
start_session |
启动浏览器预览并打开Excalidraw编辑器 |
add_elements |
在画布上添加形状、文本和箭头 |
update_element |
修改现有图元属性 |
delete_element |
从画布中删除元素 |
get_scene |
检索当前图表状态 |
create_from_mermaid |
将Mermaid语法转换为Excalidraw |
add_template_architecture |
添加预构建的架构图模板 |
create_diagram |
创建新图表或清除现有图表 |
export_diagram |
将图表导出为PNG、SVG或JSON |
list_sessions |
列出所有活动的图表会话 |
delete_diagram |
删除图表会话 |
💬 使用示例
示例1：创建一个简单的图表
你说：
“用三个框绘制流程图：输入→ 过程→ 输出“
AI使用：
start_session → add_elements (3 rectangles + 2 arrows)
示例2：将Mermaid转换为Excalidraw
你说：
“将此美人鱼图转换为Excalidraw：
graph LR: A[User] --> B[API Gateway] --> C[Service] --> D[(Database)]"
AI使用：
start_session → create_from_mermaid
示例3：架构图
你说：
“为微服务系统创建架构图”
AI使用：
start_session → add_template_architecture (or) add_elements with custom layout
🏗️ 建筑
┌─────────────────────────────────────────────────────────────┐
│ AI Agent (Claude/Cursor) │
└─────────────────────────┬───────────────────────────────────┘
│ MCP Protocol (JSON-RPC over stdio)
▼
┌─────────────────────────────────────────────────────────────┐
│ Excalidraw MCP Server │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ Tool Router │──│ State Store │──│ WebSocket Broadcast │ │
│ └─────────────┘ └─────────────┘ └──────────┬──────────┘ │
└────────────────────────────────────────────────┼────────────┘
│ WebSocket
▼
┌───────────────────────────────────┐
│ Browser (Excalidraw Editor) │
└───────────────────────────────────┘
🔧 发展
先决条件
- Node.js>=18
- pnpm>=9
设置
# Clone the repository
git clone https://github.com/Scofieldfree/excalidraw-mcp.git
cd excalidraw-mcp
# Install dependencies
pnpm install
# Start development server
pnpm dev
脚本
| 命令 | 描述 |
|---|---|
pnpm dev |
启动开发服务器（后端+前端） |
pnpm build |
为生产而建 |
pnpm typecheck |
运行TypeScript类型检查 |
pnpm lint |
运行ESLint |
pnpm release |
创建新的发布版本 |
📦 项目结构
excalidraw-mcp/
├── packages/
│ └── mcp-server/ # Core MCP server + Excalidraw frontend
│ ├── src/
│ │ ├── index.ts # Entry point
│ │ ├── state.ts # Session state management
│ │ ├── http-server.ts
│ │ └── tools/ # MCP tool implementations
│ └── web/ # Excalidraw React frontend
├── docs/ # Documentation
└── package.json # Workspace configuration
🐛 故障排除
端口已在使用中
服务器会自动找到从3100开始的可用端口。如果需要特定端口，请设置 PORT 环境变量。
浏览器无法打开
确保已配置默认浏览器。服务器使用 open 包来启动浏览器。
WebSocket连接失败
检查是否有防火墙或防病毒软件阻止了localhost上的WebSocket连接。
🤝 贡献
欢迎投稿！请阅读我们的 贡献指南 了解详情。
- 克隆该仓库
- 创建功能分支(
git checkout -b feature/amazing-feature) - 提交您的更改(
git commit -m 'feat: add amazing feature') - 推到分支(
git push origin feature/amazing-feature) - 打开拉取请求
📜 许可证
MIT© 无斯科菲尔德
