📘 Mermaid Macro for Confluence

Overview

Mermaid Macro lets you create diagrams directly in Confluence using Mermaid.js. Below are examples of all supported diagram types.

1. Flowchart

graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Do Something]
  B -->|No| D[Do Something Else]
  C --> E[End]
  D --> E[End]
  

2. Sequence Diagram

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: Hello Bob, how are you?
  Bob-->>Alice: I am good thanks!
  Alice->>Bob: Great to hear
  

3. Class Diagram

classDiagram
  Animal <|-- Dog
  Animal <|-- Cat
  Animal : +int age
  Animal : +String gender
  Animal: +isMammal()
  Dog : +bark()
  Cat : +meow()
  

4. Entity Relationship Diagram (ERD)

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  CUSTOMER {
    string name
    string address
  }
  ORDER {
    int id
    string date
  }
  LINE-ITEM {
    int quantity
    string product
  }
  

5. State Diagram

stateDiagram-v2
  [*] --> Idle
  Idle --> Running : start
  Running --> Idle : stop
  Running --> Error : failure
  Error --> [*]
  

6. Gantt Chart

gantt
  dateFormat  YYYY-MM-DD
  title Project Timeline
  section Planning
  Research :a1, 2025-09-16, 5d
  Design :after a1, 3d
  section Development
  Implementation :2025-09-22, 7d
  Testing :2025-09-29, 4d
  

7. User Journey

journey
  title User buying a product
  section Browse
    User: 5: Looking at products
  section Checkout
    User: 3: Adding product to cart
    User: 4: Entering payment details
  section Confirmation
    User: 4: Receiving order confirmation
  

Support

For issues or questions, use the Atlassian Marketplace support channel.