Skip to main content

Hello Community,

 

We’re excited to announce that you can now create diagrams using code with Mermaid and PlantUML apps right in Miro. 

 

With these apps you can automate the process of generating complex diagrams with a simple text language — so you don’t have to worry about design and layout.

  • No need to align diagrams or manually update designs — design and layout are automatically applied

  • Copy your diagram code from other sources like GitHub or Notion to automatically re-create your diagram in Miro

  • Visit the Marketplace to install Mermaid and PlantUML 

  • Note, in this first version code will generate an image. We’re curious to hear your feedback and input for the next version

Updates!

  1. Both apps support editing (only on newly created diagrams).
    1. To edit, select the image generated by one of the apps and then click the toolbar icon. The source of the original diagram will be loaded in the editor.
  2. Both apps are update to the latest version supporting new diagram types like C4 architecture
  3. All output generates a vector graphics so there’s no loss of quality when zooming in
  4. Full screen mode for more editing real estate
  5. Improved the speed of both apps

Visit our Help Center to learn more:

Share your ideas or work with the Miro Community and inspire others.

Happy Diagramming,

Turner 

Hi Turner, Thank you for the details. this is amazing to get PlantUML support in Miro. 

Is there any way I can modify a plantUML diagram after it has been added to the board.


Would be great if the code/syntax was kept, and could edited on the board, updating the image on the fly.

Would really help with collaborating around problems/ideas.

Great start though! 👍🏻


+1 to editing, it would be a great alternative to draw.io if the diagrams were mutable


Hi @Turner Pijpers ,

very excited by the mermaid app!

A couple of things:

  1. definitely need the edit functionality, I already got pretty mad at forgetting to copy-paste my diagram in a notepad before hitting “add to board” 😞
  2. the resolution of the image being added to the board is not high enough for complex/long sequence diagrams with a lot of information - the labels become unreadable when zooming in

Thank you!

Iacopo


This is totally useless without storing source and editing


This is an awesome feature! Thank you.

Also, I agree with @Timothy Connolly. One of the main advantages of mermaid is making diagrams easy to change - solves the `Doc-Rot Catch 22` as the mermaid team highlight. I would use this if I could easily edit the mermaid code for the diagram.

FWIW, draw.io let’s you do this by double clicking on the created image to edit the underlying mermaid code:

More details at https://www.diagrams.net/blog/mermaid-diagrams


Hi Arijt, thank you for your feedback. In this first version that’s not yet possible. But we’re taking in feedback from the Community, so glad you mentioned this!

Best,

Turner


Hi all,

I’m excited to share a few updates we made to PlantUML and Mermaid.

  1. Both apps support editing (only on newly created diagrams).
    1. To edit, select the image generated by one of the apps and then click the toolbar icon. The source of the original diagram will be loaded in the editor.
  2. Both apps are update to the latest version supporting new diagram types like C4 architecture
  3. All output generates a vector graphics so there’s no loss of quality when zooming in
  4. Full screen mode for more editing real estate
  5. Improved the speed of both apps

Let us know how you’re using these apps and what you would love to see next!

Best,

Turner 


another +1 to editing!


Would love to have the ability to export diagrams from Miro to Mermaid code so we can backup some of our important diagrams and version them.

But awesome work!


Hi @Turner Pijpers

This plugin is great, but there’s some additional functionality that would make it more useful to us.

Currently it is not possible to edit the individual elements in the diagrams except by updating the markup. This makes it impossible to rearrange the elements, attach comments to individual parts, or connect them to other elements outside the UML diagram.


Rather than generating a static image from the PlantUML, we would like an option to import it using the UML shapes library that Miro provides. This would allow us to edit and extend the diagrams manually. I realize that this would probably have to discard the original markup syntax, but this would be fine for our case. We’re specifically interested in class diagrams, but I believe that this behaviour would be useful for all kinds of diagram.

Thanks,
Robert


+1 for click-to-edit as a feature request. Mermaid.js integration is great, but not practically useful unless we can edit.


Mermaid support is really great. But it would be so much more useful to be able to edit a diagram once it is created.


Hi,

I’m considering asking for the PlantUML miro app to be authorised for use in our company. However it would be good to know where your rendering service sits.

Do you have your own private rendering service which takes the PlantUML code and creates the image without the PlantUML code (i.e. data) leaving your domain or do you use a public rendering server?

Thanks in advance,

Terry.


+1 for click-to-edit feature. It is indeed a must.

Also, seems that the render in mermaid differs from the one in https://mermaid.live/ as the code breaks in Miro but not the the live editor.


Hi all,

I’m excited to share a few updates we made to PlantUML and Mermaid.

  1. Both apps support editing (only on newly created diagrams).
    1. To edit, select the image generated by one of the apps and then click the toolbar icon. The source of the original diagram will be loaded in the editor.
  2. Both apps are update to the latest version supporting new diagram types like C4 architecture
  3. All output generates a vector graphics so there’s no loss of quality when zooming in
  4. Full screen mode for more editing real estate
  5. Improved the speed of both apps

Let us know how you’re using these apps and what you would love to see next!

Best,

Turner 

That’s amazing…..and awesome.

Didn’t know that wish are granted so soon! it’s really good to have the capability to edit Mermaid charts.

Thanks

Aman


Thanks Turner for the details. Will the code be available in any repo to go through?


@Turner Pijpers if it’s not documented already, you should include that information on hosting PlantUML in the documentation to help those that are reviewing the plugin for a later date.

 


Hi @Terry MR 

We host our own PlantUML rendering service, no data leaves our infrastructure.

Hope this is helpful,

Turner 


Hi!

I read with interest this note on PlantUML rendering being hosted on Miro’s infrastructure.

Is that true of Mermaid as well?

Kindest regards,

Jerry

Hi @Terry MR 

We host our own PlantUML rendering service, no data leaves our infrastructure.

Hope this is helpful,

Turner 

 


This is great! Looking forward to trying this in my workflow 


with tools like chatGPT and Claude effortlessly creating mermaid syntax it would be super helpful to get the mermaid output as native MIRO shapes - ready for  layouting, editing, cleaning up etc.


Currently it seems it is not possible to edit either plantuml or mermaid diagrams anymore :(

I select the diagram image - and select the plantuml/mermaid tool, this results in an empty markup editor…  


Hello Community,

 

We’re excited to announce that you can now create diagrams using code with Mermaid and PlantUML apps right in Miro. 

 

With these apps you can automate the process of generating complex diagrams with a simple text language — so you don’t have to worry about design and layout.

  • No need to align diagrams or manually update designs — design and layout are automatically applied

  • Copy your diagram code from other sources like GitHub or Notion to automatically re-create your diagram in Miro

  • Visit the Marketplace to install Mermaid and PlantUML 

  • Note, in this first version code will generate an image. We’re curious to hear your feedback and input for the next version

Visit our Help Center to learn more:

Share your ideas or work with the Miro Community and inspire others.

Happy Diagramming,

Turner 

You Guys are way ahead than anything else in the world, or you guys are thinking to make Miro an Ultimate tool which can be used by students and the scientist. 

Today while working on some documentation on Azure DevOps I was reading about MerMaid documentation about it, and was testing in Azure DevOps , and was feeling a little frustrated because after writing markup syntex, you have to click on “Load Diagram icon). 

Was looking for some online tools, from where i can write the syntax and see the output in real time… and then i stumble upon this post…. https://help.miro.com/hc/en-us/articles/7004628130962 

And Miro’s Mermaid editor support intensenes and real time updates the charts, however the only issues i feel is, that you can’t edit data once it add the charts as an image.

 

Thanks

Aman


+1 for supporting editing - without that I am better off checking it into version control and using my IDE to render (plugins everywhere - the renderer is open source after all)

@Turner Pijpers is this coming up soon?


Reply