mcp_excalidraw布局操作实战align、distribute、group、lock、duplicate完整教程与快照回滚【免费下载链接】mcp_excalidrawMCP server and Claude Code skill for Excalidraw — programmatic canvas toolkit to create, edit, and export diagrams via AI agents with real-time canvas sync.项目地址: https://gitcode.com/gh_mirrors/mc/mcp_excalidrawmcp_excalidraw 是面向 AI 编程代理的 Excalidraw MCP 服务器与 CLI 绘图工具包它让 AI 能在一块实时同步的画布上程序化地创建、编辑和导出图表。而真正让图表整齐划一的正是它的布局操作命令组arrange——一次调用即可完成align 对齐、distribute 均匀分布、group 分组、lock 锁定、duplicate 克隆再配合snapshot快照回滚改坏了也能一键还原。上图AI 代理通过 mcp_excalidraw 在实时 Excalidraw 画布上完成整张架构图4 倍速演示准备工作60秒启动本地 Excalidraw 画布唯一前提是Node.js ≥ 18无需 clone 仓库、无需配置# 启动画布几乎所有绘图命令都会自动拉起画布服务 npx -y mcp-excalidraw-server start然后在浏览器打开http://127.0.0.1:3000截图和 Mermaid 转换需要打开的浏览器标签页。如果你是 Claude Code、Cursor 等编程代理用户推荐先装一次代理技能之后直接用自然语言指挥画布即可npx -y mcp-excalidraw-server install-skill --dir 你的技能目录技能文档位于 skills/excalidraw-skill/SKILL.md完整的命令速查表见 skills/excalidraw-skill/references/cheatsheet.md。下面所有操作都基于arrange命令元素 ID 通过--ids a,b,c传入ID 可用query/describe命令查到。arrange 命令全景一张表看懂 6 种布局操作子命令作用最少元素数align六方向对齐2 个distribute水平/垂直均匀分布3 个group/ungroup分组 / 取消分组2 个 / 1 个组lock/unlock锁定 / 解锁元素1 个duplicate带偏移克隆1 个这些操作的实现核心在 src/core/geometry.tsCLI 参数解析见 src/cli/commands/arrange.ts。第一步align 一键对齐告别手动拖拽AI 画完的图框经常歪歪扭扭。align支持 6 个方向npx -y mcp-excalidraw-server arrange align --ids api,db,cache --to center--to left|center|right水平对齐。center会把所有元素的水平中心对齐到它们的平均中心线上--to top|middle|bottom垂直对齐。top以最高者为基准bottom以最低者为基准实战技巧架构图中同一层的模块先--to top再distribute水平均分两行命令就能排出一整行整齐的方块。第二步distribute 均匀分布间距自动算好distribute需要至少 3 个元素它会自动算出总跨度减去所有元素宽度后的剩余空间平均分成等距缝隙# 水平方向等间距 npx -y mcp-excalidraw-server arrange distribute --ids a,b,c,d --to horizontal # 垂直方向等间距适合分层布局 npx -y mcp-excalidraw-server arrange distribute --ids layer1,layer2,layer3 --to vertical注意元素会按当前 x或 y坐标自动排序后再分布所以不用担心传入顺序。第三步group / ungroup 分组管理# 分组返回新生成的 groupId npx -y mcp-excalidraw-server arrange group --ids api,db,cache # 按 groupId 解散只移除该组元素若属于多个组会保留其他组 npx -y mcp-excalidraw-server arrange ungroup --group groupId实现上有个小细节值得了解分组关系直接写在画布元素的groupIds字段上见 src/core/geometry.ts而不是存进程内存。这意味着画布服务重启后分组依然存在取消分组也能跨重启正常工作。第四步lock / unlock 锁定元素防止误改画布元素被锁定后无法被更新或删除适合保护标题、背景分区、图例npx -y mcp-excalidraw-server arrange lock --ids title,legend npx -y mcp-excalidraw-server arrange unlock --ids title,legend⚠️排错提示如果update或delete某个元素失败先查它是否被锁——query --filter lockedtrue可以列出所有锁定元素解锁后再操作。第五步duplicate 带偏移克隆批量复制布局# 默认向右下偏移 20,20 npx -y mcp-excalidraw-server arrange duplicate --ids box1,arrow1 # 自定义偏移量 npx -y mcp-excalidraw-server arrange duplicate --ids box1,arrow1 --offset 40,40克隆会生成全新 ID、全新创建时间坐标 原坐标 偏移。用它做复制整排节点 → 对齐 → 分布的组合拳是快速搭建重复结构比如多实例部署图的最快路径。第六步snapshot 快照回滚改坏了一键还原画布元素存于内存误操作后无法 CtrlZ用命名快照兜底# 大改之前先存一份 npx -y mcp-excalidraw-server snapshot save v1 # 看看存了哪些 npx -y mcp-excalidraw-server snapshot list # 不满意整体回滚到 v1 npx -y mcp-excalidraw-server snapshot restore v1回滚的实现是清空画布 严格按快照重建元素见 src/cli/commands/snapshot.ts所以恢复后元素坐标、分组、锁定状态全部原样还原。推荐的快照工作流来自官方技能文档危险操作前snapshot save name放心改用describe/screenshot评估效果不满意就snapshot restore name回滚甚至整张画布都画坏了也不怕snapshot save→clear --yes→ 重建或snapshot restore直接回去。常见报错速查退出码含义解法2参数用法错误按 stderr 提示的 Usage 修正参数3画布不可达显式执行start或检查EXPRESS_SERVER_URL4需要浏览器标签页打开http://127.0.0.1:3000再重试总结布局操作的最短路径对齐→arrange align --ids a,b,c --to center均分→arrange distribute --ids a,b,c --to horizontal≥3 个元素分组→arrange group/arrange ungroup分组关系持久在画布元素上保护→arrange lock/unlock复制→arrange duplicate --offset 40,40后悔药→snapshot save/restore掌握这一套组合拳你的 AI 代理就不只会画出图更能把图画得整齐、可维护、可回滚——这正是 mcp_excalidraw 相比一次性出图工具的精髓所在。【免费下载链接】mcp_excalidrawMCP server and Claude Code skill for Excalidraw — programmatic canvas toolkit to create, edit, and export diagrams via AI agents with real-time canvas sync.项目地址: https://gitcode.com/gh_mirrors/mc/mcp_excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考