Mermaid Plus Diagrams & AI Agent for Confluence — User Guide

Overview

Mermaid Plus Diagrams & AI Agent for Confluence lets you create beautiful diagrams directly in Confluence pages using Mermaid syntax. Choose from 30 Mermaid v12 diagram types, customize colors and fonts, and preview your diagram live before saving. A Rovo AI agent can also create, read, update, and convert diagrams from chat — see Rovo AI Agent.

Getting Started

Inserting a Diagram

Edit a Confluence page
Type /mermaid in the editor and select Mermaid Plus Diagrams & AI Agent for Confluence
The configuration panel opens with a three-column layout:
- Left: Live Preview
- Middle: Quick Templates
- Right: Settings + Code Editor
Write or paste your Mermaid code in the editor
Click Save to insert the diagram

Re-editing a Diagram

Click on an existing diagram macro and select Edit to reopen the configuration panel. All your settings and code are preserved.

Configuration Panel

Live Preview

The left column renders your diagram in real-time as you type. Any changes to code or settings are reflected immediately.

Quick Templates

The middle column provides one-click templates for all 30 supported diagram types. Click any template to load its code into the editor.

Syntax Guide

Click the Help button in the header to open the full syntax reference. Browse 30 diagram types with descriptions and code examples. Hover over any code block and click the insert button to load it into the editor.

Settings

Font

Family — Choose from Inter, Arial, Helvetica, Georgia, or Courier
Size — 12px, 14px (default), 16px, 18px, 20px

Colors

Five customizable colors with visual color pickers:

Color	Affects
Node	Background color of diagram nodes/boxes
Text	Text color inside nodes
Border	Border color of nodes
Line	Edge/arrow line color
Bg	Diagram background color

Theme

Mermaid built-in themes:

Theme	Description
Default	Clean light theme with customizable colors
Dark	Dark background with high-contrast text
Forest	Green-tinted natural color palette
Neutral	Grayscale minimal theme

Note: The Default theme uses your custom color settings. Other themes apply their own color palette.

Output Size

Controls the displayed size of the diagram in the Confluence page:

Size	Scale
Small	0.5x
Medium	1x (default)
Large	1.5x
X-Large	2x

Dark Mode Support

The macro automatically adapts to Confluence's dark/light mode:

When you save a diagram, the current Confluence theme is recorded
When the page loads, if the theme has changed, text and background colors are adjusted for readability
The config preview also adapts to dark mode

Supported Diagram Types

Flowchart

Directed graph diagrams with nodes, arrows, and subgraphs.

graph TD
    A[Start] -->|Yes| B[Process]
    B --> C{Decision}
    C -->|Option 1| D[Result 1]
    C -->|Option 2| E[Result 2]

Directions: TD (top-down), BT (bottom-up), LR (left-right), RL (right-left)

Node shapes: [Square], (Rounded), {Diamond}, ((Circle))

Swimlane

Cross-functional process diagrams (swimlanes) showing hand-offs between teams or actors. Each top-level subgraph becomes a lane; nodes and edges use standard flowchart syntax. Optionally set a direction (TB, LR, BT, RL) after the keyword.

swimlane-beta LR
  subgraph Customer
    order[Place order]
    receive[Receive delivery]
  end
  subgraph Sales
    review[Review order]
    confirm[Confirm and invoice]
  end
  order --> review
  review --> confirm
  confirm --> receive

Sequence Diagram

Interaction diagrams showing messages between participants.

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob
    Bob-->>Alice: Hi Alice

Arrow types: ->> (solid), -->> (dashed), --) (async)

Class Diagram

Object-oriented class relationships with inheritance, composition, and visibility.

classDiagram
    Animal <|-- Duck
    Animal : +int age
    class Duck {
        +String beakColor
        +swim()
    }

State Diagram

Finite state machines with transitions between states.

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing
    Processing --> Done
    Done --> [*]

Entity Relationship Diagram

Database schema diagrams with entity relationships.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains

User Journey

Task satisfaction maps with sentiment scores (1–5).

journey
    title My working day
    section Morning
      Make tea: 5: Me
      Do work: 3: Me
    section Evening
      Go home: 5: Me

Gantt Chart

Project schedule charts with tasks, dependencies, and milestones.

gantt
    title Project Plan
    dateFormat YYYY-MM-DD
    section Phase 1
    Research :a1, 2024-01-01, 30d
    Design   :after a1, 20d

Pie Chart

Proportional data visualization.

pie title Time Allocation
    "Development" : 45
    "Testing" : 30
    "Meetings" : 25

Git Graph

Git branch and commit history visualization.

gitGraph
    commit
    branch develop
    checkout develop
    commit
    checkout main
    merge develop
    commit

Mindmap

Hierarchical tree diagrams for brainstorming.

mindmap
  root((Central Topic))
    Branch A
      Sub-topic 1
      Sub-topic 2
    Branch B
      Sub-topic 3

Timeline

Chronological event sequences.

timeline
  title History
  section 2020
    Event A : Description
  section 2021
    Event B : Description

Requirement Diagram

Requirements traceability diagrams linking requirements to elements.

requirementDiagram
    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }
    element test_entity {
    type: simulation
    }
    test_entity - satisfies -> test_req

C4 Diagram

Software architecture diagrams following the C4 model.

C4Context
    title System Context
    Person(user, "User")
    System(app, "Application")
    Rel(user, app, "Uses")

Quadrant Chart

Two-axis categorization charts.

