Ability to save/export Mermaid graphs as image

Features
1

(I have searched for this, but haven't found mention of it)

Background

I've started using Mermaid graphs for my UX work. I'm really impressed by how simple it is to make useful graphs.

An example is this process flow for submitting an invoice in a finance system and status notifications different users would need .

The next thing I woud normally do with something like this is to embed this in a document, or a Github issue.

Feature request

It would be very nice to be able to save the Mermaid graph image generated as a stand-alone image. This image could then be shared with others, added into documents, etc.

Current situation

Current exports don't help

Right now, there are options for exporting as JEX, RAW, HTML, MD, PDF and others.

I've tried using the PDF first, but this doesn't work for me as the graph has been split over 2 pages -

image

Screenshot doesn't help

I can screenshot the graph and due to the size of some graphs this can turn out to be a low fidelity image and it's unusable.

Ideal situation / possible solution

It would be nice if it were possible to save the Mermaid generated image as an image file - e.g SVG, PNG, JPG.

An "export image button that was visible when you mouse over the image, and a right-click context menu given you options on how to export the image would be wonderful.

I've put together this lo-fi mockup to explain what I mean:

(See if bigger here)

Is something like this possible? I'm happy to give more help if it helps.

1 Like
2

It's true that there's no easy way to share a graph at the moment. We already have a "Copy image" menu item when right-clicking on an image so perhaps the same code could be applied to Mermaid graphs.

The Export button is probably trickier to implement although it would be better for discoverability. I feel that should be something that applies to all media actually, including code blocks, but that would be a bigger task.

1 Like
3

We already have a "Copy image" menu item when right-clicking on an image so perhaps the same code could be applied to Mermaid graphs.

This would be the "a right-click context menu" I mentioned above, right?

On Joplin 2.6.10 this is called "Save as"? I wasn't aware that was possible! Having this functionality applied to Mermaid Graphs would be a good start.

The Export button is probably trickier to implement although it would be better for discoverability. I feel that should be something that applies to all media actually, including code blocks, but that would be a bigger task.

Sure, this could be implemented after the "Save as" / "Copy Image" feature mentioned above.

Would you like me to open a Github issue, or is this enough? Thanks.

4

If you could create that would be great (you can create a bug report and we'll label correctly afterwards). In fact could you maybe create two issues? One for the context menu item, and one for the Export button? I think the first one could be a good first issue so better keep it separate.

Yes indeed. And I was mostly talking about the implementation - since we already have a context menu, maybe we can use the same code to activate it on the Mermaid graphs.

5

In fact could you maybe create two issues?

Certainly, no problem.

One for the context menu item, and one for the Export button? I think the first one could be a good first issue so better keep it separate.

Here you go:

@laurent Would you like the export button to focus on Mermaid graphs as I asked about? Or for all media, like you mentioned above? I've created an issue specifically for Mermaid graphs.

Anything else needed?

6

Great, thanks Bernard. The second issue is fine as it is - I've just added a comment to mention that ideally we should be able to reuse the same code for images, code blocks, etc.

7

OK great @laurent. Please tag me here or in the GH issue if there's anything I can help with, testing, providing some designs.

8

As a workaround until a fix is ready you could copy the source into an online Mermaid editor and export as SVG

9

Thanks to @asrient for implementing this Add right-click "save image" context menu to Mermaid graphs · Issue #6100 · laurent22/joplin · GitHub.

From their demo video it looks really nice:

Thanks! :clap: :clap:

4 Likes
10

Hi there,
thanks for this very useful improvement of Mermaid!

How could I get it to work in my version of Joplin?
Is there any Plugin or upgrade etc. required?

Joplin 2.7.15 (prod, win32)
OS: Win10

11

@FreeCutter as I understand it, it's been added into the Joplin app so when the next release is made, and you upgrade, it'll be there, no need for plugin.

12

It is in the 2.8 pre-release, you can either upgrade your main system or just download the portable app if you just want to check it out.

1 Like
13

Hi @Daeraxa do you have any info on how far away this pre-release is from being a stable release? Thanks.

14

No idea I'm afraid, Laurent is in charge of that but it typically doesn't take that long to go from pre-release to release so long as there is nothing breaking in there.

15

Okay thanks a lot for your support - looking forward getting the next release!