Below follows a examples of all different sequence diagram UML elements supported by the editor.

Click the example sequence diagram images to append them to the diagram, hover to see the example script.

Buttons

instructionsShow these instructions.

newStart working on a new diagram (same as opening a new tab in your browser, or changing the File Name in the save menu)

participantAdds a new participant into the diagram of type participant.

exportShows the diagram as an image which can be right clicked and copied. The size of the image depends on the current zoom level.

urlCreates a link for sharing containing all the data of the diagram.

openOpen a source script text file directly from your hard drive or from the browsers local storage.

saveSave the source script as a text file directly to your hard drive or in the browsers local storage.

pnghqSave the diagram as a HQ png image. The size of the image depends on the current zoom level.

jpglqSave the diagram as a LQ jpg image. The size of the image depends on the current zoom level.

svgSave the diagram as a vector based svg image.

infoAbout SequenceDiagram.org

Keyboard Shortcuts

Ctrl-S / Cmd-S - Save source
Ctrl-M / Cmd-M - Presentation mode
Ctrl-Space / Cmd-Space - Autocomplete in source
Ctrl-F / Cmd-F - Find in source
Shift-Ctrl-F / Cmd-Option-F - Replace in source
Shift-Ctrl-R / Shift-Cmd-Option-F - Replace all in source
Alt-G - Go to line in source

Title

sequence diagram title example
title Title A->B:info

Participants

sequence diagram participant example
participant Participant
sequence diagram actor example
actor Actor
sequence diagram boundary example
boundary Boundary
sequence diagram control example
control Control
sequence diagram database example
database Database
sequence diagram entity example
entity Entity
sequence diagram actor with multi line example
actor "**++Big and\\nbold name" as actorMultiline #red
sequence diagram participant with multi line example
participant "some long\\nname with **//styling//**" as participantMultiline
sequence diagram fontawesome icon example
fontawesome f099 Twitter #1da1f2
sequence diagram materialdesignicons icon example
materialdesignicons F1FF escalator

Messages

sequence diagram request response example
A->B:request A<--B:response
sequence diagram async request response example
A->>B:request A<<--B:response
sequence diagram self referencing message example
A->A:self message

Non-instantaneous Messages

sequence diagram non-instantaneous message example
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
sequence diagram non-instantaneous messages arriving after later message example
Client->(5)Server:first sent message space -6 Client->Server:later message

Incoming and Outgoing Messages

sequence diagram incoming and outgoing messages example
[->A:info B->]:info

Failure Messages

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

Notes and Boxes

sequence diagram notes over example
note over A:note over one\nmultiple lines\nof text note over A,B:note over several
sequence diagram notes on sides example
note left of A:note left of note right of A:note right of
sequence diagram box over example
box over A:box over one box over A,B:box over several
sequence diagram boxes on sides example
box left of A:box left of box right of A:box right of
sequence diagram angular box over example
abox over A:abox over one abox over A,B:abox over several
sequence diagram angular box on sides example
abox left of A:abox left of abox right of A:abox right of
sequence diagram round box over example
rbox over A:rbox over one rbox over A,B:rbox over several
sequence diagram round box on sides example
rbox left of A:rbox left of rbox right of A:rbox right of

References

sequence diagram notes over example
A->B:info ref over B,C:other interaction C->D:info

Dividers

sequence diagram divider example
participant A participant B participant C participant D ==info==

Create and Destroy

sequence diagram create message example
participant A actor X participant B A->B:info B-->*C:<<create>> note over C:do something B<-C:info destroy C B->*X:message to X note over X:do something destroyafter X A->B:info
sequence diagram create without message example
A->B:info create C note over C: C created without message A<-C:info
sequence diagram destroy silent example
A->>B:request A<<--B:response destroysilent B destroysilent A C->D: info

Activations

sequence diagram activation example
participant A participant B participant C participant D A->B:info activate B B->C:info activate C C->>D:info activate D B<--C:info deactivate C A<--B:info deactivate B B<-D:callback deactivate D activate B A<<--B:info deactivate B
sequence diagram activation with self reference example
participant B participant D activate D B->D:info activate B deactivateafter B D->D:info activate D space deactivate D

Spaces

sequence diagram space example
participant B participant D activate D B->D:info activate B space 3 deactivate B D->D:info activate D space deactivate D

Fragments

