Diagram as Code: PlantUML and Mermaid-Js

  • 5 September 2022
  • 30 replies
  • 6291 views
Show first post

30 replies

aman
Userlevel 3
Badge

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

A bird is safe in its nest - but that is not what its wings are made for..
Turner Pijpers
Rank
Userlevel 6

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 

aman
Userlevel 3
Badge

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

A bird is safe in its nest - but that is not what its wings are made for..
R

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

J

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…  

Reply


Terms & Conditions