Diagram gallery

Every Mermaid diagram type the macro renders, with the source behind each one.

Twenty-one diagram types, each rendered here by the same library the macro runs in Confluence. Every panel has a Show source button: what you read there is exactly what goes inside a fenced mermaid block on the page.

Note

Every example on this page is lifted from a real Confluence space that documents the app itself, which is why they are about export jobs and Forge runtimes rather than about cats. Each one is short on purpose: a ten-line diagram is read, a hundred-line one is scrolled past.

Flow and structure

flowchart

The one you will use most. Nodes, edges, subgraphs, and classDef for colour the author controls.

```mermaid · flowchartExample

flowchart LR subgraph risk["Risk class"] B[Low] --- M[Medium] --- H[High] end B --> AP1["Approver: tech lead"] M --> AP2["Approvers: tech lead + manager"] H --> AP3["Approvers: tech lead + manager + CAB"] AP1 --> W1["Window: any time"] AP2 --> W2["Window: off-peak"] AP3 --> W3["Window: Saturday night"] classDef low fill:#DFFCF0,stroke:#216E4E,color:#172B4D classDef mid fill:#FFF7D6,stroke:#A54800,color:#172B4D classDef high fill:#FFECEB,stroke:#AE2E24,color:#172B4D class B,AP1,W1 low class M,AP2,W2 mid class H,AP3,W3 high

sequenceDiagram

Participants over time, with alt, loop and autonumber.

```mermaid · sequenceDiagramExample

sequenceDiagram autonumber participant T as scheduledTrigger participant S as personal-data.ts participant KVS as Forge KVS participant API as Atlassian T->>S: fires (daily) S->>KVS: scan the operation keys KVS-->>S: stored account IDs alt accounts to report S->>API: POST /app/report-accounts/ API-->>S: closed[] and updated[] loop each closed account S->>KVS: delete everything of that person's end else nothing new S-->>T: done end

stateDiagram-v2

States, transitions and choice pseudo-states.

```mermaid · stateDiagram-v2Example

stateDiagram-v2 [*] --> Idle Idle --> Validating : startExport() state decide <<choice>> Validating --> decide decide --> Refused : a job is already running decide --> Reclaiming : previous job finished decide --> Queued : no job Reclaiming --> Queued Queued --> Processing Processing --> Processing : self-chain Processing --> Complete Processing --> Failed : unrecoverable error Complete --> Downloading Downloading --> [*] Failed --> Idle : reset() Refused --> [*]

classDiagram

Classes, generics, stereotypes and relationships.

```mermaid · classDiagramExample

classDiagram direction LR class ExportJob { <<entity>> +string accountId +string spaceKey +JobStatus status +chain(cursor) Promise~void~ +reclaim() Promise~void~ } class JobStatus { <<enumeration>> PENDING RUNNING COMPLETE FAILED } class ChunkedStorage~T~ { <<service>> -CHUNK_SIZE: number +put(key, value) Promise~void~ +get(key) Promise~T~ } ExportJob --> JobStatus : uses ExportJob ..> ChunkedStorage~ExportJob~ : persists in note for ChunkedStorage "180 KB per chunk, KVS limit 240 KiB"

erDiagram

Entities, cardinality and attributes with comments.

```mermaid · erDiagramExample

erDiagram ACCOUNT ||--o{ EXPORT_JOB : "starts" SPACE ||--|{ PAGE : "contains" PAGE ||--o{ PAGE : "parent of" PAGE ||--o{ ATTACHMENT : "has" EXPORT_JOB ||--|{ STORAGE_CHUNK : "serialised into" EXPORT_JOB }|--|{ PAGE : "exports" EXPORT_JOB { string key PK "export:operation:accountId" string status "PENDING RUNNING COMPLETE FAILED" int processed string cursor "self-chain" } STORAGE_CHUNK { string key PK "key plus index" int index "negative = metadata" string payload "up to 180 KB" }

C4Context

The C4 model's first level: people, systems, and the boundary around them.

```mermaid · C4ContextExample

C4Context title System context Person(author, "Content author", "Writes and organises pages") Person(admin, "Administrator", "Installs and licenses") Enterprise_Boundary(atlassian, "Atlassian Cloud") { System(app, "Markdown Toolkit", "Export and rendering") System_Ext(confluence, "Confluence", "Pages, spaces, attachments") System_Ext(marketplace, "Marketplace", "Licensing") } Rel(author, app, "Uses") Rel(admin, marketplace, "Subscribes") Rel(app, confluence, "Reads over REST v2") Rel(marketplace, app, "context.license")

