What Is a Sequence Diagram and How Do You Create One Online?
A sequence diagram is a picture of how participants interact over time: who sends what to whom, and in what order. You can create one online with a text-based tool such as Swimlanes.io, where you type the interaction on the left and the diagram updates in real time on the right. This approach suits anyone who wants a quick diagram without dragging shapes around — for example, documenting a login flow or an API call chain — and it works best when the interaction can be described as a short list of ordered messages.
What a sequence diagram shows
A sequence diagram focuses on the order of events rather than on system structure. Each participant gets its own vertical line, and time runs downward, so a message drawn lower on the page happens later than one above it. That makes the diagram useful for questions like:
- Which component calls which, and in what sequence?
- Where does a response come back, and to whom?
- What happens in parallel or as a side effect?
The basic notation
You only need a few elements to read or write one:
| Element | What it represents |
|---|---|
| Participant | A person, service, or system taking part in the interaction |
| Message arrow | A call or signal sent from one participant to another |
| Arrow direction | Who initiates and who receives |
| Note | Extra context attached to a step |
| Self-message | A participant sending something to itself |
In a text-based tool, each of these maps to a line of text rather than a drawn shape.
How a text-based tool turns text into a diagram
Swimlanes.io is described as a free webapp for making sequence diagrams. The workflow is deliberately minimal: you edit the text on the left, and the diagram is updated in real time. The tool's own welcome example shows the pattern:
One -> Two: Message
note: **swimlanes.io** is a simple online tool for creating _sequence diagrams_.
Two -> Two: To self
Two -->> Three: _Notification_
Two -> One: `ok`
Reading that example tells you most of the syntax:
One -> Two: Messagedraws a message from participant One to participant Two.Two -> Two: To selfis a self-message, where a participant sends to itself.Two -->> Three: _Notification_uses a dashed arrow style, useful for distinguishing a notification or return from a normal call.note:attaches a note to the diagram.- Text wrapped in
**bold**,_italic_, or`code`is formatted in the rendered output.
The input is plain text, the action is editing that text, and the expected result is an immediately updated diagram — no separate render step.
Saving and sharing your diagram
Swimlanes.io offers two routes, and the difference matters:
- Copy the URL. The URL encodes the current diagram, so copying it saves or shares that version. The tool notes that the URL changes whenever you update the diagram, so a link you copied earlier points to the earlier state, not your latest edit.
- Sign in to create an account. Signing in lets you collect all of your diagrams in one place, which is more convenient than keeping a list of URLs.
You can also download your sequence diagrams as images, which is the practical choice when you need to drop the diagram into documentation, a slide deck, or a ticket where a live link isn't appropriate.
When this approach fits — and when it doesn't
A text-based sequence diagram tool is a good fit when:
- The interaction is naturally a list of ordered messages.
- You want the diagram to live in version control or a text document.
- You need to iterate quickly and see changes instantly.
It's a weaker fit when the diagram is primarily spatial — for example, a layout diagram or a flowchart where position carries meaning — because you'd be fighting the text format instead of using it.
Where to go for more
The welcome example is intentionally small. For advanced features such as self-messages, notifications, and other arrow styles, Swimlanes.io points to a full syntax overview in its gallery. Start there once the basic A -> B: message pattern stops covering what you need to express.