Sequence Diagram Instructions

Get Started

This is a two-way editor: type source text to update the diagram, or edit the diagram on the canvas to update the source.

1. Put @sequence on the first non-blank, non-comment line. The marker is optional because sequence mode is the default. Copy a complete example using the icon below an image, then paste it into the source editor.
2. Write a message such as A->B:request. Participants A and B are created automatically; use participant declarations to add them explicitly.
3. On the canvas, click and drag from a participant's vertical lifeline onto another lifeline to create a message arrow. Double-click a participant or message to edit its text.

⎘

@sequence A->B:request A<--B:response

Click an element to select only that element. Ctrl-click / Cmd-click adds or removes an element from the selection. Click empty space or press Escape to clear the selection.

Drag from an inactive area of the canvas to select fully enclosed elements with a rectangle. Enclose a participant's header, not its whole lifeline; enclose a fragment's complete frame. Messages, notes, and else dividers inside a fragment can also be selected independently. Activations and hidden contents of collapsed fragments are not independently selectable. Each rectangle replaces the previous selection.

Existing message-creation and move targets keep their drag actions, including Ctrl/Cmd/Shift message shortcuts. A rectangle starts only where no existing click or drag action applies. Selection does not move elements as a group.

Press Delete to remove the selected elements together. Deleting a participant also removes its interactions. Deleting an expanded fragment keeps its unselected contents; deleting a collapsed fragment also removes its hidden contents. One Ctrl-Z / Cmd-Z restores the entire deletion.

Press Escape to cancel the current interaction. Click in the source editor before using Delete to edit text.

See Editor Instructions for shared toolbar buttons, storage options, presentation modes, undo/redo, and source-editor shortcuts.

Comments

• Start a line with # or // to add a comment. Comments do not appear in the diagram.
• Keep comments on their own lines; trailing comments are not supported.
• Comments may appear before @sequence without affecting mode selection.

Title

• The title is displayed at the top of the diagram
• A diagram has one title: a second title line is marked as an error and the first one is used
• Double-click the title to edit its text. Click it and press Delete to remove it.
• Note: The title can also be used as the file name on the sequencediagram.org platform (enabled in settings) when theicons are clicked

⎘

title Title A->B:info

⎘

title <size:30><color:#violet>THIS IS A LARGE TITLE\nWITH A </color>LINE BREAK</size> participantspacing 14 Alice->Bob:info Alice<--Bob:info

Participants

• Use the add-element toolbar button to add a participant.
• The following special participant types exist
  • participant - box with participant name inside (the default)
  • rparticipant - rounded box
  • actor - specific icon
  • boundary - specific icon
  • control - specific icon
  • database - specific icon
  • entity - specific icon
  • materialdesignicons - unicode code points (see right hand side in the gray bar after clicking an icon)
  • fontawesome6solid - unicode code points (see top right corner after clicking an icon)
  • fontawesome6regular - unicode code points (see top right corner after clicking an icon)
  • fontawesome6brands - unicode code points (see top right corner after clicking an icon)
  • image - png image data url, maximum data url size is 50KB, the rendered size is calculated based on maximum participant height, add padding in the top of the image to decrease rendered width and total size
  • Note: fontawesome5solid/regular/brands and fontawesome (v4) are now deprecated but will remain supported until at least 2025
• The first row that names a participant declares it: a participant row after a message, note or other row using the name is an error
• A displayed name can be used to style the participant name or add line breaks:
  • actor "<color:#green>My long display\nname with color</color>" as Alice
• Double-click a participant to edit it.
• Drag a participant sideways past another participant to change their order.
• Click a participant and press Delete to remove it and its interactions.

⎘

participant Participant

⎘

rparticipant Rounded

⎘

actor Actor

⎘

boundary Boundary

⎘

control Control

⎘

database Database

⎘

entity Entity

⎘

actor "**++Big and\nbold name" as actorMultiline #red

⎘

participant "some long\nname with **//styling//**" as participantMultiline

⎘

materialdesignicons F1FF escalator

⎘

