Skip to main content

Sequence Diagram

A sequence diagram shows object interactions arranged in time sequence. It depicts the objects involved in the scenario and the sequence of messages exchanged between the objects needed to carry out the functionality of the scenario.

Wikipedia

The syntax is based on Mermaid 8.9, with some other good stuff:

A Simple Demo​

sequenceDiagram
  autonumber
  participant [<actor> User]
  User->>Pintora: Draw me a sequence diagram（with DSL）
  activate Pintora
  Pintora->>Pintora: Parse DSL, draw diagram
  alt DSL is correct
    Pintora->>User: Return the drawn diagram
  else DSL is incorrect
    Pintora->>User: Return error message
  end
  deactivate Pintora
  @note left of Pintora
  Different output formats according to render targets
  1. In browser side. output SVG or Canvas
  2. In Node.js side. output PNG file
  @end_note

Multiline Note​

Add @note, placement, and participant names after message to add a note.

sequenceDiagram
  Frida-->>Georgia: Flowers are beautiful
  @note over Frida,Georgia: Painters
  @note right of Georgia: Right
  @note left of Georgia
  multiline
  note
  @end_note

Multiline text for message​

sequenceDiagram
  Alice-->>Bob: Definitely,\nMaybe

Color group messages​

Specify background to group section by adding a hex color string - which starts with # - after group-like keyword such as loop/alt/par and so on.

sequenceDiagram
  loop #88bbf4 with bg color
    A-->B: message inside loop
  end
  alt #ccdd77 Success
    A-->B: Congrats!
  else #ee776f Fail
    A-->B: error handling
  end

Divider​

You can split a diagram using == description == to divide your diagram into different parts. Please keep in mind that the space between = and description is required.

sequenceDiagram
  Frida->>Georgia: I like your paintings about flowers
  == Totally fictional ==
  Georgia->>Frida: I like your portraits
  == They didn't have this conversation ==
  Frida-->>Frida: I like flowers on my hair, too

Participants Boxes​

You can draw participants in boxes, just declare them between box and endbox.

Background color and title are optional.

sequenceDiagram
  box #e7f2ff "English Corner"
  participant A
  participant B
  endbox

  A ->> B: Hello
  B ->> C: Hola

Classifier types​

You can specify a classifier to participant by the syntax:

participant [<classifier> Name]

A classifier type can be associated with symbols to have a different shape for the participant.

Symbols are shared across pintora by a symbolRegistry, it can be extended by calling pintora.symbolRegisty.register, we will cover this in another chapter.

Some builtin symbols are:

  • actor
  • database
  • node
sequenceDiagram
  participant [<actor> A]
  participant [<database> B] as "Storage"
  participant [<node> C]
  A-->B: Hello

Override config​

You can override diagarm config through @param directive.

All available configs can be seen in the Config page.

sequenceDiagram
  @param loopLineColor #79caf1
  @param actorBackground #61afef
  @param actorTextColor #ffffff
  @param {
    messageFontFamily Consolas
    dividerTextColor #61afef
  }
  User->>Pintora: render this
  activate Pintora
  loop Check input
    Pintora-->>Pintora: Has input changed?
  end
  == Divider ==