作者: 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>