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.  So 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 flow charts, ER diagrams, Gantt charts, and even pie charts.  This integration is currently only available for Confluence Cloud, but integration for Server and Data Center will be available with the next draw.io release so stay tuned for that!

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.  Define all the parameters of your diagram with text from within a dialog box.

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.

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 Live Editor if you want to see sample diagrams that 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.

Tip: 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 have to create similar diagrams, often.  Check out our example:

Getting 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.

You’ve now seen what else is possible with draw.io, wouldn’t it be a great time to start diagramming?  If you enjoy these kinds of posts, please let us know!  Even better, if you’ve been enjoying draw.io why not share it with your team?  We’d love to hear from you so please don’t hesitate to contact us, we’d love to hear from you.