block-beta

A grid of blocks, for a layered picture that a flowchart would arrange badly.

```mermaid · block-betaExample

block-beta columns 4 browser["The user's browser"]:4 space:4 ui1["main-ui"] ui2["content-action-ui"] ui3["macro-ui"] ui4["macro-config-ui"] space:4 block:runtime:4 columns 2 resolver["resolver"] expc["export-consumer"] end space:4 block:persist:4 columns 2 kvs[("KVS chunks")] api["Confluence REST v2"] end ui1 --> resolver ui2 --> resolver resolver --> expc expc --> kvs expc --> api style browser fill:#DEEBFF,stroke:#0052CC style kvs fill:#E3FCEF,stroke:#006644 style api fill:#FFFAE6,stroke:#FF8B00

architecture-beta

Services and groups, with edges that attach to a named side of each box.

```mermaid · architecture-betaExample

architecture-beta group atlassian(cloud)[Atlassian Cloud] group forge(server)[Forge Runtime] in atlassian group data(database)[Storage] in atlassian service ui(internet)[React iframes] in forge service resolver(server)[Resolver] in forge service consumers(server)[Queue Consumers] in forge service kvs(database)[Forge KVS] in data service confluence(database)[Confluence Content] in atlassian ui:R --> L:resolver resolver:R --> L:consumers consumers:B --> T:kvs consumers:R --> L:confluence resolver:B --> T:kvs

mindmap

Indentation is the whole syntax. Good for a feature map nobody wants to lay out by hand.

```mermaid · mindmapExample

mindmap root((Markdown Toolkit)) Export Single page from the page menu Page tree child-position many levels Whole space many roots no homepage Attachments base64 in the KVS path rewritten in the MD Macro markdown-it html linkify typographer highlight.js KaTeX inline display Mermaid Compliance Personal Data API closed accounts Licensing No personal data in logs

requirementDiagram

Requirements, their risk and verification method, and what satisfies them.

```mermaid · requirementDiagramExample

requirementDiagram requirement compliance { id: 1 text: The app must meet the Marketplace rules risk: high verifymethod: inspection } functionalRequirement report_accounts { id: 1.1 text: Report stored account IDs once per cycle risk: high verifymethod: test } performanceRequirement chunk_limit { id: 2.1 text: No KVS value may exceed 240KiB risk: medium verifymethod: test } element personal_data_service { type: module docref: "src/services/personal-data.ts" } element storage_service { type: module docref: "src/services/storage.ts" } compliance - contains -> report_accounts personal_data_service - satisfies -> report_accounts storage_service - satisfies -> chunk_limit

packet-beta

Bit ranges in a binary layout. Niche, and exactly right when you need it.

```mermaid · packet-betaExample

packet-beta title Layout of a chunk in the KVS 0-15: "Chunk index (negative = metadata)" 16-31: "Format version" 32-63: "Payload length" 64-95: "CRC32" 96-127: "Flags (compressed, base64, final)" 128-255: "Payload (up to 180 KB, truncated)"

Plans and time

gantt

Dates, dependencies (after), and task states. Wide by nature — this is the type the Width setting exists for.

```mermaid · ganttExample

gantt title Markdown Toolkit roadmap dateFormat YYYY-MM-DD axisFormat %d/%m excludes weekends section Backend Confluence v2 client :done, be1, 2026-06-01, 10d HTML to Markdown converter :done, be2, after be1, 14d Chunked KVS storage :done, be3, after be1, 8d Self-chaining consumer :done, be4, after be2, 12d Personal Data Reporting :active, be5, after be4, 7d section Macro markdown-it renderer :done, mc1, 2026-07-01, 6d Mermaid + highlight.js :done, mc2, after mc1, 8d KaTeX :done, mc3, after mc2, 4d Unify view and config :crit, mc4, after mc3, 5d

timeline

Periods and the events inside them. No dates to get wrong.

