Feature Request: Add Copy Image to Clipboard for Mermaid diagrams

[adrian-cockburn-appspace]

It would be nice to be able to export Mermaid diagrams as an image, similar to what you can do with PlantUML.

With PlantUML I can 'Copy Image to Clipboard' and then immediately paste the generated image into my markdown, which greatly simplifies things. I'll typically then add a collapsible details section around the source used to generate the image.

It would be fantastic if you could do the same with Mermaid.

[RickStrahl]

Unfortunately I don't think that's going to work, because Mermaid images are not images, but are embedded as inline rendered SVG documents. Even if you open the document in a Web Browser and try to save you can't.

Here's what this looks like:

If Mermaid just returned an SVG file that would work as you can save those like images, but inline SVG not so much.

[RickStrahl]

Going to check on a few things - it might be possible after all if i can detect and capture the SVG from the document when right clicking/context menu action.

[RickStrahl]

OK, so I took a closer look and I don't think this will work. Although I was able to capture the SVG content I haven't actually found a decent tool to render the SVG into a PNG. There are components but in my initial attempts I couldn't get them to convert the Mermaid images correctly (partially only).

There are other issue in this as well. Because the charts are actually live SVG documents you can't select the 'SVG' per se - but often end up selecting an individual item inside of the SVG. So rather than the root node you'd end up on one of the rectangles. Furhter if there's rich content inside of the content - like fontawesome icons or bold/markup text any non-Web renderer won't be able to render that correctly as mermaid effectively renders document based content into chart.

In short, this is not going to work without major inconsistencies.

Workaround

The workaround for getting what you want is pretty simple however:

• Use the Windows Snipping Tool
• Press PrtScrn
• Use the Selection Tool (default) to select your Mermaid chart
• Image is now on the clipboard
• Paste into Markdown and Save as PNG

[adrian-cockburn-appspace]

Thanks for looking into that, when I was looking initially I stumbled upon this gist, which was what made me think it would be possible.

• https://gist.github.com/fkurz/3a7380c155bdabb9c47707d4989da9e0

The workaround you mentioned will certainly work for me.

[RickStrahl]

That solution basically runs a local version of mermaid and while could work that's too much effort and extra distribution baggage to deal with in a standalone application.