AI绘图新范式:让智能体拥有26种画图工具,实时协作绘制专业架构图

🌈

HeyAI人工智能 每天 1 分钟 · 掌握最实用的 AI 技巧与工具

1️⃣ 项目概览

Excalidraw MCP Server & Agent Skill 是一个为AI智能体提供完整画布控制能力的工具集。它解决了传统AI绘图工具”一次生成、无法修改”的痛点，让AI能够像人类设计师一样，通过26种精细化的工具对Excalidraw画布进行创建、查看、编辑和迭代优化。

核心价值：

• 程序化控制：AI可通过MCP协议精确控制每个图形元素
• 实时协作画布：支持多AI智能体在同一画布上协同绘图
• 闭环反馈：AI可”看到”自己绘制的画布（文字描述+截图），实现迭代优化
• 生产级工具：提供对齐、分布、分组、文件导入导出等专业设计功能

适用对象：

• 需要AI自动生成架构图、流程图的技术团队
• 希望将绘图能力集成到AI工作流的开发者
• 使用Claude、Cursor、Codex等MCP兼容客户端的用户

2️⃣ 核心能力与技术亮点

⚡ 核心技术点

• MCP服务器：通过标准Model Context Protocol与AI客户端通信，支持Claude Desktop、Cursor、Codex CLI等主流工具
• 双进程架构：画布服务器（Web UI + REST API + WebSocket） + MCP服务器（stdio通信）
• 实时同步：画布变更通过WebSocket实时推送到前端界面
• 智能体技能包：提供可移植的技能指令和辅助脚本，支持MCP和REST API双模式

🧠 与官方Excalidraw MCP的核心差异

🔐 v2.0 重大更新

• 13个新工具：总数达26个，涵盖元素CRUD、布局、场景感知、文件I/O、状态管理、视口控制、设计指南等7大类别
• 设计指南：read_diagram_guide提供最佳实践调色板、尺寸规则、布局模式和反模式，显著提升AI绘图质量
• 可分享链接：export_to_excalidraw_url将场景加密上传至excalidraw.com，生成任何人可打开的链接
• 视口控制：set_viewport支持自动适应内容、滚动到特定元素或手动缩放/偏移
• 快照功能：snapshot_scene/restore_snapshot支持保存和恢复命名画布状态

3️⃣ 快速上手指南

本地部署（推荐开发环境）

前置要求：Node.js >= 18, npm

1. 克隆并构建项目

git clone https://github.com/yctimlin/mcp_excalidraw.git
cd mcp_excalidraw
npm ci
npm run build

1. 启动画布服务器（终端1）

HOST=0.0.0.0 PORT=3000 npm run canvas

打开浏览器访问 http://localhost:3000

1. 启动MCP服务器（终端2）

EXPRESS_SERVER_URL=http://localhost:3000 node dist/index.js

Docker部署（推荐生产环境）

1. 启动画布服务器容器

docker run -d -p 3000:3000 --name mcp-excalidraw-canvas ghcr.io/yctimlin/mcp_excalidraw-canvas:latest

1. 配置MCP客户端连接（以Claude Desktop为例）

{
  "mcpServers": {
    "excalidraw": {
      "command": "docker",
      "args": [
        "run", "-i", "--rm",
        "-e", "EXPRESS_SERVER_URL=http://host.docker.internal:3000",
        "-e", "ENABLE_CANVAS_SYNC=true",
        "ghcr.io/yctimlin/mcp_excalidraw:latest"
      ]
    }
  }
}

配置其他MCP客户端

项目支持所有主流MCP客户端，配置详情见项目文档：

• Claude Desktop：编辑配置文件添加MCP服务器
• Claude Code：使用 claude mcp add 命令注册
• Cursor：在项目根目录创建 .cursor/mcp.json
• Codex CLI：使用 codex mcp add 命令注册
• OpenCode：编辑 opencode.json 配置文件
• Antigravity (Google)：编辑 mcp_config.json 配置文件

4️⃣ 示例 / 使用场景

场景一：AI绘制系统架构图

工作流程：

1. AI通过 create_element 创建多个矩形表示服务组件
2. 使用 align_elements 和 distribute_elements 自动对齐布局
3. 通过 create_element 添加箭头表示数据流
4. 调用 describe_scene 获取画布文字描述，检查布局合理性
5. 使用 get_canvas_screenshot 获取图像，确认视觉效果
6. 根据反馈使用 update_element 调整颜色、大小或位置
7. 最终通过 export_to_excalidraw_url 生成可分享链接

场景二：从Mermaid代码生成图表

# 通过MCP Inspector测试创建流程图
npx @modelcontextprotocol/inspector --cli \
  -e EXPRESS_SERVER_URL=http://localhost:3000 \
  -e ENABLE_CANVAS_SYNC=true -- \
  node dist/index.js --method tools/call --tool-name create_from_mermaid \
  --tool-arg 'mermaidCode=graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]'

场景三：团队协作绘图工作流

1. 导出画布状态

EXPRESS_SERVER_URL=http://localhost:3000 node skills/excalidraw-skill/scripts/export-elements.cjs --out architecture.elements.json

1. 提交到版本控制

git add architecture.elements.json
git commit -m "保存架构图状态"

1. 其他成员恢复画布

EXPRESS_SERVER_URL=http://localhost:3000 node skills/excalidraw-skill/scripts/import-elements.cjs --in architecture.elements.json --mode sync

5️⃣ 项目地址与文档

https://github.com/yctimlin/mcp_excalidraw

🌈

关注公众号：HeyAI人工智能 每天更新 AI 实用干货