Skip to content
Yamuno
Browse

Mermaid Diagrams

Markdown files often contain diagrams written in Mermaid, inside a fenced code block marked mermaid. The importer can keep these as code, or turn each one into a macro that draws the diagram on the page.

```mermaid
graph TD
  A[Start] --> B{Works?}
  B -->|Yes| C[Ship it]
  B -->|No| D[Fix it]
```

Choose how diagrams are imported

A Confluence admin picks one option for the whole site:

  1. Go to Confluence Settings (the gear icon in the top right)
  2. Under Apps, select Markdown Importer for Confluence
  3. Open the Import settings tab
  4. Under Mermaid diagrams, choose an option. It saves straight away.
Option What you get What the site needs
Keep as code blocks (default) Each diagram is imported as a Mermaid code block, showing its source Nothing
Render with Mermaid Diagrams Each diagram becomes a Mermaid Diagram macro, drawn on the page and editable in the macro's own editor Mermaid Diagrams for Confluence Cloud installed
Render with Markdown Macro+ Each diagram becomes a Markdown Macro+ macro that renders it The free Markdown Macro+ for Confluence installed

Each app option has a Get it on Atlassian Marketplace link to install the app.

The setting applies to every import on the site: imports from the importer and imports through the REST API. There is no per-import choice.

Good to know

  • Diagrams inside lists, quotes or tables stay as code blocks. Confluence doesn't allow macros in every place, so only diagrams at the top level of a page are rendered.
  • Install the app before choosing it. If the app you choose isn't installed, pages show Confluence's placeholder for a missing app instead of the diagram.
  • Changing the setting doesn't change pages already imported. It applies to imports from then on.
  • Atlassian Government Cloud sites only offer Keep as code blocks, because the diagram apps aren't available there yet.

Guides for Markdown Importer for Confluence Cloud

Stuck on something this page does not cover? Ask the developers.