用途:在创建或修改 SVG 工作流图后,验证连线是否交叉、路径是否穿过节点、是否存在共享端点或重叠段,并评估路由质量,以产出无交叉、清晰的图表布局。
主要能力:提供五类检测方法。一是参数化线段求交,解析 SVG 路径为线段,用参数方程判断两线段是否相交(0.01 < t < 0.99 且 0.01 < u < 0.99),排除端点连接;二是节点-路径邻近分析,将路径分解为水平、垂直、对角线各段,逐段与节点包围盒比对,识别穿过节点内部的线段;三是路径重叠与共享点分析,检查共享端点、重叠线段和汇聚点;四是路由质量分析,检查共享起点、偏心连接、多余线段和次优路由;五是渲染截图视觉检查,捕捉抗锯齿、描边宽度、箭头标记等渲染层面的视觉问题。
使用方式:可运行 Python 检测脚本,命令为 python3 .github/skills/detect-diagram-crossings/detect_crossings.py website/ai-workflow.html;也可运行 JavaScript 扩展验证脚本,命令为 node .github/skills/detect-diagram-crossings/detect_all.js website/ai-workflow.html,后者需 Node.js 与 jsdom,安装命令为 cd .github/skills/detect-diagram-crossings && npm install jsdom。脚本退出码 0 表示无错误,1 表示检测到错误。修改图表后建议重跑两个脚本验证修复。
适用场景:验证图表布局、提交前的质量保证、排查用户报告的交叉/重叠问题、比较多个布局版本。
限制:可能漏检非数学相交的视觉重叠;不处理描边宽度和箭头标记;要求 SVG 路径数据格式良好;端点容差可调整以减少误报。手动检测需先建立完整节点清单,逐段检查每个节点,并报告确切交点坐标与涉及的路径和具体线段。