Sequence diagram in Confluence Cloud (free, with Mermaid)

What Confluence Cloud does with Mermaid on its own

Confluence Cloud does not draw Mermaid itself. In our tests in October and November 2026, a ```mermaid block pasted into a page became an ordinary code block: readers see the messages as text, not the diagram. The code is kept safely, but nothing is drawn.

To see the diagram you need a Mermaid app that adds a macro to the editor, or you draw the diagram elsewhere and upload a picture. How to add Mermaid diagrams to Confluence Cloud compares those routes.

How to add a sequence diagram with Mermaid Editor for Confluence

Full disclosure: Dortus makes this app. The steps:

1. A Confluence admin installs Mermaid Editor for Confluence from the Atlassian Marketplace. The app is free.
2. Open the page in edit mode. Type /mermaid and choose Mermaid Editor. You can also open the + insert menu in the toolbar and search for Mermaid Editor.
3. The editor opens with the code on the left and a live preview on the right. Click the Sequence example to start from a short support escalation, or paste the example from this page. If you paste a block that starts with ```mermaid, the fences are removed for you.
4. Change the text. The preview redraws as you type. If a line is wrong, the preview says what is wrong and names the line, and that line is marked in the code.
5. Click Insert diagram, or press Ctrl+Enter (Cmd+Enter on a Mac). Publish the page.
6. To change it later, select the diagram in the editor and click the pencil icon. Versions in the editor brings back any of the last 20 saves.

On the page the diagram fits the width of the page. Hover over it, or tab to it, for the zoom buttons. Click it, or use Open large, to see it in a big window. SVG and PNG download the diagram for a slide or an email. In Confluence’s dark mode the diagram is drawn in Mermaid’s dark colours. The app has 12 examples to start from: flowchart, sequence, class, state, Gantt, pie, mindmap, timeline, journey, ER, architecture and kanban.

Where it lives: the app runs on Atlassian Forge. The Mermaid code is saved in the macro on the page, earlier versions in Forge storage in your own Atlassian site, and the diagram is drawn in the browser of the person reading the page.

Example: an API login

A user logs in through a web app. The web app asks an auth API, the auth API looks the user up, and the answer depends on the password. Copy it and change the names to your own services.

sequenceDiagram
    autonumber
    actor User
    participant Web as Web app
    participant Auth as Auth API
    participant DB as User database
    User->>Web: Enters email and password
    Web->>+Auth: POST /login
    Auth->>+DB: Find user by email
    DB-->>-Auth: User record
    alt Password correct
        Auth-->>Web: 200 OK with session token
        Web-->>User: Shows the dashboard
    else Password wrong
        Auth-->>Web: 401 Unauthorized
        Web-->>User: Shows "Wrong email or password"
    end
    deactivate Auth
    Note over Web,Auth: The token expires after 8 hours

Drawn with Mermaid 12.2, the version the app uses.

How the syntax works

• sequenceDiagram on the first line names the diagram type. autonumber numbers every message.
• actor User draws a person. participant Auth as Auth API draws a box: Auth is the short name you use in the code, Auth API is the label. Participants appear from left to right in the order you list them.
• A message is sender, arrow, receiver, colon, text: Web->>Auth: POST /login. ->> is a solid line with an arrowhead, for a call. -->> is a dotted line with an arrowhead, for a reply.
• A + after the arrow (->>+Auth) starts a thin activation bar on the receiver; a - (DB-->>-Auth) ends the bar on the sender, here DB. deactivate Auth ends it on its own line.
• alt … else … end shows two possible paths. opt is an optional step, loop a repeat, par things that happen at the same time. Each one ends with end.
• Note over Web,Auth: text puts a note across two participants. Note right of User: text puts it next to one.

Let an AI assistant write the first version. ChatGPT and Claude can write Mermaid. Describe who talks to whom, in order, in plain words, ask for a Mermaid sequenceDiagram, and paste the answer into the editor. Read the result: assistants sometimes invent a participant or use syntax that does not draw.

Common mistakes and how to fix them

• A message without text. User->>Web on its own is an error. The editor says: “Line 2 is missing the text after the colon. A sequence line looks like Alice->>Bob: message.” Fix: add a colon and a few words.
• A block without end. An alt, opt or loop that is never closed stops the diagram. The editor says the code stops too early and names the last line. Fix: add end after the last message of the block.
• The wrong arrow. => is not a Mermaid arrow; the editor says it could not read the arrow on that line. -> and --> are valid, but draw a line without an arrowhead. Fix: use ->> for a call and -->> for a reply.
• A semicolon in the message. A->>B: Save; then close is an error, because Mermaid reads the semicolon as the end of the line. Fix: write it as #59;, as in Save#59; then close.
• Ending an activation twice. A - or deactivate for a participant that is not active stops the diagram with “Trying to inactivate an inactive participant”. Fix: one - for every +.

Other ways

Other Mermaid apps exist on the Atlassian Marketplace; the Mermaid guide lists points worth comparing. For a diagram you want to draw by hand, with every box placed exactly, a drawing app such as draw.io fits better.

FAQ

By diagram type

A sequence diagram shows who talks to whom, in order. Mermaid diagram examples for Confluence has a short example of each of twelve diagram types. Guides that go deeper on one type:

• Gantt charts in Confluence Cloud
• Mind maps in Confluence Cloud
• ER diagrams (entity relationship) in Confluence Cloud
• Flowcharts in Confluence Cloud

Questions

An example that does not draw for you, or a mistake we missed? Email support@dortus.com.

See also: How to add Mermaid diagrams to Confluence Cloud (including diagrams from ChatGPT or Claude)