Generate code to embed a diagram in a webpage

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.

Select File > Embed.
Click File > Embed and select HTML to export your diagram as HTML code

Embed a diagram using HTML

  1. Select File > Embed > HTML to open the HTML options dialog.
  2. Select from the following embed HTML options, then click on Create.
    • 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.
      Generate a HTML code version of your diagram
  3. Copy the generated HTML code and paste it into your webpage.
    Copy the generated HTML code

When you load the webpage in your browser, the diagram will appear with a toolbar, if you have used the default settings.
A diagram embedded using HTML

Embed a diagram using an 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.

  1. Select File > Embed > IFrame to open the IFrame options dialog.
  2. Make sure your diagram file is public:
    • Select Share, click on the Anyone with the link dropdown, then select More at the bottom of the list.
    • Select 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.
  3. 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.
    Generate a HTML code version of your diagram containing an iFrame
  4. 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.
    Copy the generated IFrame HTML code

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.
An embedded IFrame is displayed in the draw.io lightbox