Class and state diagrams

Class and state diagrams model code rather than data: an object graph (class) and a lifecycle (state). Both describe the same web shop as the Database Schema page, here as classes and as the order’s state machine.

Class

The domain as an object model: fields (+name: Type) and methods (+method(args) ReturnType), with relationships between classes.

Class diagram of the web-shop domain rendered by vizzy

classDiagram
  class Customer {
    +UUID id
    +String email
    +String name
    +orders() Order[]
  }
  class Order {
    +UUID id
    +OrderStatus status
    +Money total
    +addItem(Product, int) void
  }
  class OrderItem {
    +int quantity
    +Money unitPrice
  }
  class Product {
    +UUID id
    +String sku
    +Money price
    +int stock
  }
  Customer --> Order : places
  Order *-- OrderItem : contains
  Product --> OrderItem : ordered as

State

An order’s lifecycle: the values its status column moves through. [*] is the start and end. The label after : names the transition.

State diagram of the order lifecycle rendered by vizzy

stateDiagram-v2
  [*] --> Pending : create
  Pending --> Paid : payment captured
  Pending --> Cancelled : cancel
  Paid --> Shipped : dispatch
  Paid --> Refunded : refund
  Shipped --> Delivered : confirmed
  Delivered --> [*]
  Cancelled --> [*]
  Refunded --> [*]

To colour a node in either diagram, use a vizzy-fence style override. Mermaid’s own style/classDef only apply inside flowcharts.