Enable HighDPI images from Diagrams.net

[skaag]

Describe the feature you'd like

Right now if you own a HighDPI monitor the images returned from Diagrams.net look fuzzy. To solve this we need to request HighDPI image generation from Diagrams.net

Describe the benefits this would bring to existing BookStack users

This would make pages more readable on HighDPI displays (aka "Retina" displays)

Can the goal of this request already be achieved via other means?

Not without some hacking...

Have you searched for an existing open/closed issue?

• [X] I have searched for existing issues and none cover my fundemental request

How long have you been using BookStack?

0 to 6 months

Additional context

No response

[ssddanbrown]

Some useful discussion in closed duplicate #4156

[hbertsch]

Have the same issue on high res monitors (which almost all new monitors and devices come equipped with). Especially for diagrams with a lot of content the blurriness is so high, that the information can not properly be read. Would be great to have the option to increase diagram renderings

[ssddanbrown]

I've just been doing some investigation into this for a BookStack support service customer, so sharing my findings to ensure I don't forget them:

• The rasterization to PNG during the export inherently introduces some softness. If possible, it may be worth looking into how the diagrams.net PNG rasterization is done, to see if we can achieve something there.
  • This might just be the nature of mapping & scaling to pixels during export, and differences of actual text going via text rendering.
• Most blur gets introduced due to browser scaling of the image as soon as the image goes beyond the bounds of the content area and needs to be resized.
• Exporting at 2/3x scale can help (assuming the extra complication of handling sizes can be managed) but it's not a full solution since you'd still get browser scaling at width limits. Mostly helps for smaller-width drawings on HiDPI screens. Can help add a little clarity for those other cases at >100% monitor scales, but not perfect.
• Something I haven't looked into: potentially extract vector client side and replace in browser. Might not SVG in png, or might not be accessible.
  • Could store vector alongside, and swap back-end, but complexities and edge-cases there.

[skaag]

I believe this is the solution for this problem:

https://www.drawio.com/doc/faq/export-higher-resolution

If you can simply pass that setting over, we should be getting back PNGs at 200% or 300% of the current resolution (as shown on that page). This would be a wonderful fix, since most laptops and desktops these days have high-dpi displays and the blurred images are inadequate.