fontawesome6solid f48e "++**Syringe**++" as Syringe #red fontawesome6regular f0f8 Hospital #blue fontawesome6brands f3b6 Jenkins #green

⎘

image data:image/png;base64,iVB... png participant

⎘

database Database #lightblue #green;3;dashed actor Actor #yellow #orange;4 boundary Boundary #salmon #red control Control #lightgreen entity Entity ;3;dashed participant Participant #pink ;0 participant "++**Participant 2**++" as Participant2 ;0

Bottom Participants

• The participants can be displayed in the bottom of the diagram by using the bottomparticipants keyword which renders all the participants in the bottom of the diagram
• A second bottomparticipants is an error
• Note: An alternative for displaying participants when scrolling in a large diagram is "View" -> "Participant Overlay On Scroll"

⎘

bottomparticipants participant A participant "BBBB\nBBBB" as B materialdesignicons f14d note fontawesome6regular f0f8 Hospital fontawesome6brands f3b6 Jenkins actor Actor A->B:info A->note:info A->Hospital:info A->Jenkins:info A->Actor:info

Messages

• Click and drag from one participant's vertical lifeline onto another lifeline to create a message arrow.
• Hold Shift before starting the drag for a dashed line, Ctrl / Cmd for an open arrowhead, or both for a dashed line with an open arrowhead.
• Double-click a message to edit its text.
• Drag the arrow's head or tail onto another lifeline to change that end's participant. Drag the middle of the message up or down to change its position.
• Click a message and press Delete to remove it.
• Use \n for a new line.

⎘

A->B:request A<--B:response

⎘

A->>B:request A<<--B:response

⎘

A->A:self message

⎘

Alice-[;4]>Bob:Test12345 Alice-[;2]>>Bob:Test Alice-[#00ff00;2]>Bob:Test Alice-[#red;4]->Bob:Test Alice<<-[#red;3]-Bob:Test Alicex[#red;3]-Bob:Test Alice-[;4]>(5)Bob:Test Bob-[;4]>Bob:Test Alice<-[;3]>Bob:Test Alice<-[#00ff00;2]>Bob:Test Alice<-[#red;3]>Bob:Test

Non-instantaneous Messages

• Non-instantaneous messages are created by adding ([delay]) before the target participant, examples:
  • A->(1)B: info
  • A-->(5)B: info
  • A->>(2)B: info
• A space on either side of the delay is optional: A -> (1) B: info
• Otherwise non-instantaneous messages behaves just like normal messages

⎘

participant A participant B participant C A->(1)B:info A(1)<--B:info A(1)<-C:info B->(5)C:info\ninfo activate B activate C B(1)<--C:info deactivate C deactivate B

⎘

Client->(5)Server:first sent message space -6 Client->Server:later message

Incoming and Outgoing Messages

• Incoming and Outgoing Messages are created by using the special participants [ and ], examples:
  • [->A: info
  • A->]: info

⎘

[->A:info B->]:info

Failure Messages

• Failure Messages are created by using x to denot the arrow head, examples:
  • A-xB: info
  • A--#redx(1)C: info

⎘

A-#redxB:failure 1 C-xB:failure 2 Bx-B:failure 3 C(5)x--A:failure 4

Notes and Boxes

• Right-click in the diagram and choose a note or box from the context menu to add one.
• Double-click a note or box to edit its text.
• For a note or box spanning several participants, drag either end to change its span.
• Drag the middle of a note or box up or down to move it; its bottom edge determines the vertical position.
• Click a note or box and press Delete to remove it.
• Use \n for a new line.

⎘

note over A:note over one\nmultiple lines\nof text note over A,B:note over several

⎘

note left of A:note left of note right of A:note right of

⎘

box over A:box over one box over A,B:box over several

⎘

box left of A:box left of box right of A:box right of

⎘

abox over A:abox over one abox over A,B:abox over several

⎘

abox left of A:abox left of abox right of A:abox right of

⎘

rbox over A:rbox over one rbox over A,B:rbox over several

⎘

rbox left of A:rbox left of rbox right of A:rbox right of