Selecting File -> Embed brings up the following sub-menu.



 

You can easily save your diagram as an image or a SVG file, which you can embed in your website. Or you can embed HTML or an IFrame into your web page as described below.


HTML


Select File > Embed > HTML to open the HTML options dialog.


 

You can select from the following options: 

  • Include a copy of your diagram in the HTML or use the public link to your original diagram file. 
  • Choose whether you want Links to open in the current window or in a new window.
  • Choose whether to zoom in or out.
  • Select you want to include all pages and/or layers.
  • If you want to display the diagram in a lightbox, choose what should happen when a user clicks on the edit icon. 

When you've finished setting the options, click on Create. 


Copy this HTML code and paste it into your webpage. When you load the webpage in your browser, the diagram will appear with a toolbar, if you have used the default settings. 


 

IFrame


An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. This means that your diagram file must be stored as a public file - for example on Google Drive.


Click File > Embed > IFrame to open the IFrame options dialog.


Make sure your diagram file is public:

  1. Click Share, click on the Anyone with the link dropdown, then click More at the bottom of the list. 
  2. Click the top radio button so that the file is available as Public on the web, then click Save and Done to return to the IFrame options dialog.

Set the options you want to use within the IFrame. They are similar to the HTML options described above. Once you are done, click Create. draw.io will generate the HTML code that contains the IFrame.


Copy this HTML code containing the IFrame, and paste it into your web page. IFrames use the draw.io lightbox and centre the diagram in the page. If you have used the default settings, a toolbar will appear at the bottom of your diagram when you hover over the HTML page.

 

 

Google Docs


Embedding a diagram into a Google Document, Slide or Sheet requires an add-on.  


If you haven't installed the add-on before, while editing a Google Doc, click Add-ons > Get Add-ons. Search for diagrams and click on draw.io Diagrams for Docs in the G Suite Marketplace. Click the Install button in the top right hand corner to install the draw.io Diagrams for Google Docs add-on.  



First, you will need to grant permission for the add-on to access and save diagrams in your Google Drive, and interact with your Google Docs. Follow the prompts and click Allow.


 

This sequence only needs to be done once, when you first install the draw.io Diagrams for Docs add-on.


To add a diagram that you have previously saved in your Google Drive to a Google Doc, click Add-ons > draw.io Diagrams for Docs > Insert Diagrams.



Select the diagram you want to insert, then click Select. You can select multiple diagrams by holding down the Shift key as you select each diagram.



Select which pages from the diagram(s) you wish to display in your Google Doc, then click Insert.



 

Google Sites


It's easy to embed diagrams into both the new and the classic version of Google Sites. 


The current version of Google Sites allows you to edit the HTML of your web pages. That makes it easy to embed a draw.io diagram as HTML as described above.


In the draw.io editor, select File > Embed > HTML to open the HTML options dialog. Select the options you want to use, then click Create. Copy the HTML code that draw.io generates. 


Edit your Google Sites web page, then click on the <embed> tool on the right hand side.


In the Embed from web dialog, click on the Embed code tab, then paste in the HTML generated by draw.io. Click Next.


You'll see a preview of your diagram. Click Insert to add the diagram to your web page.


You can resize your diagram in the Google Sites editor just like a normal image - grab and drag the square handles around the edge of your selected diagram. When you are finished formatting and adding content to your page, click Publish.



If you are using the classic version of Google sites, you will need to embed an IFrame, as described in the section above.


Click File > Embed > IFrame to open the IFrame options dialog. Set the options you want to use within the IFrame and click Create. Copy the HTML code that contains the IFrame.


Edit a web page in your classic Google Site. Click on the <HTML> tool in the toolbar above the editor.


Paste the HTML code that contains the IFrame into the HTML tab of the Google Sites, Edit HTML dialog and click Update.


The classic Google Sites editor will show you that a Google Gadget containing an IFrame has been added to the page. Unfortunately, you won't be able to see a preview of the diagram until you save the page. Click Save in the top right above the editor to publish your page.


Now, your diagram will be displayed in your classic Google Site using the draw.io lightbox (if you used the default options when generating the IFrame code in draw.io).