ClickHelp Documentation

Embed Diagrams

ClickHelp User Manual/Authoring/Topic Editor/Insert Tab/Embed Diagrams

In ClickHelp, you can embed diagrams into your online documentation. We support external diagramming software like draw.io, Lucidchart, and Gliffy.

Inserting draw.io Diagrams

  • Go to draw.io and open your diagram file.
  • Select the FileEmbedIFrame top menu item.
    Open the diagram file in draw.io an click the IFrame button to copy the markup
    Note
    Alternatively, you can select "SVG" as the method of embedding - the following steps would remain the same.
  • Copy the HTML snippet generated by draw.io for you.
  • In ClickHelp, open your topic for editing, and click Insert Custom HTML on the ribbon bar.
    The Custom HTML button on the Ribbon bar
  • Paste the markup copied from draw.io in the dialog and click OK.

Inserting Lucidchart Diagrams

  • Open the diagram in Lucidchart.
  • Select the FileEmbed main menu item.
    Open the diagram in Lucidchart and click embed button to copy the markup
  • Copy the HTML snippet generated by Lucidchart.
  • In ClickHelp, open your topic for editing, and click Insert Custom HTML on the ribbon.
    The Custom HTML button on the Ribbon bar
  • Paste the markup copied from Lucidchart in the dialog and click OK.

Inserting Gliffy Diagrams

  • Open your diagram in Gliffy.
  • Click the Share button.
    Open the diagram in Gliffy and click the Share button
  • Select Embed.
  • Select CUSTOM and copy the link.
    Click the Custom button in Gliffy and copy the link
  • In ClickHelp, go to the Insert tab and click Custom HTML
    The Custom HTML button on the Ribbon bar
  • Insert the link as it's shown in the screenshot and click OK.
    Insert the copied link of the diagram into the Insert HTML field