掌握UML類圖——訂單處理案例研究

UML類圖是物件導向軟體設計的骨幹，為系統結構提供視覺化的藍圖。在這份全面的教學中，我們將逐步示範如何使用Visual Paradigm的創新工具VPasCode，建立一個完整的訂單處理系統UML類圖。圖形即程式碼工具以及整合式的文字轉圖形平台。無論你是軟體架構師、開發人員還是業務分析師，掌握類圖對於將業務需求轉化為技術規格都至關重要。透過VPasCode的即時渲染功能與AI驅動的特性，此圖形即程式碼工具可讓您將文字轉換為圖形佈局，並在輸入時即時驗證您的設計決策。

Complete UML class diagram for order processing system generated using VPasCode diagram-as-code tool
我們訂單處理系統的最終UML類圖

理解業務需求

在深入程式碼之前，讓我們先建立我們訂單處理系統的業務需求：

  • 客戶可以下包含多個產品的訂單
  • 每筆訂單必須追蹤訂單日期、寄送地址與狀態
  • 產品具有名稱、價格與庫存數量
  • 付款可透過信用卡、PayPal或銀行轉帳進行
  • 系統必須計算包含稅金與運費的訂單總額
  • 訂單在其生命周期中可有多次狀態更新

這些需求將引導我們的類圖設計，確保我們捕捉到所有必要的實體、屬性與關係。

開始使用VPasCode

VPasCode是一款強大的圖形即程式碼工具與整合式文字轉圖形平台，支援PlantUML、Mermaid與Graphviz等常見格式。該平台提供免費的程式碼編輯器，具備即時渲染功能，非常適合迭代式設計。

為什麼選擇VPasCode來製作UML類圖？

  • 即時預覽：輸入時立即看到您的圖形更新
  • AI錯誤修復：透過AI協助自動偵測並修復語法錯誤
  • 支援多種格式：支援PlantUML、Mermaid.js與Graphviz
  • 輕鬆分享：生成可分享的連結以進行協作
  • 匯出選項：以 SVG 或 PNG 格式下載，用於文件編寫
VPasCode text to diagram interface featuring code editor and live UML class diagram preview
VPasCode 直覺的介面，搭配分屏程式碼編輯器與即時預覽

逐步建立類別圖

步驟 1：定義核心類別

讓我們從使用 PlantUML 語法定義主要類別開始。開啟 VPasCode，並從基本結構開始：

PlantUML


在 VPasCode 中編輯 PlantUML
Plantuml Edit Plantuml in VPasCode 
@startuml OrderProcessingSystem

title 訂單處理系統 - 類別圖

class Customer {
    - customerId: Long
    - firstName: String
    - lastName: String
    - email: String
    - phone: String
    - registrationDate: Date
    - loyaltyPoints: Integer
    --
    + register(): Boolean
    + updateProfile(): void
    + getFullName(): String
    + getOrderHistory(): List
}

@enduml
Edit Plantuml in VPasCode



在 VPasCode 中編輯 PlantUML

請注意 VPasCode 的即時渲染會立即顯示您的類別。這種即時反饋能幫助您提早發現設計問題。

Customer and Address classes created in VPasCode text to diagram platform
初始的 Customer 類別即時呈現

步驟 2：新增 Order 類別

現在讓我們新增 Order 類別，它在系統中扮演核心實體的角色：

PlantUML


在 VPasCode 中編輯 PlantUML
Plantuml Edit Plantuml in VPasCode 
class Order {
    - orderId: Long
    - orderDate: Date
    - status: OrderStatus
    - shippingAddress: String
    - totalAmount: Double
    - taxAmount: Double
    - discountAmount: Double
    - deliveryDate: Date
    --
    + calculateTotal(): Double
    + addItem(product: Product, quantity: Integer): void
    + removeItem(orderItem: OrderItem): void
    + updateStatus(newStatus: OrderStatus): void
    + cancel(): Boolean
}

enum OrderStatus {
    PENDING
    CONFIRMED
    PROCESSING
    SHIPPED
    DELIVERED
    CANCELLED
    RETURNED
}
Edit Plantuml in VPasCode



在 VPasCode 中編輯 PlantUML

