PlantUML Sequence Diagram Generator Online
A sequence diagram shows how parts of a system talk to each other over time: who sends what, in which order, and what comes back. It is the diagram most teams reach for when documenting an API call, a login flow, or a bug that only shows up when two services race.
The editor below is preloaded with a working sequence diagram. Change a line and the preview updates as you type. Rendering happens in your browser, so the flow you are documenting is not sent anywhere.
A checkout flow, ready to edit. Replace the participants with your own services.
Arrows carry the meaning
In a sequence diagram the arrow style is not decoration. A solid arrow (->) is conventionally a call or a request; a dashed arrow (-->) is the reply. Keeping that convention makes a diagram readable without a legend, and it is the single easiest thing to get wrong.
Arrow length also matters to PlantUML. -> and --> are different arrows, but so are -> and -->>. If your diagram suddenly reshapes after an edit, check that you have not changed the number of dashes by accident.
Naming participants
Declare participants up front when you want to control their left-to-right order. If you do not declare them, PlantUML adds each one at the point it first appears, which usually produces more arrow crossings than you want.
Names with spaces need quoting, and quoting gets tedious fast. Give each one a short alias with as and use the alias everywhere else: participant "Payment Gateway" as Pay. The box keeps the readable label, your source stays short.
PlantUML also has typed participants: actor for people, database for stores, plus boundary, control, entity, collections and queue. They render with distinct shapes, which helps a reader scan a busy diagram.
Branches, loops and the parts people forget
Real flows have conditions. alt / else / end draws a branch, opt draws a single optional path, loop draws a repeat, and par shows work happening in parallel. Every one of them needs a closing end, and a missing end is the most common reason a sequence diagram refuses to render.
Activation bars - the thin rectangles showing when a participant is busy - come from activate and deactivate, or from the shorthand ++ and -- appended to an arrow. They are optional, but they make it obvious when a call is still open while another one starts.
autonumber at the top numbers every message. On a diagram you plan to discuss in a review, numbered steps are much easier to point at than "the third arrow down".
Sequence diagram syntax reference
The syntax that covers most real diagrams. Everything here works in the editor above.
| Syntax | What it does |
|---|---|
A -> B : text | Solid arrow - a call or request |
A --> B : text | Dashed arrow - a reply or return value |
A ->> B : text | Thin arrowhead, often used for async messages |
A -\ B : text | Half arrowhead |
participant "Long name" as X | Declare a participant with a short alias |
actor / database / queue | Typed participants with distinct shapes |
autonumber | Number every message automatically |
activate A / deactivate A | Show an activation bar while A is busy |
A -> B ++ / B --> A -- | Shorthand activate/deactivate on the arrow |
alt cond / else / end | A branch with alternative paths |
opt cond / end | A single optional path |
loop 3 times / end | A repeated block |
par / else / end | Work happening in parallel |
group Label / end | An arbitrary labelled block |
note left of A : text | A note attached to one participant |
note over A, B : text | A note spanning two participants |
== Label == | A divider that splits the diagram into phases |
... | A delay marker between messages |
create B | Show B being constructed mid-diagram |
destroy B | Mark the end of B's lifeline |
Examples
OAuth 2.0 authorization code flow
A flow worth having on hand - the redirect hops are hard to describe in prose.
Input
@startuml
autonumber
actor User
participant Browser
participant "Your App" as App
participant "Auth Server" as Auth
User -> Browser : Click "Sign in"
Browser -> App : GET /login
App --> Browser : 302 to /authorize
Browser -> Auth : GET /authorize?client_id&redirect_uri
Auth --> User : Consent screen
User -> Auth : Approve
Auth --> Browser : 302 to /callback?code=abc
Browser -> App : GET /callback?code=abc
App -> Auth : POST /token (code + secret)
Auth --> App : access_token + refresh_token
App --> Browser : Set session cookie
@endumlRetry with a timeout
`loop` plus a delay marker, for describing what happens when a dependency is slow.
Input
@startuml
participant Worker
participant "Search API" as Search
loop up to 3 attempts
Worker -> Search : GET /index
alt Responds in time
Search --> Worker : 200 OK
else Times out
...5s timeout...
Worker -> Worker : back off and retry
end
end
@endumlHow to use this sequence diagrams editor
- 1
Start from the loaded diagram
The editor opens with a working checkout flow. Rename the participants to match your own system rather than starting from an empty file.
- 2
Lay out the happy path first
Write the messages in order with
->for calls and-->for replies, ignoring error cases for now. Check the preview reads top to bottom the way the real flow runs. - 3
Add the branches
Wrap the parts that can fail in
alt/else/end. Addautonumberat the top if you will be walking someone through the diagram. - 4
Export it
Use Copy image to paste straight into a pull request or ticket, or Export for a PNG, an SVG, or the .puml source to commit next to your code.
Frequently asked questions
What is the difference between -> and --> in PlantUML?
-> draws a solid arrow and --> draws a dashed one. PlantUML does not attach meaning to either, but the near-universal convention is solid for a call or request and dashed for the response. Following it makes your diagrams readable to anyone who has seen a sequence diagram before.
How do I show an if/else branch in a sequence diagram?
Use an alt block: write alt condition, the messages for that case, then else other condition, the messages for that case, then end. For a path that either happens or does not, opt condition ... end is simpler. Both need the closing end.
Why does my sequence diagram fail to render?
The usual cause is an unclosed block - an alt, loop, par, group or note without its end. The editor flags these before you render and offers a one-click fix. The second most common cause is a multi-word participant name that is not quoted.
Can I number the messages automatically?
Yes. Put autonumber on its own line near the top and every message is numbered in order. You can restart or change the format later in the diagram with variants like autonumber 10 10 for a custom start and step.
Is my sequence diagram uploaded anywhere?
No. The PlantUML engine is compiled to JavaScript and runs in your browser, so the diagram is rendered on your own machine. Nothing you type is sent to a rendering server, which matters when the diagram names internal services.