Skip to main content

SequenceDiagram

The SequenceDiagram coordinator manages lifelines, protocol messages, and execution activations across stage participants.

import { Card, layout, SequenceDiagram } from "stageroutine";

const a = Card("A", { width: 12, height: 5 });
const b = Card("B", { width: 12, height: 5 });

layout.hstack([a, b], {
  x: "center",
  y: 14,
  gap: 38,
});

const diag = SequenceDiagram({
  participants: [a, b],
  startY: 34,
  gapY: 20,
  lifelineLength: 12.5,
});

const msg1 = diag.message(a, b, "Message 1");
const msg2 = diag.message(b, a, "Message 2");
diag.activate(b, { from: msg1, to: msg2 });

Participants and Lifelines​

Pass participant elements to SequenceDiagram({ participants }). Each participant receives a vertical dashed lifeline:

const seq = SequenceDiagram({
  participants: [client, service],
  startY: 32,
  gapY: 9,
});

Lifelines automatically extend their length to fit all registered messages and activation bars.

Messages and Activations​

Create messages between actors using diag.message(from, to, options):

  • Messages are spaced automatically along the vertical axis using startY and gapY.
  • Pass { from, to } message handles or { y, height } to diag.activate(actor, ...) to place an activation bar.

Scene Registration​

Include ...diag.elements in your scene to register all generated lifelines, activations, and connectors:

stage.scene("Protocol").with(a, b, ...diag.elements);

API Reference​

Lifeline height is its length in stage units (default: 42). hasActivationAt(y) accepts stage units. Messages use rowY (default: automatic); zero is valid. Message references control activation geometry when supplied. Diagram elements remain flat stage siblings and follow their actor relationships.