步驟 3：定義 Product 與 OrderItem

產品與訂單項目構成每個訂單的庫存與明細項目：

PlantUML


在 VPasCode 中編輯 PlantUML
Plantuml Edit Plantuml in VPasCode 
class Product {
    - productId: Long
    - name: String
    - description: String
    - price: Double
    - cost: Double
    - stockQuantity: Integer
    - category: String
    - reorderLevel: Integer
    - isActive: Boolean
    --
    + updateStock(quantity: Integer): void
    + isInStock(quantity: Integer): Boolean
    + applyDiscount(percentage: Double): Double
    + getProfitMargin(): Double
}

class OrderItem {
    - orderItemId: Long
    - quantity: Integer
    - unitPrice: Double
    - totalPrice: Double
    - discountAmount: Double
    - taxAmount: Double
    --
    + calculateTotal(): Double
    + applyDiscount(percentage: Double): void
    + getSubtotal(): Double
}
Edit Plantuml in VPasCode



在 VPasCode 中編輯 PlantUML

步驟 4：實作付款處理

一個穩健的訂單處理系統需要具備彈性的付款處理機制：

Plantuml


在 VPasCode 中編輯 Plantuml
Plantuml Edit Plantuml in VPasCode 
class Payment {
    - paymentId: Long
    - amount: Double
    - paymentDate: Date
    - method: PaymentMethod
    - status: PaymentStatus
    - transactionId: String
    - confirmationNumber: String
    --
    + processPayment(): Boolean
    + refund(): Boolean
    + verifyPayment(): Boolean
    + getPaymentReceipt(): String
}

enum PaymentMethod {
    CREDIT_CARD
    DEBIT_CARD
    NET_BANKING
    DIGITAL_WALLET
    COD
    UPI
}

enum PaymentStatus {
    PENDING
    COMPLETED
    FAILED
    REFUNDED
    CANCELLED
}
Edit Plantuml in VPasCode



在 VPasCode 中編輯 Plantuml
Order and Product relationships modeled using VPasCode diagram-as-code tool
包含 Payment 類別層次結構的擴展圖示

建立關係

現在進入關鍵部分：定義類別之間的關係。這正是您物件導向設計技能真正展現之處。

Plantuml


在 VPasCode 中編輯 Plantuml
Plantuml Edit Plantuml in VPasCode 
' 關係
Customer "1" -- "0..*" Order : 產生 >
Order "1" -- "1..*" OrderItem : 包含 >
OrderItem "1" -- "1" Product : 參考 >
Order "1" -- "0..1" Payment : 擁有 >
Order ..> OrderStatus : 使用
Payment ..> PaymentMethod : 使用
Payment ..> PaymentStatus : 使用
Edit Plantuml in VPasCode



在 VPasCode 中編輯 Plantuml

理解這些關係

  • 客戶至訂單（一對多）： 一位客戶可以下多筆訂單
  • 訂單至訂單項目（一對多）： 每筆訂單包含多個明細項目
  • 訂單項目至產品（多對一）： 多個訂單項目可以參考同一個產品
  • 訂單至付款（一對一）： 每筆訂單僅有一筆付款交易
  • 組合： 訂單項目組成訂單（強擁有關係）
Payment inheritance hierarchy converted from text to diagram in VPasCode
具備完整關係與多重性的最終類別圖

額外功能 – 借助 AI 驅動的功能

AI 程式碼錯誤修復

VPasCode 的突出功能之一是AI 程式碼錯誤修復。當您遇到語法錯誤時，只需點擊「由 AI 修復」即可立即獲得修正。AI 不僅會修復程式碼，還會解釋錯誤原因，幫助您學習並提升 PlantUML 技能。

例如，如果您遺漏了關閉大括號或誤用關係運算子，VPasCode 的 AI 將會：

  1. 自動偵測錯誤
  2. 建議正確的語法
  3. 提供並排對比，顯示變更內容
  4. 解釋修復背後的邏輯

AI 翻譯，助力全球團隊

與國際團隊合作？VPasCode 的AI 翻譯功能可讓您將類別名稱、屬性和註解翻譯成不同語言，同時保持圖形結構不變。這對於跨越語言障礙的文件編寫與利益相關者溝通極為重要。

