FREE · DIAGRAM TOOLS
Sequence Diagram Maker.
Create UML sequence diagrams from text: participants, messages, replies, loops, alternatives and notes. Export SVG or PNG.
How to use Sequence Diagram Maker
Start from an API or payment example. Declare participants, write one message per line and use the insert buttons for replies, notes, loops and alt/else blocks. Export or copy the Markdown block for your documentation.
How it works
Messages are drawn top to bottom in the order you write them. Solid arrows are requests, dashed arrows are replies, and autonumber numbers each message. Rendering uses the open-source Mermaid library in your browser with its strict security level, so links, scripts and HTML in labels are disabled. Drafts are saved in this browser only; share links store the compressed code in the part of the URL after #, which browsers do not send to the web server. Exports contain only what you drew.
Example
User ->> App: Click Save; App ->> API: POST /items; API -->> App: 201 Created.
What does a sequence diagram show?
A UML sequence diagram shows how participants — users, services, databases or devices — exchange messages over time. Participants are columns; time flows from top to bottom. It is the clearest way to document an API flow, an authentication handshake or a payment, and to spot unnecessary round trips.
Here you write one message per line and the diagram is drawn instantly, so you can model an interaction during a design discussion rather than after it.
Sequence diagram elements
| Element | Code | Meaning |
|---|---|---|
| Participant | participant API | A system or component (column) |
| Actor | actor User | A person, drawn as a stick figure |
| Alias | participant DB as Database | Short identifier with a readable label |
| Synchronous message | A->>B: Request | Solid line with arrowhead |
| Reply | B-->>A: Response | Dashed line with arrowhead |
| Asynchronous message | A-)B: Event | Open arrowhead |
| Lost or failed message | A-xB: Timeout | Cross at the end |
| Activation | A->>+B … B-->>-A | Bar showing when B is busy |
| Note | Note over A,B: Text | Comment spanning participants |
| Numbering | autonumber | Numbers every message |
Alternatives, loops and parallel steps
Fragments group messages: alt / else for alternative paths, opt for an optional step, loop for repetition, par / and for parallel calls and break for an early exit. Each block ends with end.
sequenceDiagram
Client->>Server: GET /report
alt Cached
Server-->>Client: 200 from cache
else Not cached
Server->>Worker: Build report
Worker-->>Server: Done
Server-->>Client: 200 OK
endThe insert buttons below the code add these blocks after the current line with correct indentation.
How to draw a sequence diagram from a real flow
- List every participant in the order you want the columns, starting with whoever starts the interaction.
- Write the happy path first, one message per line, using solid arrows for calls and dashed arrows for replies.
- Add error cases with
alt/else: expired tokens, timeouts, declined payments. - Add
autonumberso reviewers can refer to “step 4”. - Export as SVG for your design document or copy the Markdown block into the repository README.
Sequence diagrams show order, not decision logic. If the interesting part is “what happens if”, a flowchart may be clearer. To describe the data being stored, add an ER diagram.
Download SVG for documents, websites and slides that need sharp lines at any size, or PNG at 1× to 4× resolution for chat apps, tickets and tools that do not accept SVG. The background can match the theme, be white or be transparent.
Rendering happens in your browser with the open-source Mermaid library. Your code is not uploaded, drafts are kept in this browser’s local storage, and a share link stores the compressed diagram after the # sign, which browsers do not send to the web server.
Questions about Sequence Diagram Maker
What is the difference between ->> and -->>?
->> draws a solid line, used for requests or calls. -->> draws a dashed line, used for replies or return values.
How do I show an if/else in a sequence diagram?
Use an alt block with a condition, the messages for that case, then else with the other condition and messages, and close it with end.
Can I show a participant being created or destroyed?
Mermaid 11 supports create participant X before the message that creates it and destroy X before the message that removes it.
Is this suitable for UML documentation?
Yes for communication and design documents. It covers the common UML sequence elements; it does not validate the diagram against the full UML specification.
Can I export to PNG for Confluence or Jira?
Yes. Download a PNG at 2× or higher for sharp results, or SVG where the platform accepts it.
Is Sequence Diagram Maker free, and do I need an account?
Yes. This tool is free to use in your browser without an account. Processing takes place on your device.
What are the limits and what should I check?
Up to 50,000 characters of Mermaid code and 800 connections. PNG export up to 32 megapixels. Share links are limited to diagrams that compress to about 12,000 characters. Mermaid 11 syntax; no real-time collaboration or cloud storage. Review the result before using it in your work.
Is my input sent to a server?
Your input is processed in your browser and is not uploaded by this tool. Files and pasted text are cleared when the page is refreshed. Normal website requests are still required to load the page and its libraries. Read the privacy explanation.