?官方網(wǎng)址：https://gooflow.xyz/

?GooFlow已轉(zhuǎn)為閉源項目，github上不再提供clone和下載。
?試用版請訪問gitee上的[項目主頁]( https://gitee.com/gooflow/gooflow )

特點

• 跨領(lǐng)域:流程圖設(shè)計器不止用在電信領(lǐng)域,在其它需要IT進行技術(shù)支持的領(lǐng)域中都有重大作用.
• 頁面頂部欄、左邊側(cè)邊欄均可自定義；
• 當(dāng)左邊的側(cè)邊欄設(shè)為不顯示時，為只讀狀態(tài)，此時的視圖區(qū)可當(dāng)作是一個查看器而非編輯器。
• 當(dāng)前最新版本已全部使用自定義的阿里巴巴矢量圖標(biāo)庫，可不再需要一張用來顯示圖標(biāo)樣式的圖片。
• 側(cè)邊工具欄除了基本和一些流程節(jié)點按鈕外，還自定義新的節(jié)點按鈕，自定義節(jié)點都可以有自有的圖標(biāo)、類型名稱，定義后在使用可可在工作區(qū)內(nèi)增加這些自定義節(jié)點。
• 頂部欄可顯示流程圖數(shù)據(jù)組的標(biāo)題，也可提供一些常用操作按鈕。
• 頂部欄的按鈕，除了撤銷、重做按鈕外，其余按鈕均可自定義點擊事件。
• 可畫直線、折線；折線還可以左右/上下移動其中段。
• 具有區(qū)域劃分功能，能讓用戶更直觀地了解哪些節(jié)點及其相互間的轉(zhuǎn)換，是屬于何種自定義區(qū)域內(nèi)的。
• 具有標(biāo)注功能，用橙紅色標(biāo)注某個結(jié)點或者轉(zhuǎn)換線，一般用在展示流程進度時。
• 能直接雙擊結(jié)點、連線、分組區(qū)域中的文字進行編輯
• 在對結(jié)點、連線、分組區(qū)域的各種編輯操作，如新增/刪除/修改名稱/重設(shè)樣式或大小/移動/標(biāo)注時，均可捕捉到事件，并觸發(fā)自定義事件，如果自定義事件執(zhí)行的方法返回FALSE，則會阻止操作。
• 具有操作事務(wù)序列控制功能，在工作區(qū)內(nèi)的各種有效操作都能記錄到一個棧中，然后可以進行撤銷（undo()）或重做（redo()），像典型的C/S軟件一樣。
• 能將流程圖以png圖片的格式導(dǎo)出并下載（純JS實現(xiàn)，但不支持IE9及以下瀏覽器）

一、入門使用：參考Jquery版API文檔

1、引入 js 和 css 文件?

<!-- 引入.css --><link rel="stylesheet" type="text/css" href="./static/plugins/gooFlow1.3/GooFlow.css"/><!-- 引入jQuery --><script src="static/jquery/jquery-3.3.1.js"></script><!-- 引入.js--> <script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFlow.js"></script> <!-- 可選(只讀編輯)，將流程圖左側(cè)工具欄可編輯--> <script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFunc.js"></script> <!-- 可選，將流程圖導(dǎo)出為圖片文件的擴展包 --> <script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFlow.export.js"></script> <!-- 可選，將流程圖輸出打印--> <script type="text/javascript" src="./static/plugins/gooFlow1.3/plugin/printThis.js"></script> <!-- 可選，將流程圖另存為PDF的擴展包--> <script type="text/javascript" src="./static/plugins/gooFlow1.3/plugin/html2canvas.js"></script> <script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFlow.color.js"></script> <script type="text/javascript" src="./static/plugins/gooFlow1.3/plugin/promise.min.js"></script>

?2、創(chuàng)建 div 設(shè)置參數(shù)（自定義參數(shù)）： width 百分比和像素都可以

<div id="flowsuperviseTemp" style="width:750px;min-height:700px;margin:5px;float:left"></div>

3、 js 中初始化 GooFlow 實例

?

<script type="text/javascript">var options = {//width:800,//height:500,//initLabelText: "流程圖",toolBtns: ["start round mix", "end round mix", "task", "node", "chat", "state", "plug", "join", "fork", "complex mix"],haveHead: true,headLabel: true,headBtns: ["new", "save", "undo", "redo", "reload", "print", "exportImg"],//如果haveHead=true，則定義HEAD區(qū)的按鈕haveTool: true,haveDashed: true,haveGroup: true,useOperStack: true};//設(shè)定左側(cè)工具欄中每一種節(jié)點或按鈕的說明文字GooFlow.prototype.remarks.toolBtns = {cursor: "選擇指針",direct: "連接線",dashed: "連接線（虛線）",start: "開始節(jié)點","end": "結(jié)束節(jié)點","task": "事項節(jié)點",group: "區(qū)塊編輯開關(guān)"};//設(shè)定頂部欄中每個按鈕的說明文字GooFlow.prototype.remarks.headBtns = {"new": "新建流程",open: "打開流程",save: "保存結(jié)果",undo: "撤銷",redo: "重做",reload: "重置流程",print: "打印流程圖",exportImg: "導(dǎo)出流程圖"};GooFlow.prototype.remarks.extendRight = "工作區(qū)向右擴展";GooFlow.prototype.remarks.extendBottom = "工作區(qū)向下擴展";var superviseDataStr; //全局模板初始流程圖數(shù)據(jù)字符串var flowsuperviseTemp; //GooFlow實例本身//模擬數(shù)據(jù)//superviseDataStr = "";$(document).ready(function () {flowsuperviseTemp = $.createGooFlow($("#flowsuperviseTemp"), options); //用jquery擴展方法初始化GooFlow//flowsuperviseTemp = GooFlow.init("#flowsuperviseTemp",options);; //用jquery擴展方法初始化GooFlowflowsuperviseTemp.setTitle("事項流程圖");//flowsuperviseTemp.loadData($.parseJSON(superviseDataStr)); //初始流程圖數(shù)據(jù)//組件獲得焦點事件flowsuperviseTemp.onItemFocus = function(id, type){alert(id + ":" + type);return true;}//組件失去焦點事件flowsuperviseTemp.onItemBlur=function(id, type){alert(id + ":" + type);return true;};//保存按鈕事件flowsuperviseTemp.onBtnSaveClick = function () {saveflowsupervise();}//組件刪除事件(默認(rèn)是取消的)flowsuperviseTemp.onItemDel=function(id,type){this.blurItem(); //取消所選節(jié)點/連線被選定的狀態(tài)。return true;}//重置按鈕事件flowsuperviseTemp.onFreshClick = function () {flowsuperviseTemp.clearData();//flowsuperviseTemp.loadData($.parseJSON(superviseDataStr));}//打印事件flowsuperviseTemp.onPrintClick = function () {flowsuperviseTemp.print(1);}//導(dǎo)出圖片事件var exportName = "事項流程圖";//flowsuperviseTemp.setNodeRemarks(GooFlow.prototype.remarks.toolBtns);flowsuperviseTemp.onExportImgClick = function () {flowsuperviseTemp.exportDiagram(exportName);}}); </script><script type="text/javascript">function saveflowsupervise() {var nodeCount = flowsuperviseTemp.$nodeCount; //節(jié)點數(shù)（包含開始結(jié)束節(jié)點數(shù)）if(nodeCount > 0){var flowchart = JSON.stringify(flowsuperviseTemp.exportData());alert(flowchart);}} </script>

?

?訪問結(jié)果： 可編輯自己的流程設(shè)計：（也可以初始化流程數(shù)據(jù)，注意數(shù)據(jù)格式）?

? ? ? ?

?

?

總結(jié)：多看 API 和網(wǎng)上的案例

?

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的GooFlow入门使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。