PNG Output Seriously Degraded and Unusable after Version 9.1.6

[p2gdeveloper]

Description

I have written some farily standard code to download my Mermaid drawings as PNG images but there is a huge drop in quality when I do this in version 9.1.7+ versus 9.1.6. The images in versions 9.1.7 and up are so blurry that they are unusable. I have done some troubleshooting and digging and found that:

1. If I set useMaxWidth to false, this resolves the issue for Sequence diagrams but sadly not for ER, Class and State diagrams etc. I think it is therefore linked to the discussion here: SVG height attribute absent with 9.1.7 #3659 between @knsv and the OP.
2. The issue does not seem to affect User Journey diagrams.
3. I can only sort of reproduce the issue in the live editor if I set the width to somehing like 400px or lower. This is not the case in my app however - it doesn't matter what the width is and as I say, it works fine in v9.1.6.

I have spent weeks trying to find a workaround to this as I really need some of the functionality in later versions than v9.1.6 so someone please help.

Steps to reproduce

1. Go to https://ajmn2.bubbleapps.io/version-test/mermaid_v916 to see an acceptable image from v9.1.6.
2. Go to https://ajmn2.bubbleapps.io/version-test/mermaid_v943 to see the same image from v9.4.3.
3. Compare the two - or just look at the two screenshots I have linked to below.

Screenshots

Screenshots: https://imgur.com/a/nx2LfFK

Code Sample

No response

Setup

• Mermaid version: 9.1.7 and above.
• Browser and Version: Chrome

Additional Context

No response

[p2gdeveloper]

I'm still testing but using the viewBox height for the png image seems to be a workaround for this.