GooFlow入门使用

 官方网址：https://gooflow.xyz/

 GooFlow已转为闭源项目，github上不再提供clone和下载。
 试用版请访问gitee上的[项目主页]( https://gitee.com/gooflow/gooflow )

特点

• 跨领域:流程图设计器不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.
• 页面顶部栏、左边侧边栏均可自定义；
• 当左边的侧边栏设为不显示时，为只读状态，此时的视图区可当作是一个查看器而非编辑器。
• 当前最新版本已全部使用自定义的阿里巴巴矢量图标库，可不再需要一张用来显示图标样式的图片。
• 侧边工具栏除了基本和一些流程节点按钮外，还自定义新的节点按钮，自定义节点都可以有自有的图标、类型名称，定义后在使用可可在工作区内增加这些自定义节点。
• 顶部栏可显示流程图数据组的标题，也可提供一些常用操作按钮。
• 顶部栏的按钮，除了撤销、重做按钮外，其余按钮均可自定义点击事件。
• 可画直线、折线；折线还可以左右/上下移动其中段。
• 具有区域划分功能，能让用户更直观地了解哪些节点及其相互间的转换，是属于何种自定义区域内的。
• 具有标注功能，用橙红色标注某个结点或者转换线，一般用在展示流程进度时。
• 能直接双击结点、连线、分组区域中的文字进行编辑
• 在对结点、连线、分组区域的各种编辑操作，如新增/删除/修改名称/重设样式或大小/移动/标注时，均可捕捉到事件，并触发自定义事件，如果自定义事件执行的方法返回FALSE，则会阻止操作。
• 具有操作事务序列控制功能，在工作区内的各种有效操作都能记录到一个栈中，然后可以进行撤销（undo()）或重做（redo()），像典型的C/S软件一样。
• 能将流程图以png图片的格式导出并下载（纯JS实现，但不支持IE9及以下浏览器）

一、入门使用：参考Jquery版API文档

1、引入 js 和 css 文件 

 2、创建 div 设置参数（自定义参数）： width 百分比和像素都可以

3、 js 中初始化 GooFlow 实例

 

 

 访问结果： 可编辑自己的流程设计：（也可以初始化流程数据，注意数据格式） 

       

 

 

总结：多看 API 和网上的案例