# SequenceFigure A call chain over time: who asks whom, in what order, and what comes back. - Group: Diagrams - Import: `import { SequenceFigure } from '@misoto22/design/diagrams'` - Page: https://ui.misoto22.com/components/sequence-figure/ - Related: workflow-figure, architecture-figure ## 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. ## 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. ## SequenceFigure 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 - `spec` (required) — `SequenceSpec`. Also accepts: `FigureChrome`. ## Example — default ```tsx import { SequenceFigure } from '@misoto22/design/diagrams' ```