vue实现可配置流程图

最近项目中有一个需求，实现可配置的流程图。做之前也是调研了很多现成的插件，比如：go.js，G6，JSPlumb等，但是都不是太符合业务场景，都需要看文档，进行二次开发。最后决定还是自行开发吧，现在还没有开发完，这篇文章也当做是一个记录吧

先上图，看一下现在的效果。

v4qbtr7y77.png

因为传视频要冲会员，所以没有上传视频（太穷了。。。。）
根据后端返回的数据展示流程图，并且点击加号可以新增串行或并行的构建节点，同样，可以删除对应的节点及子任务

接下来，我会说一下我实现这个效果的思路
1.我们的数据格式是JenkinsFile，可以自行百度一下

例如： image.png
2.接下来就是数据的循环，div+css写出对应的样式
image.png

以上图为例：红色区域内为前端写死的，中间的数据是由后端返回的数据渲染出来的。所以我们要找出同样的内容作为一个div，并将它进行循环，上图中我把蓝色区域作为一个div，其中的
1.箭头和椭圆形的节点分别是icon和一个div组成的
2.利用伪类元素:before,:after写出前后面的两根线
3.通过判断下标，决定是否两个元素中间需要连线，途中黑色区域的线是通过svg来实现

以上就是当前效果的一个实现思路，后续会不断更新。