vue根据树状结构生成流程图

奉劝大家有选择就不要去外包公司😪

网上的流程图组件是多，但都是通过流程设计器生成的数据。这次的需求是是直接展示流程
开始我用的是vue-suoer-flow，根据结构每个对象计算坐标点。实现了但是代码很乱。。。难受
多方搜索找到了一个纯代码写的组件，
源地址在这：https://blog.csdn.net/LEGLO_/article/details/108240626
但内容不能自定义，我改造了下。
效果如图

组件示例

组件调用
id 是唯一且必须，方便又快捷

问题又来了：需求有个反着显示的流程图，如下。
想破脑袋都不知道怎么写😂
有思路的大佬支点招