PeakDevs

Getting started

You need the app installed on your Confluence Cloud site. Only a site admin can install it; anyone else can send the admin an app request from Confluence's Apps menu.

Insert a diagram

  1. Edit a page or blog post.
  2. Type /Mermaid and choose Mermaid diagram.
  3. A window opens with a small sample diagram. On the left is the diagram text, on the right the preview.
  4. Change the text. The preview draws again each time you stop typing for a moment.
  5. Press Save. The window closes and the macro holds your diagram text.
  6. Publish the page. The diagram draws on the page.

The first time the window opens it can take a few seconds. While it loads, it says "Opening the diagram".

While you type

  • If the text has a mistake, the preview shows what is wrong and on which line. The last diagram that drew stays below it, faded, so you do not lose your place.
  • Save is off while the text is empty.
  • Cancel closes the window without saving. On a new macro, Cancel also removes the macro from the page. Pressing Escape or clicking outside the window does not close it.
  • If saving fails, the window says "The diagram was not saved", gives Confluence's reason, and keeps your text so you can try again.

Edit a diagram later

  1. Edit the page and click the macro.
  2. In the small toolbar that appears, press Edit (the pencil).
  3. Change the text in the window and press Save.

Use the window to edit. While a page is being edited, Confluence shows the macro as a box with the diagram's text in a code block, not the drawing. You can change that text in place, but you see the result only after you publish. The window shows it as you type.

Where the diagram text is kept

The text is part of your page, in a code block inside the macro. It is saved with the page, appears in the page history, and is found by Confluence search. The app keeps no copy anywhere else.

If you typed the diagram straight into the macro as plain lines instead of a code block, the macro still reads it. Confluence's editor turns some characters into typographic ones as you type, such as --> into an arrow; the macro turns them back and shows "Drawn from typed lines. A code block (type /code) keeps the text exactly as typed." Opening the window and pressing Save turns the lines into a code block.

Next