Embed a diagram on Google Sites

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

Embed a diagram in the new 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 diagram as HTML.

  1. In the draw.io editor, select File > Embed > HTML to open the HTML options dialog.
    Click File > Embed and select HTML to export your diagram as HTML code
  2. Select the options you want to use, then click Create.
    Generate a HTML code version of your diagram
  3. Copy the HTML code that is generated.
    Copy the generated HTML code
  4. Edit your Google Sites web page, then click on the <embed> tool on the right hand side.
    Click on the Google Sites embed tool
  5. In the Embed from web dialog, click on the Embed code tab, then paste in the generated HTML. Click Next.
    Paste in your HTML code
  6. You’ll see a preview of your diagram. Click Insert to add the diagram to your web page.
    Check the preview and insert the diagram into your Google Site
  7. 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.
    Work with an embedded diagram in Google Sites just like an image

Embed a diagram in the classic Google sites

If you are using the classic version of Google sites, you will need to embed an IFrame.

  1. Click File > Embed > IFrame to open the IFrame options dialog.
    Click File > Embed and select IFrame to export your diagram as HTML code containing an IFrame
  2. Set the options you want to use within the IFrame and click Create.
    Generate a HTML code version of your diagram containing an iFrame
  3. Copy the HTML code that contains the IFrame.
    Copy the generated IFrame HTML code
  4. Edit a web page in your classic Google Site. Click on the <HTML> tool in the toolbar above the editor.
    Click on the insert HTML tool in the toolbar in Google Sites
  5. Paste the HTML code that contains the IFrame into the HTML tab of the Google Sites, Edit HTML dialog and click Update.
    Paste in your HTML code containing your IFrame
  6. 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.
  7. Now, your diagram will be displayed in your classic Google Site using the diagram lightbox (if you used the default options when generating the IFrame HTML code).
    Diagrams can be embedded in classic Google Sites as IFrames