Embedding diagrams into a blog or a web page

With the Signavio Process Manager you can publish single diagrams to any website using the embedding feature. You can for example embed a diagram into a blog post or a wiki page using a HTML code-snippet. The embedded code allows the diagram to stay up-to-date as the Editor always provides you with the most recent version of the diagram.

In case you want to embed diagrams in your Microsoft SharePoint system, you can simply integrate the whole Collaboration Hub into Microsoft SharePoint using a Web Part, see Microsoft SharePoint Integration

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

To get to the embedding options, simply click Share then Embed diagram in the Explorer’s top drop-down menu.

The location of the embedding menu in the Signavio Explorer.

The location of the embedding menu in the Signavio Explorer.

If the diagram is not shared for read access yet, you will have to click Share document for read-only access to unlock the pop-up menu.

An HTML code-snippet can be retrieved in the Embedding - tab. Using this code snippet, the diagram can be embedded in other web based system as an interactive element. The snippet can simply be copied and pasted into the HTML code of the web page or blog.

Copy the code to embed the diagram into a web page.

Copy the code to embed the diagram into a web page.

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

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.

The diagram preview

You can alter the diagram’s size in the bottom left corner of the embedding configuration. To make sure that you have the correct size and aspect ratio, you can use the diagram preview.

Change the size of the displayed diagram.

Change the size of the displayed diagram.

To change the default size of an embedded diagram customize width and height here. Per default it is set to auto, so the size of the interactive element adapts to the system it is embedded in.

A zoom slider and scrollbars are added automatically.

Click Preview to check the changes. Apart from the diagram, the generated HTML code is shown in the preview:

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

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