BPM系統如何使用jQuery動態顯示流程圖之一(含範例) --- 使用flowchart.js

作者: Fred F.M. Wang (FW知識瑣記) 日期: 2021-6-11

開發一個業務流程管理系統(BPM)需要透過圖形化的方式呈現流程或建立流程，如何使用Javascript動態呈現流程圖呢? 

下面是我應用flowchart.js程式庫建立的一個範例 :

畫面呈現如下 : 

 

這個範例上方Code是flowchart.js流程圖的控制碼，透過解析特有的語法呈現如下方的流程圖，

可以在Code區域更改控制碼，然後點擊執行，下方的流程圖就會改變。

點擊方塊作業回產生新的分頁執行相關的作業，例如: 點擊"填寫請購單"，就會進入請購系統的開立請購單畫面，依此類推。

本文只是一個簡單的範例，也可以整合進Web應用系統，將控制碼改為透過比較友善的畫面進行設定，設定完儲存後自動產生控制碼，並呈顯新的流程圖，並透過後台程式儲存這個流程設定。

經過幾天的嘗試，我發現flowchart.js的缺點主要有三點 : 

1 流程圖繪製比較不具彈性，流程線只能選擇向右，向下與向左，不能決定每一條線繪製的

長短與位置，向左方繪製的流程線繪製會有問題，如下圖

   

2 決策節點只能有yes, no兩種選擇，不能有更多種選項。無法解決三種或三種以上條件的流程

，例如: 三種請購單類型分別走三種不同的審核流程。

 

3 流程線無法個別設定要顯示的文字。

  

其中，第二個缺點或許可以用parallel節點來取代，但是整體上我還是不太能夠接受這個套程式庫。

flowchar.js官方網址 : http://flowchart.js.org/

說明: https://www.jqueryscript.net/chart-graph/jQuery-Plugin-To-Generate-SVG-Based-Flowchart-Diagram.html

download : https://github.com/adrai/flowchart.js 

範例程式碼如下 :

<div>
Code:<br />
<textarea id="code" style="width: 100%;" rows="11">
st=>start: 開始
e=>end: 結束
op1=>parallel: 填寫請購單:>http://myweb.abc.com/purchaseapp/fill_form[blank]
op2=>operation: 主管審核:>http://myweb.abc.com/purchaseapp/sign_form[blank]
op3=>operation: 承辦人審核:>http://myweb.abc.com/purchaseapp/sign_form[blank]
op4=>operation: 作廢|cancelled:>http://myweb.abc.com/purchaseapp/cancel_form[blank]
cond1=>condition: 是否通過?|decision
cond2=>condition: 是否通過?|decision

st->op1
op1(path1, bottom)->op2(right)->cond1
op1(path2, left)->op4
cond1(yes)->op3(right)->cond2
cond1(no)->op1

cond2(yes)->e
cond2(no)->op1
</textarea>
</div>
<div><button id="run" type="button">執行</button></div>
<div id="canvas"></div>

<style type="text/css">
  .end-element, .start-element { fill : white; }
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://flowchart.js.org/flowchart-latest.js"></script>
<script>

    window.onload = function () {
        var btn = document.getElementById("run"),
            cd = document.getElementById("code"),
            chart;

        (btn.onclick = function () {
            var code = cd.value;

            if (chart) {
              chart.clean();
            }

            chart = flowchart.parse(code);
            chart.drawSVG('canvas', {
                  // 'x': 30,
                 // 'y': 50,              
                 // 'maxWidth': 3,//ensures the flowcharts fits within a certian width              
                'text-margin': 10,
                'font-size': 14,
                'font': 'normal',
                'font-family': '微軟正黑體',
                'font-weight': 'normal',
                'font-color': 'black',
                'line-color': 'black',
                'element-color': 'black',
                'fill': 'white',
                'yes-text': '核准',
                'no-text': '退回',
              
                  // 'line-width': 1,
                  'line-width': 2,
                  'line-length': 50,
                  // 'arrow-end': 'block',
                  'arrow-end': 'classic-wide-long',
                  'scale': 1,
                  'symbols': {
                    'start': {
                      'class': 'start-element'
                    },
                    'end':{                     
                      'class': 'end-element'
                    }
                  },
                  'flowstate' : {
                    decision : { 'fill' : '#C45879'},
                    cancelled : { 'fill' : 'gray'}
                 }
            });
            $('[id^=op1]').click(function(){
                alert('申請人填寫請購單');
            });            
            $('[id^=op2]').click(function(){
                alert('申請人上級主管審核');
            });            
            $('[id^=op3]').click(function(){
                alert('作業承辦人審核');
            });                
        })();
    };    
</script>