Markdown seqdiag editor

Write a sequence diagram in seqdiag's short text and see it drawn as you type: who calls whom, in what order, and what comes back. The text sits in your Markdown as a ```seqdiag block. Free in your browser, with no Python and no sign-up.

seqdiag is part of the blockdiag family. For Mermaid's syntax, use the Mermaid sequence diagram editor.

seqdiag syntax

A diagram is seqdiag { … } with one message per line, ending in ;. Participants appear in the order they are first named, and each line is drawn below the last.

Calls and replies

-> is a call and --> a dashed reply. Put the arrow on the side of the participant that receives it: browser <-- server is a reply from the server.

You write

seqdiag {
  browser -> server [label = "GET /"];
  server -> database [label = "query"];
  server <-- database;
  browser <-- server [label = "page"];
}

You get

Asynchronous messages and separators

->> draws an asynchronous message. A line such as === Later === splits the diagram into sections, and ... text ... marks a delay.

You write

seqdiag {
  app -> queue [label = "add job"];
  === Background ===
  queue ->> worker [label = "run"];
  ... some time later ...
  app <-- worker [label = "done"];
}

You get

Notes and settings

Add note, leftnote or rightnote to a message. Settings at the top change the layout, such as edge_length for the space between participants or autonumber to number every message.

You write

seqdiag {
  autonumber = True;
  edge_length = 200;
  user -> shop [label = "order", note = "checks stock"];
  shop -> bank [label = "charge"];
  shop <-- bank;
  user <-- shop [label = "receipt"];
}

You get

Cheat sheet

Write this	You get
`A -> B;`	A call from A to B
`A <-- B;`	A dashed reply from B to A
`A ->> B;`	An asynchronous message
`A -> B [label = "text"];`	A labelled message
`[note = "…"]`, `[leftnote = "…"]`	A note beside the message
`=== Section ===`	A separator across the diagram
`... text ...`	A delay
`autonumber = True;`	Number every message
`edge_length = 200;`	More space between participants

This is seqdiag's layout and drawing ported to run in your browser, with text measured in the browser's sans-serif font.

Something not working? Let us know.