本文主要介紹，Flowable task中，從點擊“顯示流程圖”開始，到從后台獲取流程圖，渲染到頁面的過程。
1. ‘顯示流程圖’按鈕所在頁面
如上圖，該頁面布局為process-detail.html
其中‘顯示圖’按鈕對應代碼為
<div class="btn-group pull-right" ng-show="model.processInstance.graphicalNotationDefined">
<button class="btn" id="processDiagramTrigger" translate="PROCESS.ACTION.SHOW-DIAGRAM" ng-click="showDiagram()"></button>
</div>
html中的第一行顯示其使用的controller為ProcessDetailController,追蹤該controller在process.js第39行
2. 點擊事件響應
在ProcessDetailController中包含點擊事件對應函數showDiagram()函數，在process.js第174行
$scope.showDiagram = function() {
var modalInstance = _internalCreateModal({
template: appResourceRoot + 'views/modal/process-instance-graphical.html',
scope: $scope,
show: true
}, $modal, $scope);
};
_internalCreateModal定義了一個彈出窗口，如下圖所示：
該彈出窗口的頁面布局對應template: appResourceRoot + 'views/modal/process-instance-graphical.html'html文件
該文件中第一行顯示其使用的是ShowProcessDiagramCtrl controller，追蹤這個控制器也在process.js中，位於第184行
第26行<div id="bpmnModel"/>
我們最終是將圖片繪入這個div中
3. 繪制圖形
我們進入ShowProcessDiagramCtrl這個controller中，其主要內容位於$timeout()中（第437行）
jQuery("#bpmnModel").attr('data-model-id', $scope.model.processInstance.id);
jQuery("#bpmnModel").attr('data-model-type', 'runtime');
這段代碼將要顯示圖的流程實例或流程定義的id傳給bpmnModel（即前面定義的那個div），data-model-type定義要顯示的是流程實例圖還是流程定義圖還是其他什么類型的圖。
var viewerUrl = appResourceRoot + "../display/displaymodel.html?version=" + Date.now();
var amdDefine = window.define;
window.define = undefined;
ResourceService.loadFromHtml(viewerUrl, function () {
window.define = amdDefine;
});
這里加載displaymodel.html頁面，該頁面中主要加載幾個js文件，功能為為前面獲得的bpmnModel這個div繪制流程圖。
其中
<script type="text/javascript" src="../display/bpmn-draw.js"></script>為畫圖工具，為不同的任務節點繪制不同的圖案
<script type="text/javascript" src="../display/displaymodel.js"></script>處理一些邏輯、事件等
下面對這兩個文件進行簡單介紹：
- displaymodel.js
該文件最后一行_showProcessDiagram();是繪圖的入口
通過url去后台獲得繪制圖形所需數據，代碼如下：
url: modelUrl + '?nocaching=' + new Date().getTime()
其中modelUrl可跟蹤到455行，根據data-model-type（類型，判斷是流程實例還是流程定義等）和data-model-id（要顯示的流程實例或流程定義的id）來確定。
得到數據中的elements，即每個節點繪制所需的數據列表。
后面根據element.tpye調用bpmn-draw.js中的繪制方法畫圖。
- bpmn-draw.js
該文件定義繪制開始節點、任務節點、結束節點等不同種節點的方法，每個方法都包含element參數，即待節點的屬性信息。
繪制不同節點類型的節點形狀、高度、顏色等，添加鼠標懸浮點擊等事件（在deployment.js中定義）。
補充
1） 如果想為節點添加點擊事件，可在displaymodel.js的_addHoverLogic方法的topBodyRect.mouseout()方法（311行）后添加：
topBodyRect.click(function(){
console.log('function clicked !');
})
2） 如果想改變或添加節點element的屬性，可在displaymodel.js的第580行后面添加：
element = Object.assign({}, element,{parentId: '123456'});
(這里涉及的主要知識點為JS對象屬性的修改，JS本身不支持對象屬性修改，因此使用Object.assign(target, source,source2，...),即后面source...中的內容從后往前整合、重復值覆蓋，最終賦值給target返回)。
剛開始學習，對更深層次內容不太熟悉，相關術語可能不太准確，歡迎大家提出寶貴的意見 > <