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.


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

A Simple Demo

  title: Sequence Diagram Example
  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
  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

Multiline Note

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

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

Multiline text for message

  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.

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


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.

  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.

  box #e7f2ff "English Corner"
  participant A
  participant B

  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
  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.

  @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?
  == Divider ==