OneTaskBy Tim King · Updated
Sequence Diagram Maker
API Call Flow Diagrams From Simple Text, With Dashed Replies and Numbering
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Sequence Diagram Maker works
This sequence diagram maker draws who talks to whom, in order. Type one message per line as "A -> B: message", use "-->" for a reply, and the page draws a lifeline for each participant and an arrow for each message, top to bottom. Self-calls loop back, replies are dashed and the result downloads as SVG or PNG. Nothing is uploaded.
Sequence diagram maker: one line per message
A sequence diagram shows an interaction over time. Participants sit across the top, each with a dashed lifeline running down, and every message is an arrow from one lifeline to another, in the order it happens. It is the clearest way to explain a login, a payment, an API call chain or a support conversation, because the reader can follow it like a script. Typing it as text means the diagram can live next to the code or document it describes.
Writing the messages
- "Browser -> Server: POST /login" draws a solid call arrow.
- "Server --> Browser: 200 OK" draws a dashed reply arrow.
- "Server -> Server: Check password hash" draws a self-call that loops back.
- "participant Name" on its own line adds a participant without a message, or fixes the left-to-right order. Otherwise participants appear in the order they are first mentioned.
The message text after the colon is optional. Lines starting with "#" are comments.
Where sequence diagrams come from
Message sequence charts were standardised by the ITU for telecoms protocols in the early 1990s, and the sequence diagram became part of UML, the Unified Modeling Language, later that decade. This tool keeps to the core of the notation: participants, lifelines, synchronous calls, replies and self-calls. It leaves out activation bars, alt and loop frames and notes. When you need those, the Mermaid live editor supports the fuller syntax.
Tips for a readable diagram
Put the participant that starts the interaction on the left, usually the user or browser, and order the rest by how deep in the system they sit. Keep message text short and specific, like "GET /orders?id=42" rather than "request". Turn on Number messages when the diagram will be discussed in a meeting or review, so people can refer to "step 7". For the data behind the calls, sketch the tables with the ER diagram maker, and for who owns each step of a business process use the swimlane flowchart maker.
FAQ
How do I control the order of participants?
Participants appear left to right in the order they are first mentioned. To fix the order, list them first with "participant Name" lines, one per participant, before any messages.
What is the difference between -> and -->?
A single dash draws a solid arrow for a call or request. A double dash draws a dashed arrow, which is the usual way to show a reply or return value going back to the caller.
Why is a message label cut short?
A label has to fit between the two lifelines it connects. Messages between neighbours get the least room. Widen the preview, shorten the text or hover the label to see it in full.
Can it draw alt, loop or opt frames?
No, this tool keeps to participants, calls, replies and self-calls. For frames, notes and activation bars, paste Mermaid sequenceDiagram syntax into the Mermaid live editor instead.
See also: all Diagram Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, 3D Science, Tracker Music.
Related tools
Mermaid Live Editor
Type Mermaid syntax, preview it live and download SVG or PNG.
Swimlane Flowchart Maker
Type lanes and steps to draw a cross-functional swimlane flowchart.
ER Diagram Maker
Type tables and relationships to draw a crow's foot ER diagram.
Flowchart Maker
Type step -> step lines and download a flowchart as SVG or PNG.
SVG To PNG
Rasterise an SVG to a PNG at any width.