最好用的流程編輯器bpmn-js系列之基本使用
阿新 • • 發佈:2020-09-17
> 最好用的流程編輯器bpmn-js系列文章
BPMN(Business Process Modeling Notation)是由業務流程管理倡議組織BPMI(The Business Process Management Initiative)開發的一套**標準**的業務流程建模符號規範。其目的是為使用者提供一套容易理解的標準符號,這些符號作為BPMN的基礎元素,將業務流程建模簡單化、圖形化,將複雜的建模過程視覺化,讓業務建模者、業務實施人員、管理監督人員對BPMN描述的業務流程都有一個更加清晰明瞭的瞭解。
BPMN的主要意義在於其作為一個標準,業務相關者都按照這個標準來繪製業務流程圖,能夠減少各方對於流程圖的理解歧義,從而達到高效協作的目的
BPMN包含以下四類基本元素
- 流物件(Flow Objects):包括事件、活動、閘道器,是BPMN中的核心元素
- 連線物件(Connecting Objects):包括順序流、訊息流、關聯
- 泳道(Swimlanes):包括池和道兩種型別
- 人工資訊(Artifacts):包括資料物件、組、註釋
bpmn-js就是基於BPMN標準實現的一套渲染工具包和web建模器,以下系列文章將會介紹我的使用過程
## 基本使用
bpmn-js的使用非常簡單,我們可以在VUE專案中使用,或者是直接在HTML檔案中引入JS/CSS資原始檔,就像下邊這樣
```
```
瀏覽器訪問會出現如下一個流程編輯器,可以在這裡進行流程的編輯
![](https://blz.nosdn.127.net/sre/images/20200908.01.png)
bpmn-js有兩種模式:Modeler模式和Viewer模式,在Modeler模式下可以對流程圖進行編輯,而Viewer模式則不能,僅作為展示用
viewer模式相對簡單,無需引入CSS檔案,只需引入一個JS即可
```
```
通常在流程執行階段的展示用Viewer模式,配合節點顏色設定讓使用者清晰的看到當前流程的執行過程和狀態
![](https://blz.nosdn.127.net/sre/images/20200908.02.png)
## VUE中使用
更多的時候我們可能會在VUE專案中使用,為了展示清晰,這裡先通過vue-cli腳手架建立一個vue專案
```
vue create ops-coffee-bpmn
cd ops-coffee-bpmn
```
原始的目錄結構大概是這個樣子的
![](https://blz.nosdn.127.net/sre/images/20200908.03.png)
安裝bpmn-js
```
npm install bpmn-js --save
```
安裝完成後就可以開始使用bpmn-js了,首先要引入bpmn-js的CSS,修改`src/main.js`檔案
```
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
```
然後編寫`bpmn-modeler.vue`檔案,檔案位於`src/views/bpmn-modeler.vue`
```
```
這裡引入了一個外部變數`xmlStr`,這個變數主要用來存放BPMN的XML資料,這裡建立對應的`src/mock/xmlStr.js`檔案
```
export var xmlStr = `
`;
```
最後修改`src/router/index.js`檔案新增路由
```
const routes = [
{
path: "/",
name: "編輯模式",
component: () => import("../views/bpmn-modeler.vue")
},
];
```
然後訪問頁面,就可看到流程編輯器,進行流程編輯等操作
![](https://blz.nosdn.127.net/sre/images/20200908.04.png)
以上為Modeler模式,如果想用Viewer模式的話,也非常簡單,僅需將引入的`Modeler`改為`Viewer`即可
```
import BpmnViewer from "bpmn-js/lib/Viewer";
```
## 概念名詞
在使用bpmn-js的過程中,經常會出現一些名詞,瞭解他們有利於我們後續的使用和開發
![](https://blz.nosdn.127.net/sre/images/20200908.05.png)
畫布中的元素叫element,element包含連線connection和形狀shape,流程圖是由shape和connection組成的,可以通過拖動左側工具欄Palette來建立元素,點選元素會出現ContextPad工具箱,不同的元素會出現不同的ContextPad,可以通過ContextPad工具建立shape或connection,也可以修改元素type,添加註解,以及刪除元素等操作
## 寫在最後
接觸bpmn-js不久,且第一次用VUE,邊學邊寫,文章難免出錯,各位多多包含。想要打造一個好用的適合自己的流程編輯器,需要了解的內容比較多,bpmn-js會分多篇文章來介紹,這是本系列的第一篇,下一篇介紹bpmn-js的資料儲存等內容,歡迎關注
部分小夥伴對流程編輯器不瞭解,或是對BPMN不瞭解,我搭建了個線上的Demo: [https://bpmn.ops-coffee.cn](https://bpmn.ops-coffee.cn),點選連結即可輕鬆體驗,建議PC端開啟效果更好