sequence diagram opt fragment example
opt optional note over A:info A->B:info end
sequence diagram alt fragment example
alt case 1 A->B:info else case 2 A->B:info else case 3 A->B:info end
sequence diagram loop fragment example
loop i < 1000 note over A:info A->B:info end
sequence diagram parallel thread fragment example
par info A->B:info1 thread test A->B:info2 thread test A->B:info2 end
sequence diagram parallel fragment example
par info A->C:info A->B:info end
sequence diagram group fragment example
group own name A->B:info end group own name [some text] A->B:info end
sequence diagram expandable fragment example
A->B:info1 expandable- info 1234567890 B->C:info2 C->D:info3 D->E:info4 end E->F:info5 expandable+ info qwertyurtyuiortyuioasdfghjkwertyuio B->C:info2 C->D:info3 D->E:info4 end

Participant Groups

sequence diagram participant group example
participantgroup #lightgreen **Group 1** participant A participant B end participantgroup #lightblue **Long\nname** participant C end B->C:info note over A,B:info
sequence diagram nested participant group example
participantgroup #lightgreen **Group 1** participantgroup #grey sub1 participant A end participantgroup #pink sub2 participant B end end participantgroup #lightblue **Long\nname** participant C end B->C:info note over A,B:info

Links

sequence diagram link example
A->B:This text contains a <link:http://example.com>link</link> note right of B:Here is <link:https://www.w3schools.com>another link</link>
sequence diagram participant link example
participant "Participant with a <link:http://example.com>link</link>" as Alice Alice->Bob:info

Frame

sequence diagram frame example
frame Example Diagram A->B:info C->A: info note over B,C:info
sequence diagram frame example
frame #red Example Diagram A->B:info C->A: info note over B,C:info

Text Styling

sequence diagram text styling example
box over A:**some bold text** box over A://some italic text// box over A:--some small text-- box over A:++some big text++ box over A:++**Big and bold\nlines of text**++\n//--italic and small--//
sequence diagram text styling color example
participant "Al<color:#red>ice</color>//**Long** ++name++//" as Alice box over Alice:Com<color:#00ff00>binations:\n++**Big and bold green\nlines of text**++\n//--ital</color>ic and small--//\n++Writing C\+\+ in big text using \ to escape +++
sequence diagram text styling example
note over A:""This is mono spaced""
sequence diagram text styling example
note over Bob:<size:20>infoinfo</size><size:10>infoinfo</size>
sequence diagram text styling example
note over Alice:<align:left>infoinfoinfo\ninfo</align> note over Alice:<align:center>infoinfoinfo\ninfo</align> note over Alice:<align:right>infoinfoinfo\ninfo</align>

Colors

sequence diagram color participants example
participant A#red database B#green
sequence diagram color divider example
participant A participant B participant C participant D ==info==#lightgreen
sequence diagram color boxes and notes example
note over A#yellow:info rbox over A#violet:info abox right of A#steelblue:info
sequence diagram color messages example
A-#red>B:info A<#green--B:info A--#blue>>B:info
sequence diagram color activations example
participant A participant B activate A #00ee77 A->B:info activate B #red B->B:info activate B #lightgray deactivateafter B
sequence diagram color fragment example
loop #ff00ff info 1234567890 B->C:info2 C->D:info3 D->E:info4 end
sequence diagram label color fragment example
group #2f2e7b label text #white [condition] A->B:info end loop #2f2e7b #white condition A->B:info end

Active Color

sequence diagram active color example
participant B participant C participant D activecolor #red activecolor C #blue activate B B->C:info activate C C->>D:info activate D B<--C:info deactivate C deactivate B B<-D:callback activate C deactivate D activate B B->D:info deactivate B B<-D:info activate B #green

Fonts

sequence diagram font example
fontfamily mono participant A note over A:This is mono spaces

Automatic Numbering

sequence diagram automatic number example
autonumber 1 A->B:info B->B:info autonumber 10 C->D:info A<-B:info A->B:info autonumber off B->C:info C->D:info

Linear Messages

sequence diagram linear messages example
linear A->B:info B->C:info C->D:info C<--D:info B<--C:info A<--B:info A->>B:info B->>C:info linear off C->>D:info

Parallel

sequence diagram parallel example
parallel A<<-B:info B->C:info note left of D:info parallel off C->>D:info

Participant Spacing

sequence diagram participant spacing example
participantspacing equal participant A participant B participant C A->B:info info info

Entry Spacing

sequence diagram entry spacing example
entryspacing 0.1 A->B:info A->B:info entryspacing 3 A->B:info entryspacing 1 A->B:info A->B:info

Life Line Color

sequence diagram active color example
participant A participant B participant C lifelinecolor #blue lifelinecolor B #red A->B:info B->C:info B<--C:info A<--B:info

Life Line Weight

sequence diagram active color example
lifelineweight 4 A->B:info B->C:info B<--C:info A<--B:info

Large Example

sequence diagram example
Source too large to display