Increase resolution of Draw.io diagrams #3730

New Issue

OVERLORD · 2026-02-05T07:16:46+03:00

OVERLORD commented

2026-02-05 07:16:46 +03:00

Originally created by @vincentbernat on GitHub (Apr 3, 2023).

Describe the feature you'd like

Draw.io diagrams should be generated at double the resolution.

Describe the benefits this would bring to existing BookStack users

This will make diagrams look nicer on HiDPI devices. Currently, they look a bit blurry, notably the fonts. This may also be noticeable on regular displays.

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

Another possibility would be to render them as SVG (see #1170). As we don't need them to be interactive, they can be rendered in <img> tags (but this does not solve all the problems reported in #1170).

Have you searched for an existing open/closed issue?

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

Originally created by @vincentbernat on GitHub (Apr 3, 2023). ### Describe the feature you'd like Draw.io diagrams should be generated at double the resolution. ### Describe the benefits this would bring to existing BookStack users This will make diagrams look nicer on HiDPI devices. Currently, they look a bit blurry, notably the fonts. This may also be noticeable on regular displays. ### Can the goal of this request already be achieved via other means? Another possibility would be to render them as SVG (see #1170). As we don't need them to be interactive, they can be rendered in `<img>` tags (but this does not solve all the problems reported in #1170). ### 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_

OVERLORD added the 🔨 Feature Request ⛲ Upstream labels 2026-02-05 07:16:46 +03:00

OVERLORD closed this issue

2026-02-05 07:16:51 +03:00

OVERLORD commented

2026-02-05 07:16:54 +03:00

@vincentbernat commented on GitHub (Apr 3, 2023):

As a proof of concept, I tried this patch:

diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js
index 67ac4cc0ecb3..4b1389afa6df 100644
--- a/resources/js/services/drawio.js
+++ b/resources/js/services/drawio.js
@@ -55,7 +55,7 @@ function drawEventExport(message) {
 }
 
 function drawEventSave(message) {
-    drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'});
+    drawPostMessage({action: 'export', format: 'xmlpng', scale: 2, xml: message.xml, spin: 'Updating drawing'});
 }
 
 function drawEventInit() {
diff --git a/resources/js/wysiwyg/plugin-drawio.js b/resources/js/wysiwyg/plugin-drawio.js
index 9f4a065adf86..57fbb9629795 100644
--- a/resources/js/wysiwyg/plugin-drawio.js
+++ b/resources/js/wysiwyg/plugin-drawio.js
@@ -26,7 +26,7 @@ function showDrawingManager(mceEditor, selectedNode = null) {
                 pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
             });
         } else {
-            const imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
+            const imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}" style="with:50%;height:50%;"></div>`;
             pageEditor.insertContent(imgHTML);
         }
     }, 'drawio');

It does not work:

draw.io seems to ignore the "scale" parameter (I have looked at the source code to find it, but I am a bit unsure)
the style attribute is not applied (but maybe there is some sanitizing?)

I'll investigate more later.

@vincentbernat commented on GitHub (Apr 3, 2023): As a proof of concept, I tried this patch: ```diff diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js index 67ac4cc0ecb3..4b1389afa6df 100644 --- a/resources/js/services/drawio.js +++ b/resources/js/services/drawio.js @@ -55,7 +55,7 @@ function drawEventExport(message) { } function drawEventSave(message) { - drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'}); + drawPostMessage({action: 'export', format: 'xmlpng', scale: 2, xml: message.xml, spin: 'Updating drawing'}); } function drawEventInit() { diff --git a/resources/js/wysiwyg/plugin-drawio.js b/resources/js/wysiwyg/plugin-drawio.js index 9f4a065adf86..57fbb9629795 100644 --- a/resources/js/wysiwyg/plugin-drawio.js +++ b/resources/js/wysiwyg/plugin-drawio.js @@ -26,7 +26,7 @@ function showDrawingManager(mceEditor, selectedNode = null) { pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id); }); } else { - const imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`; + const imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}" style="with:50%;height:50%;"></div>`; pageEditor.insertContent(imgHTML); } }, 'drawio'); ``` It does not work: - draw.io seems to ignore the "scale" parameter (I have looked at the source code to find it, but I am a bit unsure) - the `style` attribute is not applied (but maybe there is some sanitizing?) I'll investigate more later.

OVERLORD commented

2026-02-05 07:17:00 +03:00

@ssddanbrown commented on GitHub (Apr 3, 2023):

Thanks @vincentbernat.
I remember having a quick play with this a while back.

Just to confirm, are you building the JS via the npm commands upon source change? The sources are not used directly.

