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


 

There are two sets of options here: HTML and IFrame allow you to embed a diagram into a web page.  Google Sites and Google Docs allow you to embed a diagram into a shared Google document.


HTML


If you have a diagram open, selecting File -> Embed -> HTML brings up the following menu.

 

 

In the top window is the HTML code needed to generate the diagram. This needs to be copied and then pasted into the source code of the web page that will contain the diagram.  Note the code in second window - this must be copied and pasted into the same source code file.  Once both pieces of code have been added, save the source file, and view the new page using a web browser to check that the file can be seen.  It is possible to see how the diagram will appear in the web page by selecting Preview.


A number of options for formatting the diagram are provided in this menu.  Options such as scrollbars and zoom are also available by ticking the relevant check boxes.  The code in the first window will change as these options are ticked or unticked. 


Below is the source code for a simple web page, with the above code pasted in.  Note that word wrap is not activated in the text editor, so the pasted code from the 1st window continues beyond the edge of the page.


 

When we open this file in a web browser, the result is this:

 

 

IFrame


An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.

If you have a diagram open, selecting File -> Embed -> IFrame brings up the following menu.

 

 

The principle is similar to embedding HTML.  The menu above provides the code that must be copied and then pasted into the host HTML source file.  When embedding IFrame there is only one piece of code to be pasted - the one linking to the diagram.  Because we are linking to an eixsting external HTML document, there are fewer options to customise the way it is displayed.

Below is the source code for a simple web page, with the above code pasted in.

 

 

When we open this file in a web browser, we first need to authorize the app in Google Drive, since we are linking to a Google Drive file.

 

 

Once we have clicked authorize, the result is this:

 

 

Google Docs

 

If you haven't embedded a draw.io diagram in Google Docs before, you will be taken to the draw.io add-on page at the Google Webstore.

 

 

Click the + Free button in the top right hand corner to install the draw.io add-on for Google Docs.  First it is necessary to give Draw.io Diagrams permission to run.

 

 

Click Continue to see the specific permissions that Draw.io Diagrams needs.

 


Click Accept to continue.  This sequence only needs to be done once, when you first install the Draw.io diagrams add-on.

A new Google Docs document will now open in a new tab.  In order to embed a diagram in this document, select Add-ons -> Draw.ioDiagrams -> Insert Diagrams

 

 

This will bring up the Google Docs file browser.  Click the diagram that you want to embed, followed by Select.

 

The diagram will now appear in the document.

 

 

Google Sites


It is possible to embed a diagram within a page hosted on Google Sites.  This is useful for collaborative work.

Open the diagram that you wish to embed.  Select File -> Embed -> Google Sites.

 

 

A menu now appears.  The URL within the Google Gadget field at the top of the menu needs to be copied, so that it can pasted into the Google Sites page later.

There are also a number of options which determine how the embedded diagram will apear, as well as which editing and viewing options will available to anyone with access to the page.

If the diagram has a public URL associated with it, this should be pasted into the Public URL of the diagram field; this should be done before copying the Google Gadget URL.

We have ticked the Edit tick box from the options at the bottom.  This will allow us to edit the diagram even after it has been embedded.

 

 

The menu only has a Close option at the very bottom.  The purpose of this menu is to generate the URL needed to embed the file, so once we are satisfied with our chosen settings, and the URL has been copied to the clipboard, we can click on Close.

Now we log onto Google Sites, and choose the site page that we want to host the diagram.  Then we select Insert -> More gadgets.

 


A menu appears to add a gadget to our page.  We select Add gadget by URL on the left hand side of the page.

 

 

Another menu appears, and now we need to paste our URL into the Add gadget by URL field.  Then click Add.

 

 

The final menu allows customization of display options.  Having adjusted these settings as necessary, we click OK.

 

 

The menu disappears, and we are returned to the Google Sites page, with the diagram now embedded.  Click Save in the top right hand corner to save the changes.

 


The diagram is now embedded within the page.