Programatically create a diagram with Mermaid

[aounleonardo]

I'm trying to programmatically load a diagram written in Mermaid (say graph TD;\n A-->B;\n).

Manually, this would be done by clicking on "Arrange" then hovering over "Insert" then "Advanced" and then clicking on "Mermaid...". Is there something you could expose that would allow me to call these buttons or call the underlying code that DrawIO uses?

I dived into and and this is the line where the diagram gets generated, it's inside this function called generateMermaidImage and I even found where exactly it happens in the mermaid.min.js: search for "try{await j.renderer.draw(s,i,Aje,j)}".

However, I can't figure out how can I call this from outside of the <DrawIoEmbed/> component

[marcveens]

I also did some investigation but unfortunately I can't find a way to do this programatically. Everything is rendered in an iframe so we can't access that, and I can't find any documentation on how to handle a mermaid format in the embedded version. If you manage to transform the mermaid code into drawio supported svg/xml, I'm happy to integrate the code into the component for easier use!

[aounleonardo]

Thanks @marcveens for your quick answer! I'll try to either:

1. convert Mermaid to svg/xml
2. See if drawio could expose the "Insert Mermaid code" in a way that would allow you to expose that to us

Cheers 😄