# Mermaid+ for Confluence — User Guide Related blog post: [Create Mermaid diagrams in Confluence: a step-by-step guide](/blog/create-mermaid-diagrams-confluence.md) ## Overview[​](#overview "Direct link to Overview") Mermaid+ for Confluence lets you create beautiful diagrams directly in Confluence pages using Mermaid syntax. Choose from 29 diagram types, customize colors and fonts, and preview your diagram live before saving. ## Getting Started[​](#getting-started "Direct link to Getting Started") ### Inserting a Diagram[​](#inserting-a-diagram "Direct link to Inserting a Diagram") 1. Edit a Confluence page 2. Type `/mermaid` in the editor and select **Mermaid+ for Confluence** 3. The configuration panel opens with a three-column layout: * **Left**: Live Preview * **Middle**: Quick Templates * **Right**: Settings + Code Editor 4. Write or paste your Mermaid code in the editor 5. Click **Save** to insert the diagram ### Re-editing a Diagram[​](#re-editing-a-diagram "Direct link to 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[​](#configuration-panel "Direct link to Configuration Panel") ### Live Preview[​](#live-preview "Direct link to 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[​](#quick-templates "Direct link to Quick Templates") The middle column provides one-click templates for all 29 supported diagram types. Click any template to load its code into the editor. ### Syntax Guide[​](#syntax-guide "Direct link to Syntax Guide") Click the **Help** button in the header to open the full syntax reference. Browse 29 diagram types with descriptions and code examples. Hover over any code block and click the insert button to load it into the editor. *** ## Settings[​](#settings "Direct link to Settings") ### Font[​](#font "Direct link to Font") * **Family** — Choose from Inter, Arial, Helvetica, Georgia, or Courier * **Size** — 12px, 14px (default), 16px, 18px, 20px ### Colors[​](#colors "Direct link to 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[​](#theme "Direct link to 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[​](#output-size "Direct link to 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[​](#dark-mode-support "Direct link to 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[​](#supported-diagram-types "Direct link to Supported Diagram Types") ### Flowchart[​](#flowchart "Direct link to 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[​](#swimlane "Direct link to 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[​](#sequence-diagram "Direct link to 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[​](#class-diagram "Direct link to Class Diagram") Object-oriented class relationships with inheritance, composition, and visibility. ``` classDiagram Animal <|-- Duck Animal : +int age class Duck { +String beakColor +swim() } ``` ### State Diagram[​](#state-diagram "Direct link to State Diagram") Finite state machines with transitions between states. ``` stateDiagram-v2 [*] --> Idle Idle --> Processing Processing --> Done Done --> [*] ``` ### Entity Relationship Diagram[​](#entity-relationship-diagram "Direct link to Entity Relationship Diagram") Database schema diagrams with entity relationships. ``` erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains ``` ### User Journey[​](#user-journey "Direct link to 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[​](#gantt-chart "Direct link to 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[​](#pie-chart "Direct link to Pie Chart") Proportional data visualization. ``` pie title Time Allocation "Development" : 45 "Testing" : 30 "Meetings" : 25 ``` ### Git Graph[​](#git-graph "Direct link to Git Graph") Git branch and commit history visualization. ``` gitGraph commit branch develop checkout develop commit checkout main merge develop commit ``` ### Mindmap[​](#mindmap "Direct link to Mindmap") Hierarchical tree diagrams for brainstorming. ``` mindmap root((Central Topic)) Branch A Sub-topic 1 Sub-topic 2 Branch B Sub-topic 3 ``` ### Timeline[​](#timeline "Direct link to Timeline") Chronological event sequences. ``` timeline title History section 2020 Event A : Description section 2021 Event B : Description ``` ### Requirement Diagram[​](#requirement-diagram "Direct link to 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[​](#c4-diagram "Direct link to 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[​](#quadrant-chart "Direct link to 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[​](#cynefin "Direct link to 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[​](#sankey-diagram "Direct link to Sankey Diagram") Flow diagrams showing quantities through a system. ``` sankey-beta Source,Target,100 Source,Other,50 Other,Target,30 ``` ### XY Chart[​](#xy-chart "Direct link to 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-diagram "Direct link to 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[​](#packet-diagram "Direct link to Packet Diagram") Network packet structure diagrams. ``` packet-beta 0-15: "Source Port" 16-31: "Destination Port" 32-63: "Sequence Number" ``` ### Kanban Board[​](#kanban-board "Direct link to Kanban Board") Board-style task organization. ``` kanban To Do Task 1 Task 2 In Progress Task 3 Done Task 4 ``` ### Architecture Diagram[​](#architecture-diagram "Direct link to 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[​](#radar-chart "Direct link to 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[​](#treeview "Direct link to TreeView") File/folder tree visualization. ``` treeView-beta "root" "src" "index.ts" "test" "index.test.ts" ``` ### Treemap[​](#treemap "Direct link to Treemap") Hierarchical data as nested rectangles. ``` treemap "Category A" "Item 1" : 10 "Item 2" : 20 "Category B" "Item 3" : 15 ``` ### Ishikawa (Fishbone)[​](#ishikawa-fishbone "Direct link to Ishikawa (Fishbone)") Cause-and-effect diagrams. ``` ishikawa Problem Statement Category A Cause 1 Cause 2 Category B Cause 3 ``` ### Venn Diagram[​](#venn-diagram "Direct link to Venn Diagram") Set relationship diagrams. ``` venn-beta title "Team Skills" set Frontend set Backend union Frontend,Backend["Fullstack"] ``` ### ZenUML[​](#zenuml "Direct link to 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[​](#railroad "Direct link to 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" ; ``` *** ## Tips[​](#tips "Direct link to 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[​](#performance "Direct link to 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. *** ## Related Blog Posts[​](#related-blog-posts "Direct link to Related Blog Posts") * [Create Mermaid diagrams in Confluence: a step-by-step guide](/blog/create-mermaid-diagrams-confluence.md) * [Mermaid in Confluence Not Rendering? Fixes & FAQ](/blog/faq-mermaid-troubleshooting.md) * [Confluence diagram tools compared: Mermaid vs Excalidraw vs Graphviz](/blog/confluence-diagram-tools-comparison.md) * [How to create flowcharts in Confluence](/blog/create-flowcharts-confluence.md) ## Support[​](#support "Direct link to Support") For issues or feature requests, please visit the app's listing on the Atlassian Marketplace. Was this helpful?👍 Yes👎 No