Sequence diagram (D2)

D2 draws sequence diagrams natively, with actors, messages and grouped blocks, in a syntax that stays consistent with the rest of the language.


#What this example shows

  • shape: sequence_diagram, which switches the whole board.

  • Grouped blocks for alternatives.

  • Self-messages, drawn as a loop back to the same actor.


#A worked example

Open it, edit it, or copy the source below.

Sequence diagram (D2)

The source, which you can paste into a new diagram and edit:

shape: sequence_diagram

customer: Customer
ui: Checkout
api: Order API
pay: Payments
db: Orders DB

customer -> ui: Confirm order
ui -> api: POST /orders
api -> db: INSERT (pending)
api -> pay: authorise

authorised: {
  pay -> api: auth code
  api -> db: UPDATE paid
  api -> ui: 201 Created
}

declined: {
  pay -> api: declined
  api -> db: UPDATE failed
  api -> ui: 402 Payment Required
}

api -> api: publish OrderPaid
ui -> customer: Confirmation

#Making it your own

  • Blocks with braces become grouped frames, which is how you show alternatives.

  • Actors appear in the order they are first declared.

  • A message from a node to itself draws a self-loop.



Nesting is the whole idea.