Sequence diagrams
A sequence diagram is a timeline. Each participant is a column, in the order it is first named. Each message, note, or
fragment is a row, in source order. There is no ranker, no feedback arc, and no direction flip: TB and LR are
flowchart words. A narrow viewport compresses SequenceConfig.columnGap and rowPitch, then the same container fit
used by other diagrams scales the picture. Below the floor, the row scrolls.
Solid arrows are requests. Dashed arrows are replies. A label sits above the shaft. A message may cross columns that are not its endpoints, and a long label widens the gaps it crosses.
MermoidAscent.diagram(span)Participants and arrows
sequenceDiagram opens the diagram. participant is a rounded header. actor is a stick figure in the same column.
A message may name someone who was never declared; that id becomes a participant at the end of the column order.
| Arrow | Line | Head | Tail |
|---|---|---|---|
-> | solid | none | none |
--> | dashed | none | none |
->> | solid | filled | none |
-->> | dashed | filled | none |
<<->> | solid | filled | filled |
<<-->> | dashed | filled | filled |
-x / --x | solid / dashed | cross | none |
-) / --) | solid / dashed | open | none |
A->>+B activates B at the arrowhead. B-->>-A deactivates B, the sender. A second activation on the same lifeline sits to the
right of the bar already open. An extra deactivate is a no-op. A bar that is still open at the end of the diagram
runs to the last row.
autonumber prefixes messages. autonumber off stops. autonumber 3 starts at 3. autonumber 3 2 steps by 2. A step
of 0 is read as 1. The number is painted, and it counts toward the width of the label.
MermoidAscent.diagram(fragments)Notes and fragments
note left of A, note right of A, and note over A,B each take a row. The text is one line after the colon.
loop, opt, critical, and break wrap one block and close with end. alt / else and par / and add
sections. else is only legal inside alt. and is only legal inside par. rect rgb(r, g, b) and
rect rgba(r, g, b, a) paint a highlight behind the rows they wrap. Channels are 0 to 255. Alpha is 0 to 1.
A later participant A as "other" for an id that already has a different label, or a switch between participant and
actor, is a parse error. Declaring the same id with the same label again changes nothing.
Message text may break a line with a <br> or <br/> tag, written in the source as those five or six characters. No other HTML is read.
Boxes, creation, and stereotypes
box <color> <title> paints a band behind the participants it wraps, and closes with end. The color is a name, a
#hex, or rgb() / rgba().
create participant Carol (or create actor) puts that header on the create row. The lifeline starts under the box.
Everyone declared with participant or actor, and everyone first named by a message, still spans the whole diagram.
destroy Carol ends the lifeline on an X.
@{"type": "boundary"} (also control, entity, database, collections, queue, actor) draws that UML icon
instead of a plain header. An unknown type is ParseError.UnknownStereotype and the message names the raw value.
link Alice: Dashboard @ https://example.com and links Alice: Dashboard @ https://a, Wiki @ https://b become a
title, and a single link wraps the header in an <a>. click, style, classDef, and class are the same
bindings a flowchart uses. accTitle and accDescr become the SVG <title> and <desc>, and the accessible name of the hybrid root.
MermoidAscent.svgDiagram(Mermaid("""sequenceDiagram
box rgb(220, 232, 246) People
actor Alice
participant Bob@{"type": "boundary"}
end
Alice->>Bob: hello
create participant Carol@{"type": "control"}
Bob->>Carol: start
alt ready
Carol-->>Bob: yes
else later
Carol-->>Bob: wait
end
note right of Carol: held the lock
destroy Carol
""".stripMargin))The fragment keyword sits on a tab in the top-left of the frame. else and and get the same plate. A note is a
rectangle with the corner folded over.