Embedding diagrams as HTML code

You can embed a diagram using a HTML code snippet in a website or blog as an interactive element. The advantage of this method over a picture export is that the most current version of the diagram is always available on your page.

The following paragraph explains how to embed diagrams as an HTML code snippet into a blog or a web page like Blogger, TypePad, or WordPress.

To embed a diagram in your website or blog, proceed as follows:

  1. First, select the diagram you want to embed in the Explorer.
  2. Then select in the menu Share the Embed diagram entry. The Embed diagram dialog opens.
  3. Open the Embedding tab and then copy the HTML code snippet.
Copy the code to embed the diagram into a web page.
  1. Paste the copied snippet in the desired location of the HTML code of your page or blog posts.
  2. If the diagram is not shared for read access yet, click Share document for read-only access.
If you click Stop sharing the diagram for read-only access in the embedding menu, the diagram will not be available on the web page and on any other pages it was embedded in.
  1. Click list of supported blog and wiki systems to get an overview of supported systems.


The embedded diagram does not allow navigation to linked diagrams or linked documents. If you need the viewers to be able to navigate to linked diagrams and documents, please use Collaboration Hub.

The diagram preview

To embed your diagram optimally in your website, you have to option to alter the diagram’s size and then to check size and aspect ration in a preview.

  1. Specify the desired Width and Height. By default, it is set to auto, so the size of the interactive element adapts to the system it is embedded in.
  2. Click Preview to check the changes.
Open the preview.

In the preview of the generated HTML code is displayed in addition to the interactive element. A zoom slider and scrollbars are added automatically.

The preview allows you to check the diagram before embedding it.