Build a Sequence Diagram: Messages, Replies and Elapsed Time

What does this sequence diagram skill make?

Sequence Story v1.1.0 creates participant lifelines and ordered request/response arrows from your reviewed steps. Open the complete package’s editor.html in a modern browser to edit and export SVG, a 2560 × 1440 PNG, CSV, project JSON or an editable HTML file. The package costs USD 4.99. The browser editor needs no installation, provider account or paid API.

Use it to explain a small API conversation or a handoff order. It is an illustrative sequence, not a distributed tracing collector, concurrency simulator or latency benchmark. A supplied duration is an input; a calculated total does not make it an observed production measurement.

Define participants and what each duration means

Start from a reviewed API contract, incident note or explicit fictional example. Name two to five distinct participants, and supply one to eight messages between different known participants. Each message needs from, to, a short label, a numeric ms value from 0 to 100000 and a true/false reply flag. Keep the source label visible.

The editor adds ms in message order; the arrow label shows elapsed time after that message. Decide whether your source represents non-overlapping step durations before using that sum. Overlapping spans, absolute timestamps and percentile values cannot be summed as if they were consecutive steps. Reply changes the dashed arrow style; it does not automatically pair messages or infer waiting time.

Check three examples before replacing the data

Open editor.html and choose each named starting point. Read Calculated result and compare the exported CSV with these independent sums. All three examples are fictional. Their Report, Stage and Print treatments change presentation, not the arithmetic. The source package includes examples/default.json, examples/second.json and examples/third.json.

Make one change and verify the actual exports

• Start with A request, end to end. Change the second message duration from 80 to 120 and Apply changes. The cumulative labels should become 20, 140, 180 and 190 ms; the message count stays four.
• Use Add item or Remove item to change records. Check both participant names after copying a row. Invalid actors, a self-message or a negative duration must stop the update; correct the input rather than removing validation.
• Export analysis and CSV and reconcile the final 190 ms total. Export SVG and PNG and check labels at your intended display size. Exports apply pending edits first. Save project JSON or editable HTML before closing; the editor is not cloud storage.

Open the current sequence diagram example

Rebuild a reproducible local handoff

For repeatable file generation, run this command from the complete installed package with Node.js 24.15 or newer. Use a new output folder. It produces index.html, result.svg, result.csv, project.json, analysis.json, README and license files, plus manifest.json with SHA-256 hashes. This command does not render a video or call an external API.

For your revised delivery, save project JSON from the editor and pass that downloaded file’s path to --input, with another fresh --output. Confirm the new result.svg, result.csv and analysis.json agree with the browser. Keep the input, source explanation and manifest with the output. Optional video rendering is a separate workflow requiring FFmpeg and the pinned npm dependency; a browser preview is not an exported MP4.

node scripts/build.mjs --input examples/default.json --output ./sequence-practice

Choose the next workflow by the question

Use a sequence diagram for who sends what and in which order. Use API documentation for endpoints and schemas, a system map for relationships, or an incident replay for timestamped observations and unresolved evidence. Keep each document’s claims within its actual inputs.

Document endpoint contracts with OpenAPI

Map components and typed relationships

Reconstruct an observed incident timeline