Diagrams Macro

Clovity UML renders Mermaid diagrams in Confluence.

Best for

• Architecture diagrams and workflows
• Sequence diagrams for APIs
• Entity relationships and schemas
• Timelines, mindmaps, and planning visuals

How it works

• You write Mermaid code in the editor
• Preview renders live
• Saving publishes the diagram into the page
• Viewer toolbar appears on hover for navigation and actions

---

UML Editor Guide

Editor layout

• Source (left): Mermaid code
• Preview (right): rendered diagram

Using Samples

The editor includes a Samples menu. Use it to:

• Insert a working diagram instantly
• Modify nodes/edges to fit your use case

Saving

Click Save/Publish to store the source and render on the page.

Writing Mermaid that renders reliably

• Always start with a valid diagram type header, for example:
  • flowchart TD
  • sequenceDiagram
  • erDiagram
• Keep indentation consistent
• Prefer simple IDs (letters/numbers/underscores) for fewer parsing issues
• Build complex diagrams gradually (save often)

---

Supported Diagram Types

Use these headers as "known good" starting points:

Flowchart

flowchart TD
    Start([Start]) --> Input[/Input Data/]
    Input --> Process{Valid Data?}
    Process -->|Yes| Calculate[Calculate Result]
    Process -->|No| Error[Show Error]
    Calculate --> Output[/Display Output/]
    Error --> Input
    Output --> End([End])

    style Start fill:#E3FCEF
    style End fill:#E3FCEF
    style Error fill:#FFEBE6

Sequence Diagram

sequenceDiagram
    participant User
    participant Frontend
    participant API
    participant Database

    User->>Frontend: Click Login
    Frontend->>API: POST /auth/login
    activate API
    API->>Database: Query User
    activate Database
    Database-->>API: User Data
    deactivate Database
    API-->>Frontend: JWT Token
    deactivate API
    Frontend->>User: Redirect to Dashboard

    Note over User,Database: Authentication Flow

Class Diagram

classDiagram
class Customer {
  +placeOrder()
}

class Order {
  +String orderId
  +calculateTotal()
}

class OrderItem {
  +int quantity
  +float price
  +getSubtotal()
}

Gantt

gantt
    title Project Development Timeline
    dateFormat YYYY-MM-DD
    section Planning
    Requirements Gathering    :done, req, 2024-01-01, 2024-01-15
    Design Phase              :done, design, 2024-01-16, 2024-02-01
    section Development
    Backend Development       :active, backend, 2024-02-01, 2024-03-15
    Frontend Development      :frontend, 2024-02-15, 2024-03-30
    section Testing
    Unit Testing             :testing, 2024-03-15, 2024-04-01
    Integration Testing      :integration, 2024-03-25, 2024-04-10
    section Deployment
    Staging Deployment       :staging, 2024-04-10, 2024-04-15
    Production Deployment    :prod, 2024-04-15, 2024-04-20

Pie

pie title Technology Stack Distribution
    "React" : 35
    "Node.js" : 25
    "PostgreSQL" : 20
    "Redis" : 10
    "Docker" : 10

Mindmap

mindmap
  root((Web Application))
    Frontend
      React
      Redux
      CSS Modules
      Webpack
    Backend
      Node.js
      Express
      GraphQL
      REST API
    Database
      PostgreSQL
      Redis
      MongoDB
    DevOps
      Docker
      Kubernetes
      CI/CD
      Monitoring

---

UML Viewer Controls

These controls appear when you hover over a UML diagram on the page.

Edit

Opens the modal editor so you can update Mermaid source.

Copy Source

Copies the Mermaid source text to clipboard (useful for reuse across pages).

Zoom In / Zoom Out / Reset

• Zoom In (+) - enlarges the diagram for easier reading
• Zoom Out (−) - reduces the diagram size
• Reset - returns the diagram to its default zoom level

Pan

Click and drag on the rendered diagram to pan around large or complex diagrams.

Fullscreen

Click the Fullscreen button to open the diagram in a fullscreen overlay - useful for large Gantt charts, ERDs, or complex flowcharts.

Error Panel

If the Mermaid source contains invalid syntax, a red error panel appears below the diagram with details about what failed. Fix the syntax and the diagram re-renders automatically.

Comments & Reactions

• View comments - see any comments left on the diagram block
• Add a comment - leave feedback or notes directly on the diagram
• Add a reaction - add an emoji reaction to the diagram block

---

UML Troubleshooting

"Invalid Diagram Syntax"

Likely causes

• Missing diagram header line (e.g., flowchart TD)
• Typos in arrows/keywords
• Unsupported syntax for the selected diagram type

Fast recovery

1. Replace your content with a known-good example
2. Confirm it renders
3. Rebuild your diagram step-by-step (save often)

Diagram looks cropped or hard to navigate

• Use Fullscreen for more space
• Zoom in slightly, then pan to explore
• Consider splitting one large diagram into multiple diagrams

Copy Source didn't work

Some browsers restrict clipboard access in certain embedded contexts.

Workaround:

• Open editor → select text manually → copy