在設計倉儲管理系統(WMS)等複雜企業應用時,可視化系統邊界、參與者及用例至關重要。作為 Visual Paradigm 的資深技術講師,我經常被問到如何創建清晰、可直接用於演示的架構圖,而不被笨拙的拖放工具所困擾。在本大師班教程中,我將帶您逐步了解我使用 PlantUML 在「免費 PlantUML 編輯器」中構建全面 WMS 用例圖的完整思維過程。, VPasCode.
以下是我們將共同構建的最終圖形的預覽:

1. 設定全域樣式與基礎結構
每當我開始一個新的「圖形即程式碼」專案時,我的首要任務是建立一致的視覺層級與美學風格。標準圖形往往看起來雜亂無章,因此我喜歡及早覆寫預設樣式,以確保線條清晰、排版易讀,並採用結構化的配色方案。
我首先設定正交連接器(linetype ortho) 以確保所有連接線整潔,僅為水平或垂直方向,避免凌亂的對角線穿過文字。接著,我為參與者與用例設定自訂色彩編碼,以便立即區分主要參與者、次要實體與內部系統邊界。
@startuml
skinparam linetype ortho
skinparam defaultFontSize 14
skinparam defaultFontColor #333333
skinparam vpDiagramType UseCaseDiagram
skinparam actor {
BackgroundColor #E8F5E9
}
skinparam usecase {
BackgroundColor #BBDEFB
BorderColor #1976D2
ArrowColor #1976D2
}
left to right direction
2. 定義系統參與者與系統邊界
接下來,我需要定義系統的邊界,並識別哪些參與者會與系統互動。在我們的倉儲管理情境中,我們有三種不同的參與者:
- 倉儲經理:主要參與者,負責日常營運、庫存水準與貨物移動。
- 管理員:主要參與者,負責管理高階庫存盤點、採購訂單與系統報表。
- 供應商:次要參與者,從外部視角觸發進貨 shipments 與入庫作業。
我將所有內部系統功能包裝在一個「矩形」容器內,代表「倉儲管理系統」。如此可清晰區分內部用例與外部參與者。
actor "倉儲經理n(主要)" as manager
actor "管理員n(主要)" as admin
actor "供應商n(次要)" as supplier
rectangle "倉儲管理系統" {
usecase "接收進貨" as UC1
usecase "處理採購訂單" as UC2
usecase "登記 incoming shipment" as UC3
usecase "執行入庫" as UC4
usecase "揀貨訂單" as UC5
usecase "處理銷售訂單" as UC6
usecase "執行出庫" as UC7
usecase "管理庫存水準" as UC8
usecase "執行庫存盤點" as UC9
usecase "產生報表" as UC10
}
3. 映射參與者關聯與色彩編碼
為了讓圖形直觀易讀,我將參與者與其對應的用例關聯進行映射。我為每種參與者類型套用對應的色彩連結:倉儲經理使用中性黑色,管理員使用深紅色,供應商使用金黃色。此技術可大幅降低審查人員在分析系統權限時的心智負荷。
管理員 -[#black]- UC1
管理員 -[#black]- UC5
管理員 -[#black]- UC10
管理員 -[#black]- UC8
管理員 -[#crimson]- UC2
管理員 -[#crimson]- UC6
管理員 -[#crimson]- UC9
UC3 -[#goldenrod]- 供應商
UC4 -[#goldenrod]- 供應商
4. 建立用例關係(包含與擴展)
最後一步是使用相依性箭頭定義內部用例之間的關係。我使用<<include>>關係來顯示強制性的子流程(例如接收進貨需要進行出貨登記與入庫記錄),以及<<extend>>關係來處理可選或條件式行為,例如在缺貨時管理庫存水準。
UC1 ...> UC2 : <>
UC1 ...> UC3 : <>
UC1 ...> UC4 : <>
UC2 ...> UC6 : <>
UC5 ...> UC6 : <>
UC8 <... UC7 : <>
@enduml
為何在您的圖形工作流程中使用 VPasCode?

在VPasCode中建立此圖表,為您帶來多項傳統桌面繪圖工具所無法比擬的優勢:
- 即時渲染:當您輸入或調整 PlantUML 程式碼時,視覺預覽會即時更新。
- 自動格式偵測:您無需手動指定語法引擎——VPasCode 會即時偵測 PlantUML、Mermaid 及其他格式。
- 免費匯出選項:將完成的架構圖表以高解析度 PNG 或可縮放 SVG 格式下載,或透過安全網址即時與團隊分享。


