How to create a Sequence diagram in PlantUML

1. Try it in the browser

You can render PlantUML diagrams instantly in your browser with the PlantUML Playground — no Java or server install required. The examples below can be pasted directly into it.

2. Define the diagram

To create a sequence diagram, wrap your markup in @startuml / @enduml, declare the participants (actor, participant, database, etc.), and connect them with arrows. Use alt / else / end to branch the flow based on a condition.

@startuml
actor Client
participant "API Gateway" as API
participant "Auth Service" as Auth
database "User DB" as DB

Client -> API : POST /login
API -> Auth : validate credentials
Auth -> DB : lookup user
DB --> Auth : user record
alt valid credentials
    Auth --> API : issue JWT
    API --> Client : 200 OK + token
else invalid credentials
    Auth --> API : reject
    API --> Client : 401 Unauthorized
end
@enduml

Here, Client logs in through the API Gateway, which asks Auth Service to validate credentials against the User DB. The alt/else block then shows the two possible outcomes — a JWT on success, or a 401 on failure — as separate compartments in the same diagram.

3. Message types and activation bars

PlantUML supports several arrow styles for different kinds of calls, plus activate/deactivate to draw an activation bar showing how long a participant is "busy" handling a call:

Element	Syntax	Meaning
Sync call	`A -> B : sync call`	Solid arrow — a normal (synchronous) message
Async call	`A ->> B : async call`	Solid arrow with an open head — a fire-and-forget message
Sync return	`A --> B : sync return`	Dashed arrow — a reply/return message
Colored arrow	`A -[#red]> B : colored arrow`	Inline color override on any arrow, e.g. to highlight an error path
Activation + self call	`activate B B -> B : self call deactivate B`	Draws an activation bar on B for the duration of the block

4. Render the diagram

Once you have defined the diagram, you can render it on your webpage with the @plantuml/core browser engine (the same one that powers this site's live editor), or by sending the markup to a PlantUML rendering server. Here is a minimal example using a hosted PlantUML server that returns an SVG image

<html>
  <body>
    <!-- Encode your @startuml markup (deflate + base64, PlantUML's own encoding)
         and request it from a PlantUML server -->
    <img src="https://www.plantuml.com/plantuml/svg/~1<encoded-markup>" />
  </body>
</html>

You can use this PlantUML Playground Link to explore that particular example.