Draw a code block that is already on the page
A macro with nothing inside it draws a Mermaid code block from the page around it. Use this when your pages already hold Mermaid code blocks, for example pasted from Markdown or kept for another Mermaid viewer. You retype nothing, and the code block stays ordinary page content that anyone can read and copy.
Which code block it draws
- The nearest Mermaid code block above the macro. If there is none above, the nearest one below.
- A code block counts as Mermaid when its language is set to
mermaid, or when it has no language and its first line names a Mermaid diagram type, such asflowchart TD,sequenceDiagramorclassDiagram. Comments (%%), settings lines and a front-matter block at the top are skipped when looking for that first line. - Confluence's code-block menu has no Mermaid language. Leave it on "Detect language" and start the block with the diagram type.
- A shell snippet, JSON or any other code block is never drawn.
- A code block inside a macro, such as inside another Mermaid diagram macro, does not count.
- The macro reads the page each time it is shown, so an edit to the code block appears after you publish.
Draw a code block with a new macro
- Edit the page and put the cursor next to the code block, above or below it.
- Type
/Mermaidand choose Mermaid diagram. - In the window, choose Draw the code block on this page instead. The window saves the macro empty, and it says: "This leaves the macro empty: it then draws the nearest Mermaid code block on the page."
- Publish the page.
The window cannot see where the macro sits on a page that is not saved yet, so it names no block at this step.
Change an empty macro
Press Edit (the pencil) on an empty macro. The window says "This macro is empty, so it draws the nearest Mermaid code block on the page", shows that block's text as soon as it has read the page, and then draws it. If the page has none, it says so. Then choose:
- Keep drawing the page's code block, or
- Write the diagram in this macro instead, to write a diagram inside the macro. The window starts with a copy of the page's block, or with the sample diagram when the page has none. The block on the page stays as it is.
Moving from another Mermaid viewer
If another app draws your Mermaid code blocks today, the code blocks are already on your pages:
- Install this app.
- On each page, insert a Mermaid diagram macro next to each code block and choose Draw the code block on this page instead.
- Remove the other app's macro from the page, and publish.
The two apps can be installed side by side while you switch.
When it finds nothing
- "No diagram text yet: To add one, edit the page, click this macro and choose Edit (the pencil), or put a Mermaid code block next to it." The page has no code block the macro can use.
- "No Mermaid code block on this page", followed by "None of the 3 code blocks on this page starts with a Mermaid diagram type, such as flowchart TD." (the number varies). Start one of them with the diagram type, or type the diagram into the macro.
- "The Mermaid code block next to this macro is empty." Add the diagram text to the block.
More in When a diagram does not draw.