You can embed a diagram in a web page or in any online platform that can render HTML. While some third-party integrations can embed diagrams more efficiently (in WordPress, for example), embedding a diagram as HTML may be a good option. You can also share these HTML diagram files with others.

Note: Diagrams exported to HTML files/code are rendered in the draw.io online viewer by calling a JavaScript hosted on the our server. You’ll need a working internet connection for the diagrams to be displayed properly.

How to export a diagram as HTML

1. Click File > Export as > HTML.
   
2. There are a number of options that you can change to set how viewers will see your diagram. Once you have set the options you want, click Export.
   
3. You will be prompted to save a HTML file containing your diagram. Choose where you want to save the file.

You can now share the HTML file which contains your diagram, open it in a web browser or even look at the HTML source code (this looks very similar to the link generated when you export your diagram to a URL).

When someone views the HTML version of your diagram, they can click on the diagram and will be able to step through pages, hide or display diagram layers and open the diagram in the editor, unless you have deselected these options before exporting.

Options when exporting your diagram as HTML

• If you are using Google Drive to store your diagram, you can choose to include the Public URL of the diagram instead of making a copy of the diagram in the HTML. Otherwise this radio button will not be selectable.
• Use the Links list to select what happens when the viewer clicks on a link in your diagram. You can also change the colour of these links - click on the Border Color button and select a new link colour from the palette.
• Set the Zoom and Fit to change how your diagram is displayed in the viewer.
• All Pages is selected by default. If you don’t want to include all of the pages in your multi-page diagram, deselect this checkbox.
• Viewers will be able to turn the layers on and off by default. To stop this, deselect the Layers checkbox.
• If you want your diagram to open directly in the editor, deselect the Lightbox checkbox.

Follow us on GitHub, Twitter, Facebook.