```mermaid · timelineExample

timeline title How the app grew section Foundation Jun 2026 : Forge scaffold : Confluence v2 client : First single-page export section Scale Jul 2026 : Chunked KVS storage : Async consumers : Self-chaining for large spaces : Whole-space export section Experience Aug 2026 : Page tree selector : Markdown macro with Mermaid : Nine locales section Marketplace Sep 2026 : Personal Data Reporting : Licensing gate : Submitted for review

journey

Steps scored 1–5 by who lives them. The low scores are the point.

```mermaid · journeyExample

journey title Exporting a whole space to Markdown section Discovery Open the space: 5: User Find Markdown Toolkit: 4: User section Setup Pick the pages: 5: User Tick include attachments: 4: User Click Export: 5: User section Waiting Watch the progress bar: 3: User, App Poll every 3 seconds: 2: App Self-chain on a large space: 1: App section Result ZIP assembled in the browser: 4: App Download finished: 5: User

kanban

Columns, cards, and per-card metadata such as priority and assignee.

```mermaid · kanbanExample

kanban backlog[Backlog] t1[Unify the macro view and config renderers]@{ priority: 'Very High' } t2[Sanitise HTML before rendering]@{ priority: 'Very High' } t3[Preserve table alignment]@{ priority: 'High' } todo[To do] t5[Skeletons on every screen]@{ priority: 'High' } t6[i18n tests]@{ priority: 'Low' } doing[In progress] t7[Personal Data Reporting]@{ priority: 'Very High' } done[Done] t9[KaTeX with a static import] t10[180 KB chunking] t11[Self-chaining consumers]

Numbers

pie

One line per slice. showData prints the values.

```mermaid · pieExample

pie showData title Where the time goes in a 500-page export "Fetching pages" : 4210 "Downloading attachments" : 3105 "HTML to Markdown" : 1890 "Base64 + chunking" : 1420 "Assembling the ZIP" : 860 "Runtime overhead" : 515

xychart-beta

Bars and lines on the same axes.

```mermaid · xychart-betaExample

xychart-beta title "Average days in each status" x-axis ["Backlog", "Selected", "Dev", "Review", "Test"] y-axis "Days" 0 --> 14 bar [12, 2, 3, 4, 1]

sankey-beta

Flows and where they go. Three comma-separated columns: from, to, value.

```mermaid · sankey-betaExample

sankey-beta Storage format,Tokenizer,100 Tokenizer,Markdown body,62 Tokenizer,Tables,18 Tokenizer,Code blocks,12 Tokenizer,Dropped,8 Markdown body,KVS chunk,62 Tables,KVS chunk,18 Code blocks,KVS chunk,12 KVS chunk,ZIP,92 ZIP,Download,92

radar-beta

Several things scored on the same axes, overlaid.

```mermaid · radar-betaExample

radar-beta title Coverage by surface axis cov["Test coverage"], i18n["i18n"], perf["Performance"] axis a11y["Accessibility"], err["Error handling"], doc["Documentation"] curve backend["Backend (src/)"]{90, 100, 75, 40, 85, 80} curve mainui["main-ui"]{60, 95, 70, 65, 70, 55} curve macro["markdown-macro-ui"]{35, 20, 55, 45, 50, 40} max 100 min 0

treemap-beta

Nested proportions. Here, lines of code per module.

```mermaid · treemap-betaExample

treemap-beta "Markdown Toolkit" "src (backend)" "services" "html-to-markdown": 820 "confluence-client": 540 "storage": 380 "personal-data": 210 "resolvers" "export": 340 "spaces": 90 "consumers" "export-consumer": 470 "static (frontend)" "main-ui": 1240 "markdown-macro-ui": 419 "markdown-macro-config-ui": 385 "content-action-ui": 260

quadrantChart

Two axes, four named quadrants, points placed by coordinate.

```mermaid · quadrantChartExample

quadrantChart title Which workflow to use x-axis "Little ceremony" --> "Much ceremony" y-axis "Low-risk change" --> "High-risk change" quadrant-1 "Critical change" quadrant-2 "Too much process" quadrant-3 "Everyday task" quadrant-4 "Risk without control" "Simple task": [0.12, 0.15] "Development": [0.45, 0.40] "Change with approvals": [0.88, 0.85] "Production bug": [0.30, 0.75] "Documentation": [0.10, 0.08]

If a diagram does not appear

Check the fence says exactly mermaid, then switch the macro to Preview — Mermaid reports its own syntax errors there, with the line number. A diagram type Mermaid does not know reports itself the same way.