【4】基于svg，WEB在线流程图Joint.js组件开发

JointJS是一个开源的、基于JavaScript的图表库,可以用来创建静态图表、完全可交互的图表、 WEB在线流程图、应用程序

jointJS是一个基于svg的图形化工具库，在画布上画出支持拖动的svg图形，而且可以导出JSON，也能通过JSON配置导入直接生成图形。 可以基于jointJS开发出流程图、UML图以及图表等。由于jointJS是基于svg的，因此对svg有一定的了解会对jointJS的理解和使用有较大帮助。 由于jointJS是基于backbone的，因此有view（视图）和model（模型）的概念。 使用jointJS需要引入jQuery、backbone、lodash以及jointJS的包，可以通过script标签引入，也可以通过npm安装。

因为业务需求，主要需要满足：

1、初始化流程图

2、两种节点，一种“一进一出”，另外一种“一进多出”（未完美实现）

3、不同状态显示不同颜色连线（暂未实现）

4、可编辑，节点跟Link需要自定义

一开始，把官网上的初级、中级教程过一遍，大致了解他的构建流程（比如画布构建，Model、Graph、Link等概念，还有工具属性以及触发方法等），挑战才刚刚开始...

比较坑的一个点是：Rappid（商业收费，好贵）是高度集成了Joint.js的很多常见的业务场景。但是，Joint.js的demo，列举的例子，隐含了Rappid的混淆引用，就是还是基于Rappid进行展示，但是工具类外部属性（暂时发现）是经过混淆的（可能是为了引导大家去使用收费的Rappid）。文档也不够清晰，可能是我还没熟悉这种模式（套路）

 

迁移回本地环境，还没配置好，实现图稍后上传...如有问题可以跟我说吼，谢谢！恳请各位大大指正