I have it in mind that the export size change is simple (Just the scale change as you've set) but juggling the dimensions is tricky. Ideally you'd want to set actual height/width attributes on the images of the correct original (half-image-file-dimensions after 2x scale) sizes. I think width/height via styles are going to be relative the the wrapper/parent el, so not really viable. You can scale via transforms but that's really a hack, and not a direction I'd want to go since it'll have other offset affects (blurriness, portability).
Should be do-able but would require storing and/or query of image dimensions at multiple stages (Insert, Edit, Replace etc...), complicated a little further with back-compat in mind.

@ssddanbrown commented on GitHub (Apr 3, 2023): Thanks @vincentbernat. I remember having a quick play with this a while back. Just to confirm, are you building the JS via the npm commands upon source change? The sources are not used directly. I have it in mind that the export size change is simple (Just the scale change as you've set) but juggling the dimensions is tricky. Ideally you'd want to set actual height/width attributes on the images of the correct original (half-image-file-dimensions after 2x scale) sizes. I think width/height via styles are going to be relative the the wrapper/parent el, so not really viable. You can scale via transforms but that's really a hack, and not a direction I'd want to go since it'll have other offset affects (blurriness, portability). Should be do-able but would require storing and/or query of image dimensions at multiple stages (Insert, Edit, Replace etc...), complicated a little further with back-compat in mind.

OVERLORD commented

2026-02-05 07:17:04 +03:00

@vincentbernat commented on GitHub (Apr 4, 2023):

No, I didn't rebuild the JS. I'll try that.

I know that transform won't work as it will leave the space blank. This SO question contains various solutions that could be tested: https://stackoverflow.com/questions/8397049/how-can-i-resize-an-image-to-a-percentage-of-itself-with-css.

@vincentbernat commented on GitHub (Apr 4, 2023): No, I didn't rebuild the JS. I'll try that. I know that transform won't work as it will leave the space blank. This SO question contains various solutions that could be tested: https://stackoverflow.com/questions/8397049/how-can-i-resize-an-image-to-a-percentage-of-itself-with-css.

OVERLORD commented

2026-02-05 07:17:06 +03:00

@davidjgraph commented on GitHub (Apr 6, 2023):

Does bookstack have the ability to apply an XML config? If yes, we can add a config option for default PNG resolution.

@davidjgraph commented on GitHub (Apr 6, 2023): Does bookstack have the ability to apply an [XML config](https://www.diagrams.net/doc/faq/configure-diagram-editor)? If yes, we can add a config option for default PNG resolution.

OVERLORD commented

2026-02-05 07:17:13 +03:00

@ssddanbrown commented on GitHub (Apr 6, 2023):

Hi @davidjgraph 👋!

Does bookstack have the ability to apply an XML config?

I'm not sure about the XML aspect of that question.
Although I don't use the configure event specifically by default, we do already expose it for users to hook in and set their own default config where desired, so if there's an option exposed there we could make use of it.

@ssddanbrown commented on GitHub (Apr 6, 2023): Hi @davidjgraph :wave:! > Does bookstack have the ability to apply an [XML config](https://www.diagrams.net/doc/faq/configure-diagram-editor)? I'm not sure about the XML aspect of that question. Although I don't use the configure event specifically by default, we [do already expose it](https://github.com/BookStackApp/BookStack/blob/48df8725d82cac821ee935498c811509c96e63c2/resources/js/services/drawio.js#L69-L71) for users to hook in and set their own default config where desired, so if there's an option exposed there we could make use of it.

OVERLORD commented

2026-02-05 07:17:16 +03:00

@davidjgraph commented on GitHub (Apr 7, 2023):

Sorry, brainfart, I meant JSON.

Added as https://github.com/jgraph/drawio/issues/3497

@davidjgraph commented on GitHub (Apr 7, 2023): Sorry, brainfart, I meant JSON. Added as https://github.com/jgraph/drawio/issues/3497

OVERLORD commented

2026-02-05 07:17:19 +03:00

@ssddanbrown commented on GitHub (Apr 7, 2023):

Thanks @davidjgraph!

I have just tested this though, and the scale option on the export postMessage seems to work fine and as I'd expect, so not sure we'd specifically need the extra option to change the default, so please don't spend time on that on our account since it's not needed unless I've misunderstood something.

@ssddanbrown commented on GitHub (Apr 7, 2023): Thanks @davidjgraph! I have just tested this though, and the `scale` option on the `export` postMessage seems to work fine and as I'd expect, so not sure we'd specifically need the extra option to change the default, so please don't spend time on that on our account since it's not needed unless I've misunderstood something.

OVERLORD commented

2026-02-05 07:17:23 +03:00

@vincentbernat commented on GitHub (Apr 7, 2023):

FI, since my instance of BookStack was empty, I just switched from xmlpng to xmlsvg and image/png to image/svg+xml, modify extension for storing images to .svg and it works fine.

@vincentbernat commented on GitHub (Apr 7, 2023): FI, since my instance of BookStack was empty, I just switched from `xmlpng` to `xmlsvg` and `image/png` to `image/svg+xml`, modify extension for storing images to `.svg` and it works fine.

OVERLORD commented

2026-02-05 07:17:27 +03:00

@ssddanbrown commented on GitHub (Apr 11, 2023):

I realised this is already open under #3743 so I'm going to close this off as a duplicate.

@ssddanbrown commented on GitHub (Apr 11, 2023): I realised this is already open under #3743 so I'm going to close this off as a duplicate.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#3730