Sequence Diagram Generator

Turn a text script of who-calls-who into a live UML sequence diagram — actors, arrows, and responses — exportable as SVG.

About this tool

A sequence diagram maps out who calls whom, and in what order — the standard way to document an API request flow, an auth handshake, or a chain of service calls before or during a design review. This tool takes Mermaid's sequenceDiagram syntax and renders it live, so the diagram in your PR description or design doc matches the text you can also keep in version control.

How to use it

  1. List your participants (services, actors, systems) and the messages between them using participant Name and arrows like ->> and -->>.
  2. The preview on the right re-renders automatically a moment after you stop typing.
  3. Copy the SVG markup or download it as a .svg file to drop into a doc, wiki page, or PR description.

FAQ

What's the difference between -> , ->> , and -->>?

A solid line (->>) is a synchronous call/request, a dashed line (-->>) is a response or async return, and a plain -> draws the arrow without the solid arrowhead. Mixing solid calls with dashed responses is what makes a request/response flow readable at a glance.

Can I show activation bars, loops, or conditional branches?

Yes — Mermaid's sequence diagram syntax supports activate/deactivate for lifelines, plus loop, alt, and opt blocks for repeated or conditional steps, all recognized by this tool since it uses the same rendering engine as full Mermaid.

Is this the same syntax as sequencediagram.org?

No — sequencediagram.org uses its own syntax, while this tool uses Mermaid's sequenceDiagram syntax, which is the more widely-supported flavor (the same one rendered natively by GitHub, GitLab, and Notion) if you want the diagram source to keep working wherever else you paste it.

Is my diagram sent to a server?

No — rendering happens entirely in your browser; nothing you type is transmitted anywhere.

Related tools

← All tools · Blog · FAQ