Class and state diagrams

Two more Mermaid types for modelling code, not data: an object graph (class) and a lifecycle (state). Both describe the same web-shop as the Database Schema — 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.

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/end; the label after : names the transition.

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

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