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.

[mgabor3141]

Thanks everyone, I managed to find a workaround using the info above. The line that determines the export parameters is indeed this one:

https://github.com/BookStackApp/BookStack/blob/3a058a6e349db0456c294fc47e5537a0fd73ecd0/resources/js/services/drawio.js#L25

According to the API you can add a scale parameter here to get higher DPI images.

I think a PR increasing the default would be a perfect solution. I don't think that adding a global or per image configuration would be necessary.

Until this gets a change, here's a workaround that can be used to generate higher DPI, non blurry images. I'm intentionally writing the instructions in a way that non-developers stumbling on this thread should also be able to follow.

Workaround

Before clicking Save in the diagram editor, open Chrome Devtools and do a global search for xmlpng. You should see a result that's in the file dist/app.js.

Click the result (the code line). You should see a function similar to the following. Yours might have a different name.

Add scale: 2, as a new function parameter. In other words, add the line I highlighted in the screenshot above. Then copy the entire function to the clipboard. In the example above you would copy from line 5670 to line 5678, including both. Your exact line numbers may be different, follow the pattern with the { and } brackets.

Paste the modified function into the Developer Console and press enter. It's the tab next to your search results in the Developer Tools panel. You might get a warning, if you do, type allow pasting and then press enter. Paste your function one more time to apply it.

Now when you press Save in the diagram editor your image should be double the resolution. Note that when you close or reload the page, or navigate away from your wiki these changes are lost and you need to perform these steps again.

Let me know if you have any questions!