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

日常开发中我们可能碰到流程图的需求，实现流程图的库有很多，如果我们想要实现一个简便的流程图可以使用konva库来实现，下面我们就来看一下具体的实现过程。

本系列从 Web 前端实战的角度，给大家分享介绍如何从零打造一个自己专属的绘图工具，实现流程图、拓扑图、脑图等类 Visio 的绘图工具。

业务需求 如上图所示，前端需要根据后端返回的数据动态形成树状结构图，以完成流程图展示。经过几天的了解和学习，最终决定使用G6-AntV。下面就如何使用及使用中遇到的问题进行总结。 代码实现 最终效果：

元素拖拽是一个比较典型的前端学习案例，需要对 JavaScript 的事件有一定的了解，我也是在最近的工作中才重新拾起了这块内容，通过在 Vue3 这种声明式编程风格的框架中把元素拖拽一次讲清楚。