nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Can I edit mermaid diagram created in draw.io macro?

Uma Ramamoorthi_2dn8qz

Hello,

I'm using draw.io inside Confluence, but did not see the diagram option under the Advanced->Mermaid menu.

I am able to successfully create a diagram from Mermaid menu but I would like to edit it as well. Docs mentioned that if one chooses the diagram option then the mermaid generated flowchart will be editable. Did I misunderstand?

Please refer to the screenshot below.

Screenshot 2025-07-30 at 3.25.40 PM.png

I am on Confluence Enterprise version and using draw.io 11.1.1 version if that helps.

Any hints would be appreciated.

Thank you so much.

Uma

Accepted answers

All comments

Tinker Fadoua

Welcome to the Atlassian Community @Uma Ramamoorthi !

I will recommend to raise a support ticket with the vendor not Atlassian because they will know exactly the steps required to be able to edit the diagram from inside Draw.io

Best,

Fadoua

Bastian Schmitt -drawio Diagrams-

Hey @Uma Ramamoorthi

Thanks for bringing up that question. In draw.io, you have two options when creating a diagram using Mermaid code. By default, Mermaid code gets rendered as a Diagram (see screenshot attached) that you can enhance, change styles manually etc. For this option, you can't go back to the code. But if you choose the option Image, you can always go back and refine your Mermaid code by hitting the Enter key or double-clicking on the image.

You can have a Best of both worlds approach, when you start with the Image option first and refine your diagram on the code level up to a degree where you feel comfortable with the result. Then copy the code and embed it as a diagram, to then be able to customize the diagram by hand (change the location of shapes, colour them in, etc.).

Screenshot 2025-07-31 at 07.27.08.png

Charlie Misonne

According to draw.io's blog it should be possible: https://www.drawio.com/blog/mermaid-diagrams

But the article is 6 years old and I don't think editing is still supported.

Bastian Schmitt -drawio Diagrams-

@Charlie Misonne, Not sure if I misunderstood your message. Re-editing Mermaid code is possible (as I mentioned in my previous message) if you choose Image as the output for your data. If you choose Diagram, Mermaid code will be rendered to the draw.io XML format, which doesn't support re-editing. But the output option Image will do the job.

Charlie Misonne

Hi @Bastian Schmitt -drawio Diagrams-

I missed your comment. But that's actually great!

Your blog doesn't mention that part though. In the screenshot "diagram" is used and not "image".

Bastian Schmitt -drawio Diagrams-

@Charlie Misonne Agreed, we wil update the blog post (and also the post https://drawio-app.com/blog/create-mermaid-diagrams-in-draw-io/) in the near future. Thanks for pointing that out

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

cloud

confluence-cloud