How do I centre a draw.io diagram in Confluence Cloud

[Corin Fairchild]

I've drawn a basic vertical flowchart using the draw.io plugin for Confluence Cloud but no matter where I position the diagram on the page in draw.io, it appears resolutely stuck to the left margin when I save and exit to Confluence.

In Confluence itself, the macro takes up the whole column width and doesn't offer an alignment button when you click on the draw.io macro diagram, only column width, edit or delete.

How do I centre the flowchart in the column on the Confluence page?

[Marija Radovic]

Hi,

Our engineers have been working on this and added the possibility to “Center“ as shown in the attached image. So please open the diagram in draw.io editor, tick “Center“ and click Save&Exit. Does it help?

Regards,

Marija

[guru]

Hi, 

I am having the same issue. How to go to the viewer settings for an drawing?

[Marija Radovic]

Hi, 

open a Confluence page where diagram was created, hover a diagram, click Edit diagram pencil (top left) and you should be able to see Viewer Settings.

If you don't see it, repeat all the steps in a different browser and Incognito mode. Also, clear the cache. Incognito mode is great for testing cause it is cache and extension free (cache and extensions can cause some problems sometimes)

If nothing helps, tell me draw.io version you are using please (can be seen under Settings > Manage apps > expand draw.io 

Thanks,

[Bruce Plannette]

As a work around, I have used a rectangle box flattened and extended along the bottom horizon to title the diagram. With the line color same as the background is keeps the diagram centered. 

[Jonathan Boccara]

I noticed a small bug but that is confusing. If you open your diagram, check Center, and publish it, it doesn't update on the Confluence page.

But if you change something on the diagram itself and publish it, then the diagram gets updated with both the fact that it's centered and whatever you just changed in the diagram.

[Marija Radovic]

If you click Edit page pen, select a diagram and click "Back to center", does it help?

Regards,

[Jonathan Boccara]

No that doesn't center the diagram. You really have to change something on the diagram itself to make it refresh.

[Marija Radovic]

@Jonathan Boccara I am not able to reproduce this. Please submit all the details (environment used, drawio version etc.) and video showing all the performed steps and the result. https://drawio.atlassian.net/servicedesk/customer/portal/14/group/15/create/49

Thanks,

[Jonathan Boccara]

Here is a screencast showing how to reproduce the issue. I'm using Chrome 103.0.5060.114 (Official Build) (x86_64). And where can I find the drawio version?

Thanks!

[Marija Radovic]

Thanks. Tested this and it looks like you are right. 

We'll investigate this. Meanwhile, please use Center in Viewer settings and tell me if it helps (it is working at my place)

Regards,

[Jonathan Boccara]

Where is the viewer settings? I can only see those buttons from the Confluence page

[Marija Radovic]

You should be able to see this settings in Confluence page view mode. From page edit view (shown in the image you attached) just click Publish top right. 

[Robbert Goudman]

Found a work around using Divbox and pasting my draw.io diagram into it.

Style for Divbox: text-align: center; background: white; border-color: white

[Mate Raspovic]

Hi @Marija Radovic - Center function only works when toolbar option is set to 'Top'. Otherwise (hidden, embedded), the center function will not have any effects when the diagram is rendered in the confluence page.

Also, there are layout bugs within Mozilla Firefox 88.0.1 version (other versions not checked, latest Google Chrome is fine), e.g.: Right border of widget not displayed, hover inconsistencies, settings box not opening options or not displaiyng properly when opened within the widget in confluence view mode.

Do you think the hidden & center bug will be fixed soon?

[Marija Radovic]

Hi,

for the first "top"report could you tell me browser version and operating system you are using, please? 

For the second, is it possible to send a video showing all the issues you reported so we could be sure we understand them completely?

Thanks,

Marija

[Mate Raspovic]

Hi @Marija Radovic ,

yeah sure!

Browser: Mozilla Firefox, 88.0.1 (64-Bit)

OS: macOS Big Sur, Version 11.3.1 (20E241)

Where should I send you the video?

Best, M

[Marija Radovic]

Great :)

You can attach it here or if you have some sensitive data, submit all the details + video here: https://drawio.atlassian.net/servicedesk/customer/portal/14/group/15/create/49

Thanks,

Marija

[Mate Raspovic]

Hi @Marija Radovic ,

here we go: https://drive.google.com/file/d/1ryqVRRcs6QnwoqKk0Sfx8MFHSklyL3Xn/view?usp=sharing

[Marija Radovic]

Hi Mate,

Sorry for the late reply. I created the issue and assigned our engineer so he could take a closer look. 

Please track it here: https://github.com/jgraph/drawio/issues/2083

Kind regards,

Marija

[Deleted user]

Does not see the center option aswell, using 9.4.8, any suggestions?

[Marija Radovic]

Hi,

If you are using draw.io for Confluence Server, click Edit page pen (top right) and you should be able to see alignment options as shown in the image bellow (marked yellow) 

Does this help? 

Kind regards,

Marija

[Chris King]

I click centre and in the edit window it's centred, but as soon as the page is published it's not!

[Marija Radovic]

Hi, 

Are you using drawio for Confluence Cloud, please? Do you have the issue in other browsers and Incognito mode?

How did you set other Viewer settings? If possible, please attach a video showing all the steps and the result. 

If you don't want details to be seen publicly here, please submit all the details here: https://drawio.atlassian.net/servicedesk/customer/portal/14/group/15/create/49 

Kind regars,

Marija