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

Corin Fairchild March 31, 2020

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?

4 answers

3 votes
Marija Radovic
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 7, 2020

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?

 

Center.jfif

Regards,

Marija

guru April 13, 2020

Hi, 

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

Marija Radovic April 14, 2020

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,

Like # people like this
Bruce Plannette June 29, 2020

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 July 11, 2022

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 11, 2022

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

Regards,

Jonathan Boccara July 11, 2022

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

Marija Radovic
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 13, 2022

@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 July 18, 2022

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 20, 2022

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)

center png.JPG

 

Regards,

Jonathan Boccara July 20, 2022

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

Screenshot 2022-07-20 at 14.30.05.png

Marija Radovic
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 20, 2022

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. 

0 votes
Robbert Goudman November 29, 2022

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

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

0 votes
Mate Raspovic June 1, 2021

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 2, 2021

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 June 2, 2021

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 2, 2021

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

Marija Radovic
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 10, 2021

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

0 votes
Deleted user August 28, 2020

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

Marija Radovic
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 2, 2020

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

center.JPG

Chris King March 30, 2022

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

Marija Radovic
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 31, 2022

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

Suggest an answer

Log in or Sign up to answer
DEPLOYMENT TYPE
CLOUD
PRODUCT PLAN
FREE
PERMISSIONS LEVEL
Site Admin
TAGS
AUG Leaders

Atlassian Community Events