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

[Uma Ramamoorthi]

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.

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

[Bastian -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.).

[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

[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 -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 -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 -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 :)

[Charlie Misonne]

thank you!