釘釘同款審批流設計器開源上線：工程師少加一次班，業務同事少看一次文件

九月上旬，掘金上一篇技術實錄文章在開發者社羣裡流傳開來。開發者 mldong 把釘釘那套眾人熟悉的審批流設定介面，做成了 Vue3 開源組件，npm 裝包即用。文章標題寫得很直白：十分鐘畫出第一條審批流。這件事技術含量說不上驚天動地，但它碰到的痛點，幾乎每一個寫過企業內部系統的工程師都遇過。

審批流開發的兩條老路，都不好走

先把場景拉回日常。公司要一個請假系統、報銷系統、採購簽核系統，需求會議上產品經理打開釘釘的截圖說：就像這樣，點個加號加一級審批，設個條件分支，再抄送給誰。在釘釘裡這確實人人會用，因為介面把流程概念全部藏起來了。

輪到自己系統要實作，工程師面前的選項通常只有兩個。第一個是上畫布類流程設計器，例如 LogicFlow 或 BPMN 系工具。功能完整，但對普通使用者太工程師思維：要拖節點、連線、調座標。演示給業務單位看，得到的回覆往往是「我們的人不會用」。第二個是把審批鏈寫死在程式碼裡，簡單直接，代價是每加一個審批節點就是一次發版。人事流程改一條規則，工程排隊兩週。

mldong 的做法是走第三條路：把釘釘的互動模式原樣搬進 Vue3 組件，誰要誰裝。

為什麼釘釘不用流程圖畫布

這裡有個值得停下來想的問題：審批流的真實形態到底是什麼？

絕大多數企業場景裡，它就是一條主幹，偶爾出現分支，加上少量會簽與抄送。審批人腦中沒有節點和邊的概念，只有三個樸素的疑問：誰先審、誰後審、什麼情況走另一條路。畫布類工具等於把流程建模的複雜度直接交給使用者；釘釘的思路則是把流程折疊成一棵樹，主幹一條線走到底，分支收進條件容器裡，連線與座標這些概念全部消失。

這個設計判斷的意義，可以類比成簡報軟體的演進。專業排版的人用 Illustrator，多數人用 Keynote 的固定版型就夠了。工具的複雜度應該匹配使用者的實際任務，而非功能上限。多數企業審批不需要 BPMN 那種表達力，卻被迫付出它的學習成本。

兩個套件，一份 JSON

這次開源的內容分兩個包。mldong-flow-designer-dingtalk 是精簡包，只含釘釘式樹狀設計器，dependencies 為空，不會拖進 LogicFlow 或任何 UI 框架，peerDependencies 只要求 vue 3.4 以上。mldong-flow-designer-plus 則是雙模式包，用 mode 屬性就能在畫布與樹狀兩種檢視之間切換，兩套視圖喫同一份 JSON。

零依賴這件事對前端工程師是實際的好處。原作者實測，Windows 加 Node 22 的環境下，連同 Vite 整個工程裝完 32 個包，五秒結束。對比某些組件庫動輒拖進整棵 UI 框架依賴樹，裝一個設計器結果套件體積膨脹數倍，這裡的乾淨程度少見。

使用方式也單純。設計器是受控組件，v-model 進，儲存事件出，進出都是同一份 JSON。這份 JSON 可以直接餵給開源工作流引擎執行，作者在原文中示範了從安裝到畫出報銷審批流、再接引擎跑通的完整過程。它也不是 demo 玩具：mldong 系框架的前端在生產環境使用，開源工作流引擎 jeeflow 的官方前端，流程設計頁採用的也是這套組件。

所以呢：把選型的力氣花在對的地方

對正在評估企業內部流程系統技術方案的團隊，這件事的參考價值在於選型邏輯。多數團隊選流程設計器時，比較的是功能清單長度：支援幾種節點類型、能不能畫泳道、匯出格式有幾種。但真正決定專案成敗的問題只有一個：未來每天操作這個設計器的，是工程師還是行政同事。如果答案是後者，樹狀互動幾乎是唯一合理選擇，剩下的差異只是做得多完整。

這與我們先前談過的AI 進入開發流程前該先決定站位是同一類思考：工具的價值取決於它在工作流裡的位置，而非工具本身的規格。流程設計器放在工程師手裡是開發工具，放在業務單位手裡是設定介面，兩者對易用性的要求差了幾個數量級。

對開發者個人而言，這類零依賴的開源組件也代表一種可效仿的路徑。把大廠驗證過的互動模式獨立成套件，讓中小團隊不用重造輪子，這門開源生意不靠贊助也能累積影響力，jeeflow 官方前端的採用就是實例。

值得留意的下一步訊號

釘釘樹狀設計器之所以成立，是因為多數審批場景確實簡單。但當組織流程複雜到需要平行會簽、駁回重審、跨部門條件組合時，樹狀檢視的折疊策略會不夠用，這正是雙模式包存在的原因：同一份 JSON，複雜場景切回畫布。介面與資料分離，讓兩種使用者各取所需，這個架構選擇比任何單一功能都值得抄筆記。

對企業數位化決策者來說，訊號也很清楚：流程設定權該不該下放給業務單位，取決於工具是否消除了學習門檻。當開源社羣把釘釘等級的互動做成裝包即用，這個問題的答案正在從技術限制變成組織選擇。下次產品經理又拿著釘釘截圖來提需求，工程師至少可以直接回一句：可以，裝個包。