這篇不談流程設計的理論，只講「手要怎麼動」：滑鼠在畫布、節點、線段上按左鍵和右鍵各會發生什麼事、有哪些熱鍵、畫面上每一塊是做什麼的、下面那排分頁各管什麼、切換流程前要不要先存檔。最後補一個藏在右鍵選單裡、很容易一直沒發現的功能：替換節點。

操作環境是 BeakPlatform 的表單流程模組。設計器的進入路徑是左側選單的「流程管理」，網址是 /forms/workflows。

一、從流程清單進入設計器

流程清單頁上方有兩個分頁：「主流程」與「通用子流程」。右上角的 [+ 新增工作流] 會開一個對話框，填名稱、代號、分類、描述後建立，建立完成直接進入設計器，畫布上已經放好一個 Start 節點。

每一列右邊有 [編輯] 與 [樹系圖] 兩個按鈕。[編輯] 開設計器；[樹系圖] 開一個獨立頁面，用樹狀圖顯示這個主流程底下掛了哪些子流程。清單右上角可以切換「清單」與「縮圖」兩種檢視，縮圖是每次儲存時設計器自動截的。

（圖01：流程清單頁，標出主流程／通用子流程分頁、[+ 新增工作流]、[編輯]、[樹系圖]）

（圖02：新增工作流對話框）

一件要先知道的事：通用子流程開啟後是唯讀模式。儲存類的三個按鈕會變灰、節點拖不動、左側元件拖不進來、右側設定面板只能看不能改。主流程與專屬子流程沒有這個限制。

二、設計器的五個區塊

進入設計器後，畫面分成五塊：

（圖03：設計器全貌，用框線標出下面五個區塊）

左欄最上面的「流程元件」是手風琴式分類：點分類標題會展開它、同時收起其他分類；標題列右邊的小按鈕可以一次展開或收合全部分類。分類有基本節點、表單處理、通知機制、流程控制、資料處理、運算操作、系統整合、安全管控、資安處置、系統級管理員專用，實際看得到哪些依企業授權而定。把元件拖到畫布上放開，就新增一個節點，新節點會自動被選取並在右欄打開它的設定。

三、滑鼠在不同地方按下去會發生什麼

這張表是整篇最重要的一張。畫布的設計是左鍵框選、右鍵平移，和多數繪圖軟體相反，第一次用都會卡在這裡。

幾個補充：

• 瀏覽器的 Ctrl 加滾輪縮放被擋掉了，不會把整個網頁放大；畫布的縮放只靠滾輪，或下方「畫布調整」的按鈕。
• 右鍵選單開著時，點畫面任何其他地方都會關閉它。
• 節點拖進某個群組框的範圍內放開，會自動加入那個群組；拖出範圍放開，會自動離開。這是預設行為，不用按任何鍵。

（圖04：節點的右鍵選單，三個項目都看得到的狀態，也就是在群組內的一般節點）

（圖05：群組的右鍵選單，把「群組顏色」子選單的 30 色色盤展開）

四、鍵盤：三個修飾鍵與幾個熱鍵

設計器有三個「按住就切換模式」的修飾鍵，放開就恢復。按住時畫布上方會出現模式提示，下方「系統訊息」也會寫一行。

其他熱鍵：

輸入框有焦點時，上面的熱鍵會交給輸入框處理，例如在節點名稱欄位裡按 Ctrl + C 是複製文字，不是複製節點。

兩個和瀏覽器有關的保護：按瀏覽器的上一頁會被攔下來並跳出確認框，確認後才回流程清單；直接關閉分頁或重新整理時，若有未儲存的變更，瀏覽器會先問你。

五、畫線：唯一的方法是按住 Shift 連續點

節點與節點之間拉線，沒有拖曳把手，唯一的方法是：

1. 按住 Shift 不放。
2. 點第一個節點，它會亮起來。
3. 點第二個節點，第一個到第二個之間就畫好一條線，第二個也亮起來。
4. 繼續點第三個，第二個到第三個再畫一條。想畫幾段就點幾個。
5. 放開 Shift，結束，所有高亮消失。

線的方向就是你點的順序。不能把節點連到自己，也不能在一般節點和群組之間拉線，這兩種情況系統訊息會告訴你。要從同一個節點拉出兩條線到不同目標，就放開 Shift 再按住一次，從那個節點重新開始點。

