在企業級系統中，流程引擎是不可或缺的一環。Flowable 作為一款強大而靈活的 BPM 引擎，提供了豐富的流程控制能力。但它默認的流程設計器相對簡陋，擴展性不高，難以滿足複雜業務場景下的個性化需求。

本文將介紹如何基於 bpmn-js 打造一款媲美甚至超越官方的 Flowable 流程設計器，支持豐富的自定義屬性、事件監聽、與後端無縫聯動等功能。

為什麼選擇 bpmn-js？

[bpmn-js]() 是 Camunda 團隊開源的一款 BPMN 2.0 圖形建模工具，具有如下優勢：

• 原生支持 BPMN 2.0 標準
• 支持建模與渲染
• 可擴展性強（可定製 palette、renderer、moddle、屬性面板等）
• 社區活躍，文檔齊全

節點支持

• 開始事件：開始、消息啓動、定時啓動、條件啓動、信號啓動、參數啓動
• 任務類型：用户任務、服務任務、接受任務、手動任務、規則任務、腳本任務
• 自定義任務：Http任務、抄送任務、Shell任務、郵件任務、外部工作者任務、決策任務、Mule任務
• 網關類型：排他網關、並行網關、事件網關、包容網關
• 邊界事件：錯誤、定時、信號、消息、條件、升級、補償、參數
• 中間事件：消息、定時、升級、條件、補償、信號、參數
• 結束事件：結束、消息、升級、錯誤、補償、信號、終止
• 子流程：引用流程、子流程、臨時子流程、事件子流程、事務子流程

示例效果圖（建議附帶）

預覽地址：bpmn-js 流程設計器