Sequence diagram tool

Type a sequence diagram and see it drawn as you go: participants and their lifelines, calls and replies, activations, notes, and alt, opt and loop blocks, always in order and evenly spaced. The syntax is Mermaid's, so existing Mermaid code pastes straight in.

Messages

A->>B: text: a call (solid line, arrowhead)
B-->>A: text: a reply (dotted line)
A-)B: text: an asynchronous message (open arrowhead)
A->B and A-->B: no arrowhead; A-xB and A--xB: a cross, for a message that is lost
A->>A: text: a message to itself, drawn as a loop

Participants appear in the order they are first mentioned. Declare them first to set the order or a longer name: "participant API as Orders API", or "actor User" for a stick figure.

Activations, notes and blocks

activate API … deactivate API, or the shorthand A->>+B (activates B) and B-->>-A (ends it)
Note over A,B: text, Note left of A: text, Note right of A: text
alt condition … else other … end; also opt, loop, par (with and), critical (with option) and break
title Checkout puts a title on top, and autonumber numbers the messages

Lines starting with %% are comments, and <br> starts a new line in a label.

Editing it

Double-click the diagram to open its script beside a live preview: the script highlighted on the left, the diagram redrawn on the right as you type. Format tidies the indentation, a line it doesn't understand is listed under the script while the rest is still drawn, and Ctrl+Enter applies it. The format panel's text box edits the script too.

The diagram is one shape: move it, scale it from a corner, and put other shapes, notes or arrows next to it. Export it as PNG or SVG like any diagram.

Questions

Is it compatible with Mermaid?

With the common part of Mermaid's sequence diagrams: participants and actors, every arrow type, activations, notes, blocks, title and autonumber. Not yet: boxes around groups of participants, links and menus, and creating or destroying participants partway.

Can I use it for UML sequence diagrams?

Yes: lifelines, synchronous and asynchronous messages, replies, activation bars and combined fragments (alt, opt, loop, par, critical, break) are the parts of a UML sequence diagram most people draw.

Where is my diagram saved?

In your browser, with your other diagrams; nothing is uploaded. Share it as a link, or download it as a .diag file.