Sequence Diagram Generator

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

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 -->>, or start from one of the examples in the Load example menu.
  2. The preview on the right re-renders automatically a moment after you stop typing.
  3. Copy the SVG markup, or download a .svg (scales at any size) or .png (for Slack, slides, and tickets) to drop into a doc, wiki page, or PR description.
  4. Click Copy share link to send a teammate a URL that reopens the same diagram.

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.

How do I share a sequence diagram with a teammate?

Click Copy share link and send the URL. The diagram text is compressed into the part of the URL after the #, which browsers never send to a server, so the diagram stays private and nothing is stored on our side. Opening the link reproduces the diagram exactly.

Does it remember my diagram between visits?

Yes — your latest diagram is autosaved in this browser and restored next time. It never leaves your device. A share link always opens the shared diagram instead of your saved one.

Related tools

Guides & comparisons

← All tools · Text & Data · Blog · Cheat sheets · FAQ