在 vue 的项目中，像这样的树状流程图应该怎么实现？

[csdoker]

项目是用 vue 搭建的，然后这个模块是个树状的流程图，要求支持拖动。。找了一圈貌似这样的插件很少？ 还是我没找对名字？这种效果有比较成熟的实现么，，自己写确实太苦手 https://image-static.segmentfault.com/902/667/902667311-5bc59fd26ed44_articlex

D3 ？ echarts ？ GoJS ？貌似都没现成的我这种效果的插件。。自己改的话感觉要改一大堆配置啊。。 目前找到的就 Antv 好像还比较靠谱 支持节点自定义 但是树形插件又不能拖拽 不知道能不能拓展然后实现我这种效果呢

[silencefent]

百度脑图内种有开源的吧？

[csdoker]

@silencefent 能引入到项目中使用？支持我这种魔改么

[jasonslyvia]

AntV 的 G6 了解一下 https://antv.alipay.com/zh-cn/g6/1.x/index.html

[jasonslyvia]

看起来 OP 已经了解过了。。。恕我眼拙

[csdoker]

@jasonslyvia 我现在就是在看 G6 但是限制还是非常多。。不过比起其他的 已经是我目前找到最靠谱的了。。现在难点就是 g6 的树形插件好像是不支持拖拽的定义的 很蛋疼

[silencefent]

https://github.com/fex-team/kityminder-editor

[csdoker]

@silencefent 大哥。。这个依赖 angularjs 啊 我要在 vue 中使用。。

[wangdashuai]

我刚好写过一个类似 vue 流程图绘制，仓库地址 https://github.com/ElemeFE/Hachart。
在线测试地址 https://wangdashuaihenshuai.github.io/demo/flow-chart/

[wangdashuai]

特点是可以自定义流程图样式。自动排版，不能自己拖动节点，不过解析和绘制是分开的，可以自己 fork 一个更改。

[csdoker]

@wangdashuai 谢谢~我先研究下，，

[csdoker]

@wangdashuai 意思是拖动需要我自己实现嘛，，

[csdoker]

@wangdashuai 我感觉这个东西的难点就是拖动的时候线条的绘制吧。。绘制树形图、拖动节点 我自己都会写 关键是拖动后线条的绘制。。。这个涉及太多数学计算了。。苦手

[AlphaTr]

jointjs 看看

[csdoker]

@AlphaTr 谢谢~

[xycool]

https://ej2.syncfusion.com/vue/demos/#/material/diagram/defaultfunctionality.html

[csdoker]

@xycool 谢谢~我研究下