Create Mermaid diagrams in draw.io for Confluence Cloud

We here at draw.io enjoy a good musical as much as the next person, but this post isn’t going to be about that kind of mermaid (sorry, Ariel).

Enter Mermaid syntax!  Mermaid syntax is a Markdown-inspired syntax that enables you to automatically generate diagrams in draw.io.

If you are used to working in a text-based format, this is the perfect way for you to diagram more efficiently. There are many different kinds of diagrams that you can create using this method, including flowcharts, sequence diagrams, ER diagrams, class diagrams, Gantt charts, and pie charts.

The best of both worlds

Just like an actual mermaid, Mermaid diagrams bring the best of two different worlds together.  In our case: text-based and visualization.

To insert a Mermaid diagram into your Confluence Cloud page, you only need a couple of clicks and adjustments, and you’re good to go:

1. On the Confluence page, start typing /draw and select draw.io Diagram.
2. Name your diagram and hit Create.
3. Click on the plus (+) symbol in the top menu and select Mermaid. Alternatively, go to Arrange > Insert > Mermaid.
4. A dialog box will pop up where you can enter the text for the diagram you want to create.
5. Click Insert.

For more on Mermaid:

• Blogpost, Mermaid in draw.io updated to support ELK layout
• Blogpost, Re-edit a mermaid diagram in draw.io
• Take a look at the full documentation in order to dive deeper into Mermaid diagrams and see everything that is possible.
• Head on over to the Mermaid website with a live editor and see sample diagrams you can quickly adapt for your own use.

Putting the whole thing together

Now that you’ve had a look around, it’s time to see all of this in action. With Mermaid diagrams, you just add your data and everything renders automatically.

Tips

Re-edit a Mermaid diagram: You can edit the Mermaid code once it’s been created. Important: this option only works as long as you have selected Image (instead of the default “Diagram”), before inserting the diagram. Please refer to the screenshot below:

Use a text doc for Mermaid code: You can use a text doc to create code and save it for when you need it.  When you’re ready, just copy and paste it into the Mermaid diagram dialog window in draw.io!  This is especially handy if you often have to create similar diagrams.  Check out our example:

Get things done, faster

Apart from Mermaid diagrams, draw.io has many ways you can automatically create diagrams.  Did you know that you can create diagrams by importing CSV data into draw.io?  This allows you to automatically create diagrams with data that you already have.  It’s a great way to work more efficiently with lots of information.