Exported Mermaid graphs as PNG are incredibly small

[iRomanyshyn]

I don't know when it started. Maybe, a couple of weeks ago. Joplin on Ubuntu started making Mermaid renders very small in size if I export them as PNG.

Environment

Joplin version: 2.9.17
Platform: Ubuntu 22.04

Steps to reproduce

1. Paste the code:

flowchart TD;

b ===> a
b === c
c -...- |Test| b
d & e & f --- b

subgraph "A"
	a
	d
	e
	f
	b
end

Loading

flowchart TD;

b ===> a
b === c
c -...- |Test| b
d & e & f --- b

subgraph "A"
	a
	d
	e
	f
	b
end

2. Click the right mouse button on the rendered image and save it somewhere as PNG.
3. Check the PNG file size. It will be 4.5kB which is catastrophically small to distinguish anything from there.

Describe what you expected to happen

Expected to have a bigger image than this.

[tessus]

One more thing for me to add to my Mermaid tests: exporting to png/svg.

I am sorry that I missed this. I totally forgot about this feature.

Update: Although I doubt it's Mermaid, b/c exporting to PNG is not done with Mermaid.

[adarsh-sgh]

Save as png option converts svg code of the image into png and saves it.

Svg Images have a viewBox attribute, we can use it to define width and height of the image we will be saving as png.
e.g. the mermaid in first comment of this diagram has svg:

<svg viewBox="-8 -8 258.080078125 446" ...

so setting png dimensions to 258 * 446 we get following png image

Should I open A PR with these changes ?

[tessus]

Yes, I think that would make sense. Please do.

P.S.: If the origin point is negative, doesn't it mean we should add those values ABS(x, y) numbers to x' and y'.

e.g. for this image 266x454

[adarsh-sgh]

If the origin point is negative, doesn't it mean we should add those values ABS(x, y) numbers to x' and y'.

I think the size of image would remain same regardless of origin changes so we need not add it to width and height.
following image has first two parameter of viewBox as -50 but still it has same dimensions as original image.

viewBox is drawn with red