随着项目中流程图被运营同学画的越来越复杂，出现了一个流程图上存在几百个节点的情况，流程图带来的业务逻辑可视化效果越来越不明显。虽然我们提供了分组、注释、记号等修饰性

背景 本文分析要点 辅助线生成逻辑 辅助线显示优化 辅助线吸附逻辑 效果展示 一.辅助线生成原理 首先我们要知道，辅助线就是为了方便对齐某个元素而生成的参考线，看上图 通常我们会对一个元素的 左、中、

写了一堆图形编辑器开发的文章，汇总一下，方便读者朋友在遇到问题时，快速找到对应文章，建议收藏。 如果没找到，或者有什么感兴趣的主题，可以公众号后台给我留言，我看看能不能写篇文章出来。 图形编辑器 如果

基于react的拖拽功能，有这么几个比较流行的库： react-dnd react-beautiful-dnd dnd-kit react-sortable-hoc React-dnd

介绍最近给流程图支持的魔法功能：正交线支持自定义拐点。 技术实现、数据存储、中间踩过的坑，总结分享。

本文主要介绍我们最近基于最短路径重构的流程图正交连线的实现思路及核心技术。 包括三个主要部分： 1. 思路说明、2.最短路径算法、3.算法执行过程

如果你用过流程图绘制工具，那么可能会好奇节点之间的连接线是如何计算出来的： 不要走开，跟随本文一起来探究一下吧~

其实有很多库已经实现了流程图，比如 jointjs，gojs，jsplumb 等等。可惜都不是免费的。 如果要做的简单呢，就用贝塞尔曲线就好了，只需要提供起点终点两个点的坐标，就能用简单的算法生成一个svg 的path了。这样算法网上应该找得到。 但是如果要用正交连线来实现，这…

本文中结合 A* 寻路算法实现了流程图正交连线，将依次从地图构建、拐点优化、区域优化、边界条件判定方面来实现。