# Create Mermaid diagrams in Confluence: a step-by-step guide April 21, 2026 · 5 min read [NGPilot](https://ngpilot.com) **Mermaid diagrams in Confluence** let you create flowcharts, sequence diagrams, and more using simple text syntax. This guide covers **Confluence Mermaid** setup with Mermaid Plus — live preview, 29 diagram types, and copy-paste examples. Who should read this * Developers adding diagrams to Confluence documentation * Teams switching from draw\.io to text-based diagrams (see [Excalidraw vs draw.io](/blog/faq-excalidraw-vs-drawio-confluence.md) if you're comparing visual tools too) * Anyone needing flowcharts, sequence diagrams, or ER diagrams in Confluence What you'll learn 1. How to set up Mermaid in Confluence 2. Creating flowcharts, sequence diagrams, Gantt charts 3. All 29 supported diagram types with examples 4. Troubleshooting common issues ## Quick prerequisites[​](#quick-prerequisites "Direct link to Quick prerequisites") * Confluence Cloud with [Mermaid Plus](/docs/Mermaid-Plus-for-Confluence/usage.md) (or Mermaid-enabled) app installed * Basic familiarity with Markdown-style editing in Confluence ## How to insert a Mermaid diagram[​](#how-to-insert-a-mermaid-diagram "Direct link to How to insert a Mermaid diagram") 1. Edit a Confluence page. 2. Insert the Mermaid macro (type `/mermaid` and choose the plugin). 3. Paste one of the examples below into the editor and preview. 4. Adjust labels, colors, and sizes as needed, then save. ## Best practices[​](#best-practices "Direct link to Best practices") * Start small and iterate: preview often while editing. * Use templates for repetitive diagrams. * Prefer simple node labels for readability. * Use `theme` and color settings for accessible contrast. ## Full list of common Mermaid diagram types (with examples)[​](#full-list-of-common-mermaid-diagram-types-with-examples "Direct link to Full list of common Mermaid diagram types (with examples)") ### Flowchart (graph)[​](#flowchart-graph "Direct link to Flowchart (graph)") A directed graph for processes and workflows. ``` graph TD A[Start] --> B{Is it ok?} B -- Yes --> C[Proceed] B -- No --> D[Fix issue] D --> B C --> E[Done] ``` ### Sequence diagram (sequenceDiagram)[​](#sequence-diagram-sequencediagram "Direct link to Sequence diagram (sequenceDiagram)") Interaction over time between participants. ``` sequenceDiagram participant Alice participant Bob Alice->>Bob: Request data Bob-->>Alice: Return result Alice->>Bob: Acknowledge ``` ### Class diagram (classDiagram)[​](#class-diagram-classdiagram "Direct link to Class diagram (classDiagram)") Model object-oriented classes and relationships. ``` classDiagram class Animal { +int age +eat() } class Dog { +bark() } Animal <|-- Dog ``` ### State diagram (stateDiagram-v2)[​](#state-diagram-statediagram-v2 "Direct link to State diagram (stateDiagram-v2)") Finite state machine transitions. ``` stateDiagram-v2 [*] --> Idle Idle --> Processing : start Processing --> Done : finish Done --> [*] ``` ### Entity-Relationship (erDiagram)[​](#entity-relationship-erdiagram "Direct link to Entity-Relationship (erDiagram)") Database entities and relations. ``` erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE_ITEM : contains CUSTOMER { string name int id } ``` ### Gantt chart (gantt)[​](#gantt-chart-gantt "Direct link to Gantt chart (gantt)") Project timelines with tasks and dependencies. ``` gantt title Project Schedule dateFormat YYYY-MM-DD section Design Research :a1, 2026-05-01, 10d Develop :after a1, 20d Test :2026-06-01, 10d ``` ### Pie chart (pie)[​](#pie-chart-pie "Direct link to Pie chart (pie)") Simple proportional data visualization. ``` pie title Time Allocation "Development" : 50 "Testing" : 30 "Meeting" : 20 ``` ### Git graph (gitGraph)[​](#git-graph-gitgraph "Direct link to Git graph (gitGraph)") Visualize branch and commit history. ``` gitGraph commit branch develop checkout develop commit checkout main merge develop commit ``` ### Mindmap (mindmap)[​](#mindmap-mindmap "Direct link to Mindmap (mindmap)") Hierarchical brainstorming diagrams. ``` mindmap root((Product)) Features Performance UX Roadmap Q2 Q3 ``` ### Timeline (timeline)[​](#timeline-timeline "Direct link to Timeline (timeline)") Chronological events. ``` timeline title Company milestones 2019 : Founded 2020 : First release 2022 : Series A ``` ### Requirement diagram (requirementDiagram)[​](#requirement-diagram-requirementdiagram "Direct link to Requirement diagram (requirementDiagram)") Traceability of requirements to elements. ``` requirementDiagram requirement R1 { id: 1 text: "Data export must support CSV" } element E1 { type: component } E1 - satisfies -> R1 ``` ### C4 & Architecture (C4Context)[​](#c4--architecture-c4context "Direct link to C4 & Architecture (C4Context)") High-level system context diagrams. ``` C4Context title System Context Person(user, "User") System(api, "Public API") Rel(user, api, "Uses") ``` ### Quadrant chart (quadrantChart)[​](#quadrant-chart-quadrantchart "Direct link to Quadrant chart (quadrantChart)") Two-axis analysis charts. ``` quadrantChart title Feature Analysis x-axis Low --> High y-axis Low --> High quadrant-1 Prioritize quadrant-2 Consider Item A: [0.7, 0.6] Item B: [0.2, 0.8] ``` ### Sankey diagram (sankey)[​](#sankey-diagram-sankey "Direct link to Sankey diagram (sankey)") Bulk flow volumes between nodes. ``` sankey A [Source] -> B [Target] : 100 A -> C : 50 C -> B : 30 ``` ### XY chart (xychart)[​](#xy-chart-xychart "Direct link to XY chart (xychart)") Line and bar charts for time-series or categorical data. ``` xychart title Revenue x-axis [Q1,Q2,Q3,Q4] y-axis "USD" line [30,40,50,60] ``` ### Block diagram (block)[​](#block-diagram-block "Direct link to Block diagram (block)") Simple block/column diagrams. ``` block A[Frontend] --> B[API] B --> C[Database] ``` ### Packet diagram (packet)[​](#packet-diagram-packet "Direct link to Packet diagram (packet)") Network packet structure. ``` packet 0-15: Source Port 16-31: Destination Port 32-63: Sequence Number ``` ### Kanban (kanban)[​](#kanban-kanban "Direct link to Kanban (kanban)") Board-style task flow. ``` kanban To Do Task A In Progress Task B Done Task C ``` ### Treemap (treemap)[​](#treemap-treemap "Direct link to Treemap (treemap)") Hierarchical data as nested rectangles. ``` treemap "Category A" "Item 1" : 10 "Item 2" : 20 ``` ### Ishikawa / Fishbone (ishikawa)[​](#ishikawa--fishbone-ishikawa "Direct link to Ishikawa / Fishbone (ishikawa)") Cause-and-effect analysis. ``` ishikawa Problem: "Low throughput" People Lack of training Process Missing steps ``` ### Venn diagram (venn)[​](#venn-diagram-venn "Direct link to Venn diagram (venn)") Set relationships. ``` venn A B A & B ``` ### ZenUML (zenuml)[​](#zenuml-zenuml "Direct link to ZenUML (zenuml)") Alternative sequence diagram syntax. ``` zenuml title Login Flow Actor User System API User -> API: login() ``` ## Troubleshooting & tips[​](#troubleshooting--tips "Direct link to Troubleshooting & tips") * If diagrams don't render, check the plugin settings or try the Mermaid Live Editor to validate syntax. * Use small examples while iterating; large diagrams can be hard to edit inside Confluence. * For accessibility, prefer clear color contrasts and short labels. ## Related apps & resources[​](#related-apps--resources "Direct link to Related apps & resources") * [All 29 Mermaid diagram types in Confluence](/blog/faq-mermaid-diagram-types-confluence.md) — complete reference across every diagram type * [Mermaid Plus for Confluence](/apps/mermaid-plus-for-confluence.md) * [Mermaid Plus Diagrams for Jira](/apps/mermaid-plus-diagrams-for-jira.md) — add Mermaid diagrams to Jira issues * [Excalidraw & Mermaid Visual Editor](/apps/excalidraw-mermaid-diagrams-for-confluence.md) — combine freeform drawing with Mermaid * [Graphviz Charts for Confluence](/apps/graphviz-charts-for-confluence.md) — another diagram format option ## More Related Guides[​](#more-related-guides "Direct link to More Related Guides") * [Mermaid Plus for Confluence](/apps/mermaid-plus-for-confluence.md) — Full feature guide * [Does Confluence support Mermaid?](/blog/does-confluence-support-mermaid.md) — Setup guide * [Mermaid diagram types explained](/blog/faq-mermaid-diagram-types-confluence.md) — All 29 types Try Mermaid Plus for Confluence All 26 Mermaid diagram types with live preview and one-click templates — free for up to 10 users. [Get it on the Atlassian Marketplace](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-diagrams-for-confluence?utm_source=ngpilot.com\&utm_medium=website\&utm_campaign=mermaid-plus-for-confluence) ## Related guides * [How to Create Mermaid Diagrams in Jira](/blog/how-to-create-mermaid-diagrams-jira.md) * [Export Jira Issues to Excel or CSV](/blog/export-jira-issues-to-excel.md) * [Bulk Download Jira Attachments](/blog/bulk-download-jira-attachments.md) * [How to Migrate Confluence Content](/blog/how-to-migrate-confluence-content.md) * [How to Add a Block Quote in Confluence](/blog/block-quote-confluence.md) Explore NGPILOT[Browse Solutions](/solutions.md)[All Apps](/apps.md)[Atlassian Marketplace →](https://marketplace.atlassian.com/vendors/1226848/?utm_source=ngpilot.com\&utm_medium=blog\&utm_campaign=hub-links) **Tags:** * [confluence](/blog/tags/confluence.md) * [mermaid](/blog/tags/mermaid.md) * [diagrams](/blog/tags/diagrams.md) * [how-to](/blog/tags/how-to.md)