图形移动箭头为何不断开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 画流程图时你是否遇到过这样的尴尬把矩形挪了一下连着的箭头却断在原位变成一根悬空的线 今天我们就来拆解mcp_excalidraw——一款为 AI Agent 提供画布能力的开源 MCP 图形工具。它内置了箭头边缘点计算与自动重路由算法让箭头在图形移动、对齐、分布时始终吸附在图形边缘永不脱钩。下面用最通俗的方式讲清楚这套机制是如何工作的。箭头不断开的三大关键机制要理解箭头为何不断开先要知道 mcp_excalidraw 里箭头和图形的关系分三层绑定关系 → 边缘点计算 → 自动重路由。三者环环相扣缺一不可。1️⃣ 箭头绑定用 ID 引用而不是坐标硬编码在传统工具里箭头只是起点坐标 终点坐标的一条线图形一动箭头自然就悬空了。而 mcp_excalidraw 的 Agent 友好格式里箭头记录的是start/end两个元素 ID 引用——相当于说我的起点连在那个矩形上而不是我的起点在 (100, 200)。创建箭头时服务端会调用批量绑定解析逻辑把 ID 引用翻译成真实的边缘坐标同时写回标准的startBinding/endBinding字段。这样导出的.excalidraw文件在 excalidraw.com 或 Obsidian 里打开时箭头同样具备吸附能力。相关代码在 src/core/expand-elements.ts导出时即使 Agent 创建时没写绑定也会从 ID 引用自动合成focus: 0, gap: 4的标准绑定。2️⃣ 边缘点计算射线与图形边界的数学求交箭头该从哪里出发、到哪里结束答案不是图形的中心而是中心连线与图形边缘的交点。这就是computeEdgePoint函数src/server.ts干的事。它针对三种常见图形各有一套解法图形算法思路直观理解矩形用|tanA × hw| ≤ hh判断射线先碰到左右边还是上下边斜率小→碰侧边斜率大→碰顶底边椭圆极坐标参数方程x cx a·cosθ, y cy b·sinθ沿连线方向角直接落在椭圆弧上菱形缩放因子1 / (|dx|/hw |dy|/hh)菱形四条边恰好是这条等式的外接边界算出交点后还会沿连线方向回退 8px常量GAP 8让箭头起点离开图形边缘一小段距离——否则箭头尖会插进图形内部视觉上很别扭。这套完整流程见 resolveArrowBindings。3️⃣ 自动重路由图形一动箭头自动跟着走这才是不断开的灵魂。在 src/server.ts 中rerouteBoundArrows函数会扫描画布上所有绑定到被移动元素的箭头逐个重新执行上面的边缘点计算把x、y和points坐标整体刷新并广播给所有连接的客户端。触发时机也很关键只要更新请求里修改了x、y、width、height中的任何一个src/server.ts服务端就会自动触发重路由。也就是说无论是 AI Agent 手动update还是批量align / distribute布局命令src/core/geometry.ts移动了一排图形箭头的重算都会自动发生——对用户完全无感。一次移动背后的完整链路把三步串起来一次移动矩形操作在 mcp_excalidraw 内部是这样流转的接收更新→ REST 端点检测到x/y/width/height变化重算箭头→rerouteBoundArrows找到所有连到该矩形的箭头重新求交→ 每个箭头重新跑一遍computeEdgePoint得到新的边缘点实时广播→ 通过 WebSocket 把更新后的箭头推给浏览器画布整个过程在毫秒级完成你看到的就是箭头贴着图形顺滑地移动从不掉线 ✨导出场景让第三方工具里箭头依然粘得住光在本地不断开还不够。mcp_excalidraw 导出的文件经常要在 excalidraw.com 或 Obsidian Excalidraw 插件里二次打开。因此在导出环节src/core/expand-elements.ts还会做两件事补全反向引用把箭头加进图形boundElements列表双向绑定并去重防止多次导出重复追加合成缺失绑定Agent 创建的箭头若缺少startBinding/endBinding就从start/end引用现场合成这一步保证了离开 mcp_excalidraw 环境后箭头依旧跟着图形走。总结简单三句话记住这套算法绑定靠 ID 引用不靠写死的坐标端点靠数学求交矩形用斜率判边、椭圆用参数方程、菱形用缩放因子移动即重算任何几何变化自动触发rerouteBoundArrows全量刷新理解了这三点你就掌握了 mcp_excalidraw 让 AI 画图箭头永不掉线的全部秘密。下次让 AI Agent 重排整张流程图时尽可以放心——每一根箭头都会自己找到该去的位置 【免费下载链接】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），仅供参考 图形移动箭头为何不断开？mcp_excalidraw箭头边缘点计算与自动重路由算法详解
图形移动箭头为何不断开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 画流程图时你是否遇到过这样的尴尬把矩形挪了一下连着的箭头却断在原位变成一根悬空的线 今天我们就来拆解mcp_excalidraw——一款为 AI Agent 提供画布能力的开源 MCP 图形工具。它内置了箭头边缘点计算与自动重路由算法让箭头在图形移动、对齐、分布时始终吸附在图形边缘永不脱钩。下面用最通俗的方式讲清楚这套机制是如何工作的。箭头不断开的三大关键机制要理解箭头为何不断开先要知道 mcp_excalidraw 里箭头和图形的关系分三层绑定关系 → 边缘点计算 → 自动重路由。三者环环相扣缺一不可。1️⃣ 箭头绑定用 ID 引用而不是坐标硬编码在传统工具里箭头只是起点坐标 终点坐标的一条线图形一动箭头自然就悬空了。而 mcp_excalidraw 的 Agent 友好格式里箭头记录的是start/end两个元素 ID 引用——相当于说我的起点连在那个矩形上而不是我的起点在 (100, 200)。创建箭头时服务端会调用批量绑定解析逻辑把 ID 引用翻译成真实的边缘坐标同时写回标准的startBinding/endBinding字段。这样导出的.excalidraw文件在 excalidraw.com 或 Obsidian 里打开时箭头同样具备吸附能力。相关代码在 src/core/expand-elements.ts导出时即使 Agent 创建时没写绑定也会从 ID 引用自动合成focus: 0, gap: 4的标准绑定。2️⃣ 边缘点计算射线与图形边界的数学求交箭头该从哪里出发、到哪里结束答案不是图形的中心而是中心连线与图形边缘的交点。这就是computeEdgePoint函数src/server.ts干的事。它针对三种常见图形各有一套解法图形算法思路直观理解矩形用|tanA × hw| ≤ hh判断射线先碰到左右边还是上下边斜率小→碰侧边斜率大→碰顶底边椭圆极坐标参数方程x cx a·cosθ, y cy b·sinθ沿连线方向角直接落在椭圆弧上菱形缩放因子1 / (|dx|/hw |dy|/hh)菱形四条边恰好是这条等式的外接边界算出交点后还会沿连线方向回退 8px常量GAP 8让箭头起点离开图形边缘一小段距离——否则箭头尖会插进图形内部视觉上很别扭。这套完整流程见 resolveArrowBindings。3️⃣ 自动重路由图形一动箭头自动跟着走这才是不断开的灵魂。在 src/server.ts 中rerouteBoundArrows函数会扫描画布上所有绑定到被移动元素的箭头逐个重新执行上面的边缘点计算把x、y和points坐标整体刷新并广播给所有连接的客户端。触发时机也很关键只要更新请求里修改了x、y、width、height中的任何一个src/server.ts服务端就会自动触发重路由。也就是说无论是 AI Agent 手动update还是批量align / distribute布局命令src/core/geometry.ts移动了一排图形箭头的重算都会自动发生——对用户完全无感。一次移动背后的完整链路把三步串起来一次移动矩形操作在 mcp_excalidraw 内部是这样流转的接收更新→ REST 端点检测到x/y/width/height变化重算箭头→rerouteBoundArrows找到所有连到该矩形的箭头重新求交→ 每个箭头重新跑一遍computeEdgePoint得到新的边缘点实时广播→ 通过 WebSocket 把更新后的箭头推给浏览器画布整个过程在毫秒级完成你看到的就是箭头贴着图形顺滑地移动从不掉线 ✨导出场景让第三方工具里箭头依然粘得住光在本地不断开还不够。mcp_excalidraw 导出的文件经常要在 excalidraw.com 或 Obsidian Excalidraw 插件里二次打开。因此在导出环节src/core/expand-elements.ts还会做两件事补全反向引用把箭头加进图形boundElements列表双向绑定并去重防止多次导出重复追加合成缺失绑定Agent 创建的箭头若缺少startBinding/endBinding就从start/end引用现场合成这一步保证了离开 mcp_excalidraw 环境后箭头依旧跟着图形走。总结简单三句话记住这套算法绑定靠 ID 引用不靠写死的坐标端点靠数学求交矩形用斜率判边、椭圆用参数方程、菱形用缩放因子移动即重算任何几何变化自动触发rerouteBoundArrows全量刷新理解了这三点你就掌握了 mcp_excalidraw 让 AI 画图箭头永不掉线的全部秘密。下次让 AI Agent 重排整张流程图时尽可以放心——每一根箭头都会自己找到该去的位置 【免费下载链接】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），仅供参考