新畫的線預設是灰色直線加三角箭頭，粗細、顏色、樣式都在右欄的線段屬性控制裡改。

（圖06：按住 Shift 連續點了三個節點，前兩段線已畫好，三個節點都處於高亮狀態）

六、右欄設定面板的三種內容

節點設定（點節點）

最上面固定是「名稱」與「描述」兩個欄位，名稱會顯示在畫布上節點下方。簡單節點下面有一顆 [套用]；像簽核、分支、暫停、子流程這類有自己設定項目的節點，[套用] 在它自己的設定區塊裡。

不用擔心忘了按 [套用]：切換到另一個節點、或按任何一種儲存時，系統都會先把當前面板的內容自動套進節點。但這個自動套用是靜默的，不會跳驗證警告，有必填漏填要靠自己看。

點某些節點時下方控制面板會自動切分頁：點「讀取欄位」「寫入欄位」節點會切到「表單欄位」分頁並展開面板；點「設定變數」節點會切到「變數總覽」分頁。

（圖07：右欄的節點設定，以一個有自己設定區塊的節點為例，例如暫停節點）

線段屬性控制（點線段）

從上到下：

• 選擇線段：下拉選單列出所有線段，不想在畫布上點也可以從這裡選。
• 線段樣式：直線、曲線、正交折線、直角折線（黃點）、直角折線。選了曲線會多出控制點距離與權重的滑桿；選了直角折線會多出方向與轉彎半徑。
• 線條寬度、顏色、實線／虛線／點線。
• 箭頭樣式與縮放。
• 標籤文字：顯示在線上的字，可以指定顯示在第幾段、文字方向。這個標籤會出現在分支節點、簽核節點設定出線時的清單裡，用來分辨哪條線是哪條，所以分支的出線建議都打上標籤。
• 條件表達式、設為預設路徑、測試表達式：這三項是早期設計留下的欄位，流程引擎的分支判斷不讀它們，分支條件請在「分支」節點自己的設定面板裡設定。
• 刪除線段：和選取後按 Delete 相同。

（圖08：右欄的線段屬性控制，標出線段樣式下拉與標籤文字）

線段編輯（Ctrl 加點線段）

這個面板專門管「中繼點」：輸入數量按 [新增中繼點]，線段上會多出幾個橘色的小點，拖動它們就能讓線繞路。下面列出現有中繼點，[清除所有中繼點] 一次清掉。選取單一中繼點按 Delete 也能刪。正交折線與黃點折線不支援中繼點，要先在線段屬性控制把樣式換掉。

（圖09：Ctrl 加點線段後的線段編輯面板，線上已加了兩個中繼點並拖成折線）

七、下方控制面板的五個分頁

分頁列最右邊的 [展開] 會把整個面板拉高到 600px，再按一次收起。鷹眼旁邊也有一顆同樣功能的按鈕。

常用控制

四個區塊並排：

• 系統訊息：所有操作的回饋都寫在這裡，一行一筆、最新的在最下面。畫線失敗、節點被自動挪位、貼上了幾個元素、儲存成功或失敗，全部在這裡看。遇到「點了沒反應」先看這格。有警告時標題旁會亮「⚠ 警告」。
• 畫布調整：縮放按鈕 25% 到 200%、放大、縮小、適應（把所有節點縮放到剛好看得完）；畫布顏色四個預設色加一個自訂色；網格可選「線」或「點」，兩個都不勾就關閉網格，節點放開時就不貼齊；「節點邊框」決定節點外框顯不顯示。
• 群組管理：[建立群組] 與 [解散群組]，選到群組時下面會出現該群組的名稱、顏色、框線等設定。
• 線段動畫效果：流動動畫、脈衝效果、速度，純展示用，與執行無關。

（圖10：常用控制分頁的四個區塊）

控制項

只有一份快捷鍵說明，內容與本文第四節相同。

底圖管理

[上傳新底圖] 把一張圖放到畫布底下當參考，例如公司既有的流程圖或泳道圖。右側是已上傳的縮圖牆，點一張就套用；左側可以改底圖名稱、刪除目前底圖。

（圖11：底圖管理分頁）

表單欄位

