这个是一种脑图或者说树图的展示，从实现来说，其实也没有想象中那么麻烦

1. 按一定规则排列出最高总高度（合适的间隔），并合理的分布排列（上下分布均匀）组件
2. 按一定规则根据层级（合适的间隔）得出总的宽度，并合理分布排列各组件
3. 在1、2确定情况下，进行连线计算，因为需要连接的对象位置已经确定，所以连续规则的确定也很明确即从需连接对象（框）的上下中点（x1，y1）和（x2，y2）向二者中间水平引线到二者水平位置中点即线段(x1,y1)((x1+x2)/2,y1) 与 (x2,y2)( (x1+x2)/2,y2),然后连接画出线段((x1+x2)/2,y1)( (x1+x2)/2,y2)即可。因为这里每个框的位置很确定，所以这里（x1，y1）和（x2，y2）在完成1和2步后就是确定的，则每个线段也是确定的。

可以尝试使用g6, 通过自定义图形和线，应该可以实现上面效果。

flowchart-vue

DOM是这样的
第一列默认补全