Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

Mermaid Diagrams for Confluence

mermaid-confluence-banner.png

If you've ever pasted a screenshot of a diagram into a Confluence page, you already know the problem: three weeks later, the system has changed, the screenshot is stale, and nobody knows where the original file lives.

There's a better way — and it's called diagram as code.


What Is Mermaid, and Why Does It Matter?

Mermaid is an open-source diagramming language that lets you describe diagrams in plain text. Instead of dragging boxes around a canvas, you write something like:

flowchart LR
    A[User] --> B[API Gateway]
    B --> C[Auth Service]
    B --> D[Data Service]
    C --> E[(Database)]
    D --> E

…and it renders instantly into a clean, readable flowchart.

Because diagrams live as text inside your Confluence page, they're:

  • Always editable — anyone with page access can update the diagram
  • Searchable — the diagram content is indexed like any other text
  • Version-controlled — Confluence's page history tracks every change
  • Never out of date — updating the system means updating the code, not hunting down an image file


Introducing Mermaid Diagrams & Charts for Confluence

Mermaid Diagrams & Charts for Confluence by RVS brings native Mermaid rendering directly into your Confluence Cloud workspace — no external tools, no third-party exports, no browser extensions required.

It's an app, available today on the Atlassian Marketplace.


Diagram Types Supported

The app supports the full range of diagrams you'd need for technical and product documentation:

Diagram Type Great For
Flowcharts Process flows, decision trees, user journeys
Sequence Diagrams API interactions, service communication, auth flows
Entity-Relationship (ER) Diagrams Database schema, data models
Gantt Charts Project timelines, sprint planning
State Diagrams Order states, feature flags, lifecycle flows
Architecture Diagrams System design, infrastructure overviews
User Journey Maps UX flows, onboarding steps

 

and many more....


Mermaid Diagrams.png


How It Works

  1. Insert the Mermaid macro on any Confluence page
  2. Write your diagram code in the editor — the syntax is straightforward and well-documented
  3. Save the page — your diagram renders instantly inline
  4. Edit anytime — click back into the macro and update the code; the diagram re-renders immediately

No uploads. No exports. No "where did I put that Lucidchart file."


ROVO Integration

If your team uses Atlassian ROVO, the integration goes even further. You can describe a diagram in natural language and have ROVO generate the Mermaid code for you — then render it right there in the page. It's one of the smoothest AI-to-diagram workflows available inside the Atlassian ecosystem today.


Who Should Use This?

This app is particularly valuable for:

  • Engineering teams documenting system architecture, APIs, and data flows
  • Product teams mapping user journeys and feature lifecycles
  • DevOps and platform teams keeping infrastructure diagrams current alongside runbooks
  • Agile teams visualizing sprint timelines or workflow states in their Confluence spaces

If your team writes documentation in Confluence and has ever struggled to keep diagrams in sync with reality, this app directly solves that problem.


Getting Started

Install the app from the Marketplace — 30 days free trial:

👉 Mermaid Diagrams & Charts for Confluence on the Atlassian Marketplace

Full documentation is available at the RVS documentation space.

 


Quick Mermaid Syntax Reference

New to Mermaid? Here are a few snippets to get you started:

Flowchart

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do the thing]
    B -->|No| D[Skip it]
    C --> E[End]
    D --> E

Sequence Diagram

sequenceDiagram
    Client->>API: POST /login
    API->>Auth: Validate credentials
    Auth-->>API: Token
    API-->>Client: 200 OK + Token

State Diagram

stateDiagram-v2
    [*] --> Draft
    Draft --> InReview
    InReview --> Approved
    InReview --> Draft
    Approved --> Published

The official Mermaid docs are an excellent reference for the full syntax.


Have You Tried It?

If you've used Mermaid Diagrams & Charts for Confluence, share your experience in the comments. What diagram types do you use most? How has it changed the way your team documents systems?

0 comments

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events