左側列出這條流程「配對」的表單，可切換看設計版或發行版；點一張表單，右側列出它所有欄位：標籤、內部變數、引用語法、類型、資料型別、必填、預設值。勾選幾個欄位後，[內部] 複製它們的內部變數名、[f.key] 複製引用語法，貼到其他節點的設定裡用。有搜尋框可以過濾。

（圖12：表單欄位分頁，已選一張表單並勾選兩個欄位）

變數總覽

按 [Reload] 掃描畫布上所有節點，列出每個節點設定了哪些變數（SET）、讀了哪些變數（READ），可以用「全部／設定 SET／讀取 READ」篩選，勾選後 [複製變數]。畫到一半想確認某個變數有沒有人設定過，來這裡看最快。

（圖13：變數總覽分頁掃描後的結果）

八、群組

群組是把幾個節點框在一起的容器，純視覺整理用，不影響執行。

• 建立：先框選幾個節點（空白處左鍵拖曳，或按住 Shift 拖曳只選節點），再按常用控制分頁的 [建立群組]。
• 加入：把節點拖進群組框的範圍放開就自動加入。群組也可以拖進另一個群組，變成巢狀。
• 離開：拖出範圍放開自動離開；按住 Alt 拖也可以強制脫離；或在節點上按右鍵選「移出群組」。
• 外觀：群組上按右鍵改名稱、30 色色盤挑顏色、實線／虛線／無框線、圓角／直角。
• 解散與刪除的差別：[解散群組] 或右鍵「解散群組」只拆掉框，節點留著；選取群組按 Delete 是連裡面的節點一起刪（Start 會被自動移出來倖免）。

（圖14：一個巢狀群組，外層群組內含一個內層群組與幾個節點）

九、替換節點：只在節點右鍵選單裡

這是最容易一直沒發現的功能，因為它不在任何工具列或分頁上，只有在節點上按右鍵才會出現，Start 節點的選單裡也沒有它。

用途是「這個位置我放錯節點類型了」，例如本來拖了一個「暫停」，後來發現應該是「子流程」。不用刪掉重畫線，直接替換：

1. 在節點上按右鍵，選「替換節點」。
2. 跳出替換視窗，上方顯示目前節點的名稱與類型，下方依分類列出可以換成的類型（不含目前的類型）。
3. 點一個類型，立刻替換完成，新節點自動被選取。

替換會保留什麼、丟掉什麼：

替換視窗最上面會多出一個「還原上次替換」區塊，點它可以把最後一次替換的節點換回去。它只記得最後一次，而且重新整理頁面就沒了；Ctrl + Z 也能復原替換。替換完成後流程會被標記為未儲存，記得存。

（圖15：替換節點視窗，上方有「還原上次替換」區塊，下方是分類後的節點清單）

十、流程樹系：切換流程前要不要先存檔

左欄中段的「流程樹系」列出根主流程與它底下的子流程，每一層一種顏色，目前開著的那一個會標示出來。樹是依畫布上「子流程」節點指定的子流程長出來的；子流程節點設定好並套用後，樹會自動刷新，刪掉子流程節點也會。覺得不對就按標題列右邊的 [重新載入]。

點樹上的任一項就切換到那條流程，切換前系統會自動儲存目前這條，沒有任何提示。 所以答案是：不用自己先按儲存。但要反過來注意一件事：如果你改到一半、打算放棄這些改動，不要直接點樹切換，那會把改動存進去；先按 [放棄] 回清單再重新進來。只有一種情況不會切換：自動儲存失敗，這時系統訊息會寫「儲存失敗，已留在目前流程」，你會留在原地。

標題列的 [開啟樹系圖] 會跳到整頁的樹狀圖，跳之前同樣先自動儲存。

（圖16：左欄的流程樹系，根主流程下掛兩層子流程，目前所在的一項有標示）

（圖17：整頁的樹系圖頁面）

十一、儲存、版本、離開

工具列右半邊的流程名稱、分類下拉、描述，改完離開欄位就立刻寫入，不經過 [儲存]。名稱清空會被還原成原名；子流程取了和別人重複的名字會被擋下並顯示原因。描述欄位只顯示第一行，點它或旁邊的 edit 會開完整的編輯視窗。

十二、常見狀況速查

到這裡，設計器的基礎操作就講完了。各種節點各自的設定項目是另一個主題，之後再寫。