Embedding an existing Draw.io diagram into Confluence

[Shawn in Van]

I recently inherited a Confluence Cloud project and having little previous exposure to Confluence, I am not enjoying this experience.

At this point, I am uncertain is it's my ignorance of the tool and/or Confluence (and its macros) are very buggy. Please help me to love Confluence because I expect to have a long relationship with this tool. :)

This morning, I began working on a large document, transferring my draft work from Google Docs (which I know well) into Confluence. I needed to embed a Draw.io drawing into Confluence and after about ten minutes of experimenting (it's not intuitive!), I got it to work. Here are the required steps to embed an existing drawing, please tell me if I am doing this correctly:

1. Insert Draw.io macro.
2. Click Create blank diagram (inexplicably, there is no choice to select existing??).
3. Select File > Import from > Device.
4. Select from my Google Drive Sync folder the drawing (in HTML format).
5. Click Open
6. Click File > Save (inexplicably, I need to save as a new document??).
7. Drawing is inserted into the Confluence document but it is severely vertically compressed (squished). It's not an important issue because the drawing appears normal after the document is publish but it doesn't inspire confidence in Confluence.

Observations and Questions

1. There must be a better way to embed exisiting Draw.io diagrams into Confluence? It's really annoying and somewhat time wasting that I must start with a blank drawing in order to insert an existing drawing.
2. Why must I create a new copy of my drawings? Where is the new copy stored? Since many of my drawings are used in and out of Confluence, I am not at all comfortable that they are only accessible from Confluence. I would rather that the source files are kept in a more accessible Google Drive, which syncs to my local storage.
3. It would be easier to insert an image but one of my requirements is to employ embedding for easier future edits. Like we did with Google Docs; Draw.io embedding works perfectly with Google Docs.

Thank you. :)

[David Benson]

I would suggest to use https://marketplace.atlassian.com/plugins/com.mxgraph.confluence.plugins.driveconnector/cloud/overview. It embeds files from Google Drive in your Confluence pages, including draw.io diagrams.

[David Benson _draw_io_]

For server https://marketplace.atlassian.com/apps/1216484/google-drive-docs-for-confluence?hosting=server&tab=overview supports embedding draw.io diagrams.

[Davin Studer]

My experience with Draw.io is on the server version of Confluence and not the cloud version, but I do see recent Draw.io diagrams when I add the Draw.io macro.

However, what it sounds to me like what is happening is that you were using Draw.io with Google Docs and those diagrams would not show up in Confluence as the systems are not connected in any way. You could export the diagram from Google Docs and then import it into Confluence.

As for point 7 above the reason it looks squished is when you hit save in the Draw.io macro what happens it is creates a couple attachments to your confluence page. One attachment is a rendered image view of the diagram which is what you see in page edit mode. That is why it looks squished ... because it is resing the rendered image file. The other attachment is the vector version of the diagram and that is what is accessed when you view the Confluence page. When you view the page it should always look correct. As far as it not inspiring confidence in Confluence Draw.io is not made by Atlassian. It is an add-on by a third party and should not reflect upon the capabilities of Confluence.

[David Benson _draw_io_]

@Marta Lopez Reyes _UOC_maybe you could open a new thread and link to that please?

[Marta Lopez Reyes _UOC_]

Opsss it doesn't work for me with  draw.io diagrams! :(

[shehzad.iqbal]

Hi,

This is only for the cloud version. Do you suggest any alternative for the server version?

Regards.

[Dario Sumano]

Thanks for the article!