驗證您的設計

在完整圖形就位後，讓我們根據原始需求來驗證設計：

設計驗證清單

  • ✓ 客戶可下多筆訂單（一對多關係）
  • ✓ 訂單追蹤日期、狀態與運送地址
  • ✓ 產品維持庫存與定價
  • ✓ 透過繼承支援多種付款方式
  • ✓ 訂單總金額根據項目、稅金與運費計算
  • ✓ 訂單狀態透過列舉類型追蹤
  • ✓ 地址同時用於客戶與運送

應用的設計原則

我們的類別圖示展示了幾個關鍵的物件導向設計原則：

  • 單一職責原則： 每個類別都有一個明確的用途
  • 開閉原則： 付款系統對擴展開放（新增付款類型），但對修改封閉
  • DRY（不要重複自己）： 重複使用地址類別，而非重複地址欄位
  • 封裝： 私有屬性搭配公開方法

匯出與分享您的圖形

當您對設計滿意後，VPasCode 讓您輕鬆分享並整合您的工作成果：

匯出選項

  • SVG: 向量格式，適用於文件編寫和簡報
  • PNG: 格式適用於快速分享和網頁使用
  • 可分享連結： 產生連結以進行團隊協作

與 Visual Paradigm 生態系統整合

為了撰寫完整的文件，您可以直接將您的圖表傳送至Visual Paradigm OpenDocs，建立結合圖表與詳細規格的專業技術文件。

此外，如果您正在使用Visual Paradigm AI App Studio，您可以將類別圖表作為 AI 協助應用開發的基礎。AI 可協助產生程式碼雛形、建議設計模式，甚至識別模型的潛在改進空間。

Embedding UML class diagrams into OpenDocs using VPasCode text to diagram platform
圖表多種匯出與分享選項

完整的 PlantUML 程式碼

這是我們訂單處理系統類別圖的完整 PlantUML 程式碼。您可以直接複製到 VPasCode 中，查看即時渲染效果：

PlantUML


在 VPasCode 中編輯 PlantUML
Plantuml Edit Plantuml in VPasCode 
@startuml OrderProcessingSystem

title 訂單處理系統 - 類別圖

class Customer {
    - customerId: Long
    - firstName: String
    - lastName: String
    - email: String
    - phone: String
    - registrationDate: Date
    - loyaltyPoints: Integer
    --
    + register(): Boolean
    + updateProfile(): void
    + getFullName(): String
    + getOrderHistory(): List
}

class Order {
    - orderId: Long
    - orderDate: Date
    - status: OrderStatus
    - shippingAddress: String
    - totalAmount: Double
    - taxAmount: Double
    - discountAmount: Double
    - deliveryDate: Date
    --
    + calculateTotal(): Double
    + addItem(product: Product, quantity: Integer): void
    + removeItem(orderItem: OrderItem): void
    + updateStatus(newStatus: OrderStatus): void
    + cancel(): Boolean
}

enum OrderStatus {
    PENDING
    CONFIRMED
    PROCESSING
    SHIPPED
    DELIVERED
    CANCELLED
    RETURNED
}

class Product {
    - productId: Long
    - name: String
    - description: String
    - price: Double
    - cost: Double
    - stockQuantity: Integer
    - category: String
    - reorderLevel: Integer
    - isActive: Boolean
    --
    + updateStock(quantity: Integer): void
    + isInStock(quantity: Integer): Boolean
    + applyDiscount(percentage: Double): Double
    + getProfitMargin(): Double
}

class OrderItem {
    - orderItemId: Long
    - quantity: Integer
    - unitPrice: Double
    - totalPrice: Double
    - discountAmount: Double
    - taxAmount: Double
    --
    + calculateTotal(): Double
    + applyDiscount(percentage: Double): void
    + getSubtotal(): Double
}

class Payment {
    - paymentId: Long
    - amount: Double
    - paymentDate: Date
    - method: PaymentMethod
    - status: PaymentStatus
    - transactionId: String
    - confirmationNumber: String
    --
    + processPayment(): Boolean
    + refund(): Boolean
    + verifyPayment(): Boolean
    + getPaymentReceipt(): String
}

