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: Message draws a message from participant One to participant Two.
  • Two -> Two: To self is 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.

swimlanes.io
Swimlanes.io is a simple free online tool for making sequence diagrams