Redmine

Redmine can render Mermaid code blocks as diagrams since #44425. However, users who want to reuse a rendered diagram in a document or a presentation have to take a screenshot, because there is no way to save it as a file.

The attached patch adds a download link to rendered Mermaid diagrams. The link saves the diagram as a PNG image.

How it works:

• When you hover over a rendered diagram, a download link appears next to the existing copy button.
• The link is shown only when the diagram has been rendered. It does not appear when Mermaid.js is not installed or when Mermaid.js fails to render the diagram.
• The image is generated in the browser from the diagram that is already displayed. The patch does not add any server-side processing or any new library.

Why PNG instead of SVG:

The SVG generated by Mermaid.js relies on HTML (the foreignObject element) and CSS. When such a file is pasted into PowerPoint, its appearance changes so much that the diagram is not usable. A PNG image looks the same as the diagram on the screen and can be pasted into other applications as it is.

Details of the saved image:

• The image is saved at twice the size of the diagram, so that it stays sharp on high-resolution displays and when it is enlarged.
• To avoid excessive memory usage, the image is limited to 4,096 pixels per side and 8,000,000 pixels in total. A larger diagram is scaled down with its aspect ratio preserved.
• The file name consists of the diagram type and the @2x suffix, for example "mermaid-flowchart@2x.png" or "mermaid-sequence@2x.png". Thanks to the suffix, Redmine displays the image at the size of the original diagram when the file is attached and shown inline. The suffix is omitted when the image has been scaled down.
• The background is transparent, as in the diagram generated by Mermaid.js.
• Images that a diagram loads from external URLs are not included in the saved image.

I have confirmed that the download works in Chrome, Firefox, and Safari.

"Download" button:

Saved PNG image: