> 最好用的流程編輯器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資原始檔，就像下邊這樣 ``` ``` 瀏覽器訪問會出現如下一個流程編輯器，可以在這裡進行流程的編輯  bpmn-js有兩種模式：Modeler模式和Viewer模式，在Modeler模式下可以對流程圖進行編輯，而Viewer模式則不能，僅作為展示用 viewer模式相對簡單，無需引入CSS檔案，只需引入一個JS即可 ``` ``` 通常在流程執行階段的展示用Viewer模式，配合節點顏色設定讓使用者清晰的看到當前流程的執行過程和狀態  ## VUE中使用 更多的時候我們可能會在VUE專案中使用，為了展示清晰，這裡先通過vue-cli腳手架建立一個vue專案 ``` vue create ops-coffee-bpmn cd ops-coffee-bpmn ``` 原始的目錄結構大概是這個樣子的  安裝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") }, ]; ``` 然後訪問頁面，就可看到流程編輯器，進行流程編輯等操作  以上為Modeler模式，如果想用Viewer模式的話，也非常簡單，僅需將引入的`Modeler`改為`Viewer`即可 ``` import BpmnViewer from "bpmn-js/lib/Viewer"; ``` ## 概念名詞 在使用bpmn-js的過程中，經常會出現一些名詞，瞭解他們有利於我們後續的使用和開發  畫布中的元素叫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端開啟效果更好