如何在 PlantUML 上製作活動圖

閱讀本指南以了解如何在 PlantUML 上輕鬆製作活動圖。

EdrawMax
EdrawMax Apr 30, 26
分享:
免費下載
免費下載
免費下載
app store google play
banner-product
文章列表
本文內容
  1. 什麼是活動圖？
  2. 什麼是 PlantUML？（簡單說明）
  3. 使用案例圖的基本 PlantUML 語法
  4. 使用 PlantUML 建立使用案例圖的步驟
  5. 實際範例
  6. 何時考慮替代方案
  7. 總結

什麼是活動圖？

活動圖概述了流程從開始到結束的步驟。它以易於理解的格式呈現動作、決策和結果。人們經常使用它來分析使用者動作、業務流程或系統操作。

要學習如何在 PlantUML 中建立活動圖，了解它們為何有用很重要。這些圖表是規劃、系統設計和說明團隊流程的關鍵。

PlantUML 活動圖工具可幫助您透過撰寫程式碼來建立基於流程的圖表。它們運作良好、適應性強，並且與版本控制搭配使用效果優異。

您可能會使用它們來：

  • 規劃使用者如何登入或註冊
  • 顯示處理步驟
  • 追蹤專案中的任務
  • 概述軟體如何處理錯誤

基本部分包括：

  • 開始或結束節點
  • 動作或活動
  • 顯示控制流程的箭頭
  • 決策或合併路徑的節點
  • 用於平行動作的分叉和匯合
  • 用於劃分區段的泳道

什麼是 PlantUML？（簡單說明）

PlantUML 是一個免費的開源工具，可幫助人們透過撰寫簡單的文字指令來製作 UML 圖表。它允許使用者製作各種類型的圖表，包括活動圖、類別圖和序列圖。由於它使用純文字，因此很容易與程式碼整合。您可以透過版本控制管理更新，並且無需重新繪製即可變更圖表。

主要功能

廣泛的圖表支援

  • 類別圖、活動圖和序列圖
  • 流程圖和流程對應
  • 心智圖和線框圖
  • 網路架構圖
  • 專案時間軸（甘特圖）

程式碼驅動的圖表

使用純文字行來說明圖表，例如 A -> B: Hello，PlantUML 會從中生成視覺化圖表。您無需自己點擊、拖曳或組織形狀。

適合初學者的語法

您不需要具備高超的技能。語法保持簡潔、清晰且易於理解。

@startuml User -> System: Login System --> User: Success @enduml

使用案例圖的基本 PlantUML 語法

要建立可用的 PlantUML 活動圖，您必須了解如何撰寫每個部分。從起始點到決策區塊的每個元素都使用特定格式。以下章節將透過您可以應用的語法和範例來說明這些元件。

動作／活動

PlantUML 使用動作來說明每個步驟發生的事情。您可以這樣定義它們：

語法：

:;

範例：

:start;:User fills login form;:System checks credentials;
action activities

初始節點

第一個節點標記活動的開始。您只需使用一個關鍵字即可在 PlantUML 中定義它。

語法：

start

範例：

@startuml start :User opens the app; @enduml
starting node

結束節點

最後一個節點標記所有動作停止的位置。您輸入一個字即可結束流程。

語法：

end

範例：

@startuml start :User logs out; end @enduml
end node

控制流程／邊

控制流程逐步顯示活動的順序。它將一個任務連結到另一個任務，並說明事情如何進展。在 PlantUML 中，箭頭 (->) 使這些轉換易於理解和遵循。

語法：

Activity1 -> Activity2

範例：

@startuml start :Enter email; -> :Enter password; -> :Click Login; end @enduml
control flow

決策／合併

決策節點管理做出選擇。要顯示不同的結果，您可以使用 if-then-else 區塊。PlantUML 允許使用 fork 和 end fork 建立平行路徑。

語法：

if (...) then (...) else (...) endiffork ... else ... end fork

範例：

@startuml start :Submit order; if (Payment successful?) then (yes) :Send confirmation; else :Show error; endif end @enduml
decision merge

守衛條件

守衛條件根據規則決定要走哪條路線。將條件放在連結活動的箭頭上的方括號內。

語法：

-> [condition] ->

範例：

@startuml start :Check stock; ->[items available] -> :Confirm order; ->[out of stock] -> :Notify customer; end @enduml
guard conditions

分叉／匯合（平行活動）

當多個動作同時發生時，您可以使用 fork 和 join。fork 關鍵字開始平行流程，而 end fork 再次將它們組合起來。這在任務可以同時發生而不相互依賴時效果很好。

語法：

fork :Activity1;fork again :Activity2;end fork

範例：

@startuml start :Start sync; fork :Upload files; fork again :Update database; fork again :Send status alert; end fork :Sync complete; end @enduml
fork join

分區／泳道

泳道，也稱為分區，使人們更容易看出誰或什麼處理特定動作。它們將相似的步驟放在標籤下，例如「使用者」或「系統」。這有助於人們更好地閱讀和理解圖表。

語法：

partition "Label" { :Activity;}

範例：

@startuml start partition "User" { :Submit request; } partition "Admin" { :Approve request; :Send response; } end @enduml
partition swimlanes

訊號發送和接收

使用訊號在某個系統部分需要注意時通知另一個系統部分。send 命令發送訊號，而 receive 在流程的其他地方處理它。

語法：

send receive

範例：

@startumlstart:Update profile;:send update_signal;stopstart:receive update_signal;:Log update;end@enduml
send and receive

物件流程

物件流程顯示資料或項目在不同活動中的移動。它讓您看到每個階段傳遞的內容。物件位於兩個動作之間，提供輸入和輸出之間的清晰連接。

語法：

:Activity1 object -> :Activity2;

