How do I set relative scaling for draw.io plugin diagrams: fluent resizing without scrollbars

[Stan Ry]

Howdy,

I'd like my draw.io diagrams to scale relative to window size much like inserted images scale if I set relative width for them.

Does anyone know if it's possible to implement?

For example, I can configure a 98 percent scaling for inserted images by setting width attribute, like so:

 <p>
 <ac:image ac:align="center" ac:border="true" ac:width="98%">
 <ri:attachment ri:filename="image.jpg"/>
 </ac:image>
 </p>

This allows the image to scale if my users change the width of browser window or drag the hierarchy sidebar.

However, for a draw.io diagram I can only set fixed size properties:

 <p style="text-align: center;">
 <ac:structured-macro ac:macro-id="dbfae15b-0814-495f-9a34-c408f39ab113" ac:name="drawio" ac:schema-version="1">
 <ac:parameter ac:name="border">true</ac:parameter>
 <ac:parameter ac:name="viewerToolbar">true</ac:parameter>
 <ac:parameter ac:name="fitWindow">false</ac:parameter>
 <ac:parameter ac:name="diagramName">Some diagram</ac:parameter>
 <ac:parameter ac:name="simpleViewer">false</ac:parameter>
 <ac:parameter ac:name="width">600</ac:parameter>
 <ac:parameter ac:name="links">auto</ac:parameter>
 <ac:parameter ac:name="tbstyle">top</ac:parameter>
 <ac:parameter ac:name="diagramDisplayName"/>
 <ac:parameter ac:name="lbox">true</ac:parameter>
 <ac:parameter ac:name="diagramWidth">2197</ac:parameter>
 <ac:parameter ac:name="revision">2</ac:parameter>
 <ac:parameter ac:name=""/>
 </ac:structured-macro>
 </p>

This has a major flaw: the draw.io diagram doesn't scale to resizing. If you drag the sidebar, diagram would not rescale. Instead, browser would draw scrollbars.

Is there any way to force fluent rescaling for diagrams?

Thank you.

[Stan Ry · Accepted solution]

Okay then. I seem to have to found the solution.

To let the draw.io diagram scale to the resized browser window, do the following:

1. Turn off draw.io toolbar and set scaling factor. That's the toolbar that pops up when you hover the pointer over the diagram. This will allow the browser to scale to the width or height of the PNG image that lays over the diagram. Otherwise, browser attempts to scale to the size of this toolbar.

2. Set relative percentage for the diagram. This will actually enable resizing of the layered diagram image.

Turning off draw.io toolbar and setting scaling factor

1. Open the page with embedded draw,io diagram for editing.
2. Click the diagram, and then, in the appeared toolbar, click Edit Macro.
3. Draw.io Macro Settings window opens where you can configure how to diagram is diaplayed on the page.
4. In the Toolbar drop-down list select Hidden,
5.  This will stop the toolbar from appearing when you hover your mouse over the diagram.
6. In the Width field type '99' (without quotes).
7. This will pre-configure the diagram for adaptive sizing.
8. Click Save.

Setting relative percentage for the diagram

To complete this, you will need Confluence Source Editor macro.

1. In the editing view, open Confluence Source Editor.
2. In the Source Editor window, find 'ac:name="drawio"' (without quotes). This tag specifies the beginning of draw.io macro settings for a specific diagram.
3. Inside the draw.io block locate <ac:structured-macro/> tag, and then find the <ac:parameter ac:name="width"> tag inside. This will contain 99px.
4. Now change px to % so that the width property contains 99%.
5. Click Save.

When you complete these steps, your draw.io diagrams will scale to the resized browser window.

Drawback

The only drawback I have found: canvas. It seems that whenever there is draw.io toolbar enabled, macro automatically cuts out extra parts of diagram canvas to that unused white canvas does not draw on the page.

However, when you turn toolbar off, you disable this automatic cut off. If your diagram is not high enough to fill the standard canvas drawn by draw.io macro, you will see a significant white space after the diagram after you disable showing of the toolbar. As an effect, if a new heading follows the diagram, it will look as if you have added extra space before the heading, which kind of messes up the whole picture. Not really cool, but, I am hoping for a better future. Love the macro.

[David Benson _draw_io_]

Is this on cloud or server?

[Stan Ry]

@David Benson _draw_io_

Hi David,

It's a local server instance.