Skip to content
misoto22 design

Diagrams

SequenceFigure

A call chain over time: who asks whom, in what order, and what comes back.

Ships from@misoto22/design/diagrams

When to reach for it

The only figure whose vertical axis means something. A message carries an explicit y, so two calls eight units apart happened together and two two hundred apart did not.

Examples

default

A cache miss

The vertical axis is time, not layout.
A cache miss4 elements and 6 relationships. The vertical axis is time, not layout.CLIENTWeb appReactSERVICEAPIhandlerDATARedisDATAPostgres

4 elements and 6 relationships. The vertical axis is time, not layout.

  • Web app (frontend) — React
  • API (backend) — handler
  • Redis (database)
  • Postgres (database)
  • Web appAPI: GET /me
  • APIRedis: read
  • RedisAPI: miss
  • APIPostgres: select
  • PostgresAPI: rows
  • APIWeb app: 200 JSON
Key
  • Primary path
  • Call
  • Return

Notes

A call chain over time: who asks whom, in what order, and what comes back.

The one diagram type here whose vertical axis MEANS something. Every other figure's y is layout; a sequence's y is time, which is why a message carries an explicit y rather than an index — two calls 8 units apart happened together, and two 200 apart did not, and an evenly spaced list of messages would erase that distinction while looking tidier.

Lifelines are hairlines, not solid rules, because they are the axis rather than the content. A lifeline drawn at the weight of a message is a diagram where seven vertical lines compete with twelve horizontal ones.

Activation bars say who is BUSY, which is the fact a sequence diagram carries that a list of calls does not — the third participant's bar overlapping the second's is the reason to draw them at all.

Segments band the axis into phases — request, fallback, response — printed as a rule with a mono caption rather than as a tinted panel, for the same reason architecture boundaries are: a second ground inside the figure would sit under every message label's mask.

A return message is dashed AND takes an open arrowhead. Two signals rather than one, because the reply is the thing a reader most often needs to pick out of a dense trace, and a dash alone is doing the same work as dashed already does for an asynchronous call.

Props

SequenceFigure props
PropTypeDefaultDescription
specrequiredSequenceSpec

Also accepts everything in FigureChrome. Those are forwarded to the underlying element and are not listed row by row.

Accessibility

  • Return messages are dashed AND take an open arrowhead — two signals, because the reply is what a reader most often needs to pick out of a dense trace.
  • The message list beside the picture reads in order, which is the same order the axis is drawn in.