# Ability to save/export Mermaid graphs as image

**URL:** https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491
**Category:** Features
**Created:** [3 February 2022 17:46 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491 "2022-02-03T17:46:47Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![bernard](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bernard/32/10111_2.png) [@bernard](https://discourse.joplinapp.org/u/bernard)
#### Post date: [3 February 2022 17:46 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/1 "2022-02-03T17:46:47Z")

</div>

(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](https://notes.saneux.ei8fdb.org/shares/pI92hWbkbGPe09lysF9fWH).

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](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/a/ab0565a5ae801e26f31cb13292b1d76d76096053.png)

### 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:

[https://share.balsamiq.com/c/7mrdN5vUL4WnPXt2jKpcH4.png](https://share.balsamiq.com/c/7mrdN5vUL4WnPXt2jKpcH4.png)

([See if bigger here](https://share.balsamiq.com/c/7mrdN5vUL4WnPXt2jKpcH4.png))

* * *

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

---

<div class="post-metadata">

### Author: ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)
#### Post date: [3 February 2022 18:48 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/2 "2022-02-03T18:48:21Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![bernard](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bernard/32/10111_2.png) [@bernard](https://discourse.joplinapp.org/u/bernard)
#### Post date: [3 February 2022 19:09 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/3 "2022-02-03T19:09:23Z")

</div>

> 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.

---

<div class="post-metadata">

### Author: ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)
#### Post date: [4 February 2022 11:17 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/4 "2022-02-04T11:17:35Z")

</div>

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.

> [@bernard](#):
>
> This would be the "a right-click context menu" I mentioned above, right?

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.

---

<div class="post-metadata">

### Author: ![bernard](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bernard/32/10111_2.png) [@bernard](https://discourse.joplinapp.org/u/bernard)
#### Post date: [4 February 2022 15:42 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/5 "2022-02-04T15:42:33Z")

</div>

> 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:

> <https://github.com/laurent22/joplin/issues/6100>
>
> \## Feature discussion
> 
> This feature request was discussed in \[Joplin discourse…\](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/3).
> 
> \## Feature description
> 
> Enable the ability to save a Mermaid graph as an image for use outside of Joplin.
> 
> \## Use case / User need
> 
> Using Mermaid graphs to document a process. \[Here's an example\](https://notes.saneux.ei8fdb.org/shares/pI92hWbkbGPe09lysF9fWH).
> 
> A common need would be to use the graph outside of Joplin - embed it in a document, or a Github issue.
> 
> Currently this is not easily achieved.
> 
> \## Current workarounds
> 
> Current note exports (MD, HTML, JEX, PDF,etc ), or screenshotting the graph do not support the need well.
> 
> This means that using the graph outside of Joplin is not practically possible.
> 
> \## Possible approach
> 
> Joplin currently has a right-click context menu for saving images outside of Joplin - 
> 
> !\[image\](https://user-images.githubusercontent.com/1899506/152554530-b94fa20f-48d8-4740-88a4-a318bdbe4abf.png)
> 
> This context menu could be re-used to allow a Joplin user to save the Mermaid graph as an image file.
> 
> It would be very nice if the image was an svg (to be scalable). If not, at least png or jpg. 
> 
> As illustration here's a simple mock-up of how it might work:
> 
> !\[image\](https://user-images.githubusercontent.com/1899506/152555134-b5d0cb8f-6650-46bb-9fe8-441aaaf76a71.png)
> 
> Using this context menu the user could save the image in whatever format was supported.

@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.

> <https://github.com/laurent22/joplin/issues/6101>
>
> \## Feature discussion
> 
> This feature request was discussed in \[Joplin discourse…\](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/3).
> 
> \## Feature description
> 
> An easily discoverable method, visible in the UI, to export a Mermaid graph. 
> 
> \## Use case / User need
> 
> Using Mermaid graphs is to document a process, \[here's an example\](https://notes.saneux.ei8fdb.org/shares/pI92hWbkbGPe09lysF9fWH). A common next step need would be to use the graph outside of Joplin - embed it in a document, or a Github issue.
> 
> Unless a user is very familiar with Joplin the ability to export/save a graph is not easily achieved.
> 
> \## Current workarounds
> 
> This good first issue is not yet implemented https://github.com/laurent22/joplin/issues/6100. When it is, the user could use this method. 
> 
> Current note exports (MD, HTML, JEX, PDF,etc ), or screenshotting the graph do not support the need well. This means that using the graph outside of Joplin is not practically possible.
> 
> \## Possible approach
> 
> A possible approach would be to provide an "export graph" button which the user can click to export the graph. 
> 
> When the user clicks this button they could be prompted to save the graph as an image file. It would be very nice if the image was an svg (to be scalable). If not, at least png or jpg.
> 
> As illustration here's a simple mock-up of how it might work:
> 
> !\[image\](https://user-images.githubusercontent.com/1899506/152560144-7c2ffee3-975f-4a40-a9f7-ee8792ef2637.png)
> 
> 
> \### Reduce visual noise
> 
> In order to reduce the amount of visual noise, this button could be hidden/not visible until the user hovers over/highlights the graph.
> 
> (I'm unsure how this would affect accessibility for visually impaired users)

Anything else needed?

---

<div class="post-metadata">

### Author: ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)
#### Post date: [4 February 2022 16:04 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/6 "2022-02-04T16:04:52Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![bernard](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bernard/32/10111_2.png) [@bernard](https://discourse.joplinapp.org/u/bernard)
#### Post date: [4 February 2022 16:14 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/7 "2022-02-04T16:14:09Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ianp5a](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/ianp5a/32/21_2.png) [@ianp5a](https://discourse.joplinapp.org/u/ianp5a)
#### Post date: [12 February 2022 11:01 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/8 "2022-02-12T11:01:46Z")

</div>

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

> **[Online FlowChart & Diagrams Editor - Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/edit/)**
>
> Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript.

---

<div class="post-metadata">

### Author: ![bernard](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bernard/32/10111_2.png) [@bernard](https://discourse.joplinapp.org/u/bernard)
#### Post date: [29 March 2022 21:04 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/9 "2022-03-29T21:04:00Z")

</div>

Thanks to @asrient for implementing this [Add right-click "save image" context menu to Mermaid graphs · Issue #6100 · laurent22/joplin · GitHub](https://github.com/laurent22/joplin/issues/6100).

From their demo video it looks really nice:

[https://user-images.githubusercontent.com/44570278/156900128-c39516f1-0aed-44c8-b64b-a2067ac53c7f.mov](https://user-images.githubusercontent.com/44570278/156900128-c39516f1-0aed-44c8-b64b-a2067ac53c7f.mov)

Thanks! 👏 👏

---

<div class="post-metadata">

### Author: ![FreeCutter](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/freecutter/32/2915_2.png) [@FreeCutter](https://discourse.joplinapp.org/u/FreeCutter)
#### Post date: [5 May 2022 08:22 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/10 "2022-05-05T08:22:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![bernard](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bernard/32/10111_2.png) [@bernard](https://discourse.joplinapp.org/u/bernard)
#### Post date: [5 May 2022 11:36 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/11 "2022-05-05T11:36:54Z")

</div>

@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.

---

<div class="post-metadata">

### Author: ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)
#### Post date: [5 May 2022 11:41 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/12 "2022-05-05T11:41:47Z")

</div>

It is in the [2.8 pre-release](https://discourse.joplinapp.org/t/pre-release-v2-8-is-now-available-updated-27-april/25158), you can either upgrade your main system or just download the portable app if you just want to check it out.

---

<div class="post-metadata">

### Author: ![bernard](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bernard/32/10111_2.png) [@bernard](https://discourse.joplinapp.org/u/bernard)
#### Post date: [5 May 2022 11:57 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/13 "2022-05-05T11:57:51Z")

</div>

> [@Daeraxa](#):
>
> It is in the [2.8 pre-release](https://discourse.joplinapp.org/t/pre-release-v2-8-is-now-available-updated-27-april/25158), you can either upgrade your main system or just download the portable app if you just want to check it out.

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

---

<div class="post-metadata">

### Author: ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)
#### Post date: [5 May 2022 12:02 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/14 "2022-05-05T12:02:08Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![FreeCutter](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/freecutter/32/2915_2.png) [@FreeCutter](https://discourse.joplinapp.org/u/FreeCutter)
#### Post date: [5 May 2022 12:42 UTC](https://discourse.joplinapp.org/t/ability-to-save-export-mermaid-graphs-as-image/23491/15 "2022-05-05T12:42:09Z")

</div>

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