Publish Link and Embed HTML

About the Author:

2017-08-30T12:58:45+00:00 March 2nd, 2017|draw.io, Tutorial|

Draw.io has added support for publishing diagrams as links and to create HTML that you can use to embed your diagram in a webpage, WordPress blog post, or in an intranet that supports HTML.

This makes it easy to share diagrams with friends and colleagues if you are not using draw.io within Confluence, publish them on a website, or simply link to them from forum posts, social media, or email.

Publish as a link

There are two options for publishing to a link. Export → URL encodes the diagram data directly in the URL, whereas Publish → Link simply links to the diagram (where available), and falls back to encoding the diagram data in a link when then diagram is not publicly accessible.

Click File → Publish → Link

If you are using Google Drive to store your diagram, you should share the diagram before publishing it as a link. draw.io will prompt you to do this – simply click Share.

draw.io Publish Link dialog

Note: The option to Share your diagram will not be displayed if your diagram is stored on Dropbox, GitHub, or other services.

You can change the color of any links within your diagram, and how they behave by changing their settings, as indicated above. Links can be opened in a new window or in the same window as the diagram.

It is best to leave Lightbox selected when you want to simply display the diagram – if you uncheck this, the person who follows your link will open the diagram within draw.io and can edit it.

Click Create, and a dialog with the link is displayed.

draw.io published as a link from Google Drive

A draw.io diagram published as a link from Google Drive.

draw.io - publish to a link from DropBox

A diagram published as a link from DropBox – the diagram data is encoded in the link.

Tip: When you publish a link, you can turn complex and static relationship diagrams into an interactive diagrams easily with this hidden feature. This is fantastic for on-boarding new employees, exploring complex infrastructure relationships and more.

Generate HTML to embed a diagram

When you want to embed your diagram in a webpage, you need to create the HTML which you can then copy and paste into your file or WordPress blog post.

Note: Embedding a draw.io diagram in a WordPress blog post can be done in several ways – HTML is the slowest of the options.

Click File → Embed → HTML

draw.io - embed HTML

You have the same options for choosing how to display link in the lower half of the dialog as when you publish as a link, as well as choosing to embed just the current page or all pages from multi-page diagrams, and specifying the size of the diagram(s) with Zoom and Fit.

Click Create to display the HTML code which you can then copy and paste into your webpage.

You can also store this HTML snippet as a text file – click Download to save it to Google Drive, GitHub, DropBox or OneDrive.

draw.io - HTML to embed a diagram in your webpage

draw.io – HTML to embed a diagram in your webpage.

 

Leave A Comment