enum PaymentMethod {
    CREDIT_CARD
    DEBIT_CARD
    NET_BANKING
    DIGITAL_WALLET
    COD
    UPI
}

enum PaymentStatus {
    PENDING
    COMPLETED
    FAILED
    REFUNDED
    CANCELLED
}

' RELATIONSHIPS
Customer "1" -- "0..*" Order : 產生 >
Order "1" -- "1..*" OrderItem : 包含 >
OrderItem "1" -- "1" Product : 參考 >
Order "1" -- "0..1" Payment : 擁有 >
Order ..> OrderStatus : 使用
Payment ..> PaymentMethod : 使用
Payment ..> PaymentStatus : 使用

@enduml
Edit Plantuml in VPasCode



在 VPasCode 中編輯 PlantUML

下一步與最佳實務

擴展設計

隨著系統成長，可考慮以下擴展：

  • 新增一個ShoppingCart類別用於暫時儲存訂單
  • 實作Discount以及優惠券 類別
  • 建立一個庫存 管理系統
  • 新增運輸 和追蹤 類別
  • 實作評論 和評分 功能

結論

建立專業的 UML 類別圖不必煩瑣。使用VPasCode，您可以高效地將業務需求轉換為視覺模型，利用即時渲染、AI 驅動的錯誤修正以及無縫匯出選項。

此訂單處理案例研究展示了如何透過基於文字的圖形繪製，將程式碼的精確性與視覺建模的清晰性結合。無論您是軟體架構師、開發人員或業務分析師，掌握使用可靠圖形程式碼工具的從文字到圖形的工作流程，對於將業務需求轉化為技術規格至關重要。

準備好開始建立自己的類別圖了嗎？請造訪VPasCode今天，體驗圖形程式碼的未來。基本功能免費，若需進階功能，請升級至 Visual Paradigm Online Combo Edition 或搭配活躍維護的 Visual Paradigm 桌面專業版。

立即開始繪製圖形

加入數以千計已使用 VPasCode 建立更佳軟體設計的開發人員與架構師行列。無需安裝—立即在瀏覽器中開始建立專業的 UML 圖形。

免費試用 VPasCode → www.vpascode.com

常見問題

什麼是 VPasCode？

VPasCode 是 Visual Paradigm 的統一文字轉圖形平台，可讓您使用 PlantUML、Mermaid 和 Graphviz 等流行格式建立圖形。它具備免費的程式碼編輯器，支援即時渲染、AI 錯誤修正以及多種匯出選項。

VPasCode 是否免費使用？

是的！VPasCode 提供免費功能，包括圖表編輯、即時渲染以及以 SVG 或 PNG 格式匯出。進階功能可透過 Visual Paradigm Online Combo Edition 或具備有效維護服務的 Visual Paradigm Desktop Professional Edition 使用。

VPasCode 支援哪些圖表類型？

VPasCode 支援多種圖表類型，包括 UML 類別圖、序列圖、用例圖、活動圖、ERD、流程圖、思維導圖、甘特圖等，可透過 PlantUML、Mermaid 和 Graphviz 格式實現。

我能否使用 VPasCode 與我的團隊合作？

當然可以！VPasCode 可讓您為圖表產生可分享的網址，方便與團隊成員協作。您也可以與 Visual Paradigm OpenDocs 整合，以進行完整的文件編寫。

VPasCode 是否支援離線使用？

VPasCode 是一個基於網頁的平台，需要網路連接。然而，您可將 PlantUML 程式碼儲存於本地，必要時使用其他 PlantUML 工具離線進行編輯。

Related posts:

PlantUML, Mermaid, or Graphviz? Which One Should You Choose?PlantUML, Mermaid, or Graphviz? Which One Should You Choose? Mastering UML Class Diagrams – An Order Processing Case StudyMastering UML Class Diagrams – An Order Processing Case Study Building a Professional Webhook Workflow Diagram with PlantUML and VPasCodeBuilding a Professional Webhook Workflow Diagram with PlantUML and VPasCode 使用 PlantUML 建立穩健的 ATM 現金提款序列圖使用 PlantUML 建立穩健的 ATM 現金提款序列圖
返回頂端