因为公司项目需求,要画出相关业务的流程图,以便客户了解自己身处何处
搜索框输入 “前端流程图插件”,查了很多资料,总结一下有以下几种
flow-chart
代码写法繁琐,不是json就可以解决,效果也比较丑,PASS
darge-d3
效果图
下载里面的demo,改一下json就可以了
g.setEdge("NEW",{ label: "后台接口自动"});
g.setEdge("NEW",{ label: "后台接口自动" });
g.setEdge("NEW",{ label: "用户取消订单" });
g.setEdge("SUBMITTED",{ label: "用户超过48小时未支付,\n系统自动取消"});
g.setEdge("ABOLISHED",{ label: "已删除" });
g.setEdge("CANCELED",{ label: "已删除"});
g.setEdge("FAILED",{ label: "后台接口自动" });
g.setEdge("SUBMITTED",{ label: "用户支付" });
g.setEdge("FINISHED",{ label: "用户退款" });
g.setEdge("DELIVER",{ label: "交付完成" });
g.setEdge("REFUNDING","REFUNDED",{ label: "已退款" });
g.setEdge("REFUNDED",{ label: "已删除" });
g.setEdge("DELIVER",{ label: "用户退款" });
g.setEdge("FAILED",{ label: "用户取消订单" });
不满意的地方:画出来的图是垂直方向的,我要的是水平方向,PASS
gojs
GoJS是一个实现交互类图表(比如流程图,树图,关系图,力导图等等)的JS库。本文将介绍GoJs的精华部分。 因为GoJS依赖于HTML5,所以请保证您的浏览器版本支持HTML5,当然还要加载这个库。
可以通过npm install gojs -save
安装
效果图
看里面的demo我自己包装了一下
用户提交资料 步骤
下一步等待
不满意的地方:
- 免费版gojs是有水印的,百度搜索“gojs如何去水印”有一堆答案,我就不写了。
- 因为要自己手动去掉水印,所以我只能手动下载go.js放在我自己的组件目录下,但是这个文件太大了,800+KB,npm run dev 的时候停在这里停了好久。有时候还爆出“......maximun ....500KB”的错误,我也不知道是什么原因,不知道有什么方法,有的话麻烦通知我。
- 代码写法有点太繁琐
这是我自己包装的代码地址:
jointjs
相比Dagre-D3和jsPlumb,JointJS的API很详细,代码量少,连接线有多种选择,封装了多种常用的形状,而且能画的图很多,官方也给了一些demo可以参考。
效果图
可以通过npm install jointjs -save
安装
参照了很多demo和文档,用的是矩形,但是可以设置圆角的度数变成椭圆形,其他形状我就无力了。