quadrantChart
    title Analysis
    x-axis Low --> High
    y-axis Low --> High
    quadrant-1 Expand
    quadrant-2 Promote
    quadrant-3 Re-evaluate
    quadrant-4 Improve
    Item A: [0.3, 0.6]
    Item B: [0.7, 0.4]

Cynefin

Dave Snowden's sense-making framework that categorizes problems into five domains: clear, complicated, complex, chaotic, and confusion (center). Each domain holds quoted-string items; optional top-level transitions show how situations move between domains.

cynefin-beta
  title Where does this problem sit?
  complex
    "Probe - run safe-to-fail experiments"
  complicated
    "Analyze - apply expert knowledge"
  clear
    "Respond - apply best practice"
  chaotic
    "Act - stabilize first"
  confusion
    "Break the problem down"
  clear --> chaotic : "Complacency"
  chaotic --> complex : "Stabilized"

Sankey Diagram

Flow diagrams showing quantities through a system.

sankey-beta
Source,Target,100
Source,Other,50
Other,Target,30

XY Chart

Bar and line charts.

xychart-beta
    title "Revenue"
    x-axis [Q1, Q2, Q3, Q4]
    y-axis "USD" 0 --> 100
    bar [30, 45, 60, 80]
    line [32, 48, 62, 78]

Block Diagram

Block diagrams with columns layout.

block-beta
  columns 1
  db(("DB"))
  block:ID
    A["Block A"]
    B["Block B"]
  end
  ID --> db

Packet Diagram

Network packet structure diagrams.

packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"

Kanban Board

Board-style task organization.

kanban
  To Do
    Task 1
    Task 2
  In Progress
    Task 3
  Done
    Task 4

Architecture Diagram

Infrastructure and service architecture.

architecture-beta
  group api(cloud)[API]
  service db(database)[Database] in api
  service server(server)[Server] in api
  db:L -- R:server

Radar Chart

Multi-axis comparison charts.

radar-beta
  axis Math, Science, English
  curve Alice{85, 90, 80}
  curve Bob{70, 75, 85}
  max 100

TreeView

File/folder tree visualization.

treeView-beta
  "root"
    "src"
      "index.ts"
    "test"
      "index.test.ts"

Treemap

Hierarchical data as nested rectangles.

treemap
  "Category A"
    "Item 1" : 10
    "Item 2" : 20
  "Category B"
    "Item 3" : 15

Ishikawa (Fishbone)

Cause-and-effect diagrams.

ishikawa
  Problem Statement
    Category A
      Cause 1
      Cause 2
    Category B
      Cause 3

Venn Diagram

Set relationship diagrams.

venn-beta
  title "Team Skills"
  set Frontend
  set Backend
  union Frontend,Backend["Fullstack"]

ZenUML

Sequence diagrams using ZenUML syntax with participant types.

zenuml
    title Service Flow
    Actor User
    Database API
    User->API: Request
    API->User: Response

Participant types: Actor, Database, Participant

Railroad

Syntax/grammar (railroad) diagrams for technical writers and language designers. Ships the EBNF variant — terminals in quotes, | choice, ? optional, * zero-or-more, + one-or-more, ( ) grouping. One rule per statement, each ending with ;.

railroad-ebnf-beta
title "Arithmetic Expression Grammar"

expression = term ( ( "+" | "-" ) term )* ;
term       = factor ( ( "*" | "/" ) factor )* ;
factor     = number | "(" expression ")" ;
number     = digit+ ;
digit      = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" ;

Rovo AI Agent

The app ships a Rovo agent that works with diagrams on Confluence pages and blog posts. Open the agent chat and ask in plain language:

Capability	Example prompt	What happens
Create	"Make a flowchart of our deployment process"	A rendered diagram is added in place
Read	"What does this diagram show?"	The diagram source and version come back in chat
Update	"Make this better"	The diagram is revised in place — macro settings are preserved
Convert	"Turn this into a diagram"	Code blocks already on the page become rendered diagrams

The agent edits the same macros you would edit by hand, so anything it changes stays a normal, re-editable diagram.

Tips

Use the Syntax Guide (Help button) to quickly find the right syntax for any diagram type
Start with a Quick Template and modify it to fit your needs
Use Dark or Forest themes for diagrams in dark-themed Confluence spaces
Adjust Output Size to control how large the diagram appears on the page
All settings are preserved when you re-edit an existing diagram

Performance

Diagrams render instantly on page load using cached SVG. The Mermaid.js library is only loaded during configuration — not when viewing pages. This keeps your Confluence pages fast.

Support

For issues or feature requests, please visit the app's listing on the Atlassian Marketplace.

Was this helpful?

Overview​

Getting Started​

Inserting a Diagram​

Re-editing a Diagram​

Configuration Panel​

Live Preview​

Quick Templates​

Syntax Guide​

Settings​

Font​

Colors​

Theme​

Output Size​

Dark Mode Support​

Supported Diagram Types​

Flowchart​

Swimlane​

Sequence Diagram​

Class Diagram​

State Diagram​

Entity Relationship Diagram​

User Journey​

Gantt Chart​

Pie Chart​

Git Graph​

Mindmap​

Timeline​

Requirement Diagram​

C4 Diagram​

Quadrant Chart​

Cynefin​

Sankey Diagram​

XY Chart​

Block Diagram​

Packet Diagram​

Kanban Board​

Architecture Diagram​

Radar Chart​

TreeView​

Treemap​

Ishikawa (Fishbone)​

Venn Diagram​

ZenUML​

Railroad​

Rovo AI Agent​

Tips​

Performance​

Related Blog Posts​

Support​