範例：

@startumlstart:User selects item order -> :Validate item;:Validate item item -> :Generate invoice;:Generate invoice invoice -> :Send invoice to user;end@enduml
object flow

使用 PlantUML 建立活動圖的步驟

步驟 1：識別流程中的活動和決策點
  • 首先寫下流程中的每個動作，即使是很小的動作。
  • 接下來，識別決策或條件變更的位置。
  • 這些步驟和選擇建立了您的圖表稍後將使用的基礎結構。
activities decision
步驟 2：描述這些元素及其流程
  • 使用冒號顯示活動，使用箭頭表示流程，使用條件表示決策。
  • 確保一切保持清晰和穩定，以便圖表符合實際流程。
describe elements
步驟 3：呈現和檢視圖表
  • 要檢視您的圖表，請複製完整的程式碼並將其放入 PlantUML 線上編輯器中。
  • 如果您在電腦上工作，可以在 VS Code 或 IntelliJ 等工具中安裝 PlantUML 擴充功能。
  • 這些工具允許即時預覽，因此您無需離開編碼空間。
render and view

實際範例

簡單的活動圖範例

@startumlstart:Enter email;-> :Enter password;-> :Click login;if (Valid credentials?) then (yes) -> :Redirect to dashboard;else -> :Show error;endifend@enduml

此活動圖概述了簡單的使用者登入運作方式。當使用者輸入電子郵件和密碼，然後點擊登入按鈕時，流程就會開始。系統驗證憑證。如果正確，使用者將被導向儀表板。如果錯誤，則會顯示錯誤訊息。圖表列出了每個步驟和決策。

simple activity

具有決策和合併的活動圖

@startumlstart:Receive order;-> :Check stock;if (In stock?) then (yes) -> :Process payment; if (Payment approved?) then (yes) -> :Prepare shipment; else -> :Cancel order; endifelse -> :Notify out of stock;endif-> :Update records;end@enduml

訂單在完成前會經過多重檢查。流程從檢查庫存開始，然後進行付款處理。根據結果，訂單會被準備、取消或標記為缺貨。所有內容匯整後會更新記錄，這讓系統保持有條理且易於追蹤。

decision merge example

具有平行活動的活動圖

@startuml開始:開始備份;分支 :備份檔案;再次分支 :匯出資料庫;再次分支 :產生日誌;結束分支:通知完成;結束@enduml

此圖描述了包含三項任務的備份流程：檔案備份、資料庫匯出和日誌產生。每項任務獨立運作，之後匯整以發送最終通知。人們經常使用此設定來建立同時執行任務的系統模型。

fork join example

處理線上訂單的活動圖

@startumltitle 處理線上訂單開始:顧客瀏覽產品;:顧客將商品加入購物車;if (顧客是否進行結帳?) then (是) :顧客輸入運送資訊; :顧客輸入付款資訊; :系統驗證付款; if (付款成功?) then (是) :系統建立訂單; 分支 :更新庫存; 再次分支 :發送訂單確認電子郵件給顧客; 結束分支 :訂單已出貨; else (否) :通知顧客付款失敗; endifelse (否) :顧客繼續瀏覽;endifend@enduml

此圖展示線上訂單如何從瀏覽開始到出貨結束。它突顯了完成結帳和確認付款等選擇。更新庫存和發送確認等任務同時進行。企業可以使用它來了解顧客行為以及系統在電子商務平台上如何回應。

online orders

何時考慮替代方案

PlantUML 適合大多數需求，但並非適用於每個團隊或個人。有時，其文字式風格可能會降低流程速度或限制某些任務。讓我們檢視一些缺點，然後討論一個專為解決這些弱點而設計的工具。

PlantUML 限制

  • 管理大型圖表很困難：隨著圖表擴展，您的程式碼可讀性降低且更難維護。
  • 無法控制自動佈局：您無法改變元素的位置。
  • 樣式選擇少：您會發現很難自訂字型、間距或形狀。

建立活動圖的更簡單方法

edrawmax online

有些人不喜歡透過編碼來建立圖表。處理包含分支、選擇或泳道的流程圖時，輸入每個細節可能需要額外時間。EdrawMax Online 讓這變得更簡單。您不需要處理語法或格式問題。相反地，您可以透過幾次點擊製作圖表。當設計變得詳細時，修改和分享會更快速。

EdrawMax 讓使用者透過拖放功能建立圖表。您可以使用可編輯的範本和佈局工具。與 PlantUML 不同，它允許使用者決定元素放置位置以及如何設定樣式或間距。它支援多種格式匯出。這使它成為繪製活動圖的好選擇。

您會喜歡它的原因

  • 可自訂的連接器：您可以調整線條曲線、變更箭頭設計，並選擇連接點，無需編碼。
  • 活動圖範本：編輯預先設計的範本來規劃登入步驟、訂單或同時執行的任務。
  • 多種格式匯出：只需一步即可將圖表儲存為 PDF、SVG、Word、PowerPoint 或 Visio。

總結

編碼圖表讓您實現準確性、組織性和完全控制。PlantUML 為技術使用者提供了在編碼設定和版本控制專案中使用的強大工具。本指南展示了如何使用正確的語法、清晰的步驟和實際範例在 PlantUML 中製作活動圖。

優秀的 PlantUML 活動圖讓您分解流程、找出重要任務並設計系統。編寫程式碼需要大量時間且並非總是有幫助。這就是 EdrawMax 的用武之地。您可以在腦力激盪時調整圖表。無需觸碰任何程式碼即可編輯。它快速使用、外觀美觀，甚至令人愉悅。

從符合您思考方式的工具開始。需要控制時編碼，需要速度時點擊。現在就試試看！

Zac Jenkins
相關文章
、