Embed diagrams in WordPress as SVG

diagrams.net 02 Sep 2021

Share:

You can embed SVG versions of your diagrams in a WordPress blog post or page. SVG images are quick to load when compared to other formats, and can include your diagram data if you want to allow viewers to download and view a copy of the diagram in the diagrams.net free editor.

SVG versions of a diagram can only display one page, although the exported SVG file can contain all the diagram data for all pages in your diagram. When you click on an embedded SVG in WordPress, by default, you’ll open the diagram in the diagrams.net lightbox viewer, and be able to see all the links, tooltips, diagram and layers in your diagram.

Embed an SVG diagram in WordPress

  1. Select File > Embed > SVG.
  2. Select the options for the exported SVG file:
    • Fit: Adjusts the diagram to fill the available width of the page or container.
    • Shadow: Adds a drop shadow to the diagram.
    • Image: Creates an image that contains SVG markup.
    • Lightbox: Opens the diagram in a new tab or using the diagrams.net lightbox.
      • Edit: By default, diagrams.net will make a copy of the diagram when someone clicks on the Edit button in the lightbox. Change this setting if you want to send them to a specific URL.
      • Layers: Allow viewers to show or hide individual layers in the lightbox.
        Options available when you export your diagram to embeddable SVG markup
  3. Click Embed.
  4. The SVG markup will be displayed in the following dialog, already selected. Click Copy,
    Copy the embeddable SVG markup
  5. When editing a post or page in WordPress, switch to text (HTML) input and paste the SVG markup you copied in the previous step.
    Paste the SVG markup into the text or HTML view of your WordPress page or blog post
  6. Publish your page. Now, when someone clicks on the diagram, it will open in the diagrams.net lightbox or editor according to the settings you selected.
    When viewers click on the embedded SVG in your WordPress page, they will be taken to the diagrams.net lightbox or editor

Troubleshooting a broken diagram in WordPress

WordPress does not support SVG images with foreign objects, like the HTML text formatting options that you can use on labels.

Shapes (vertices) can use word wrap, and both shapes and connectors can use text formatting by using HTML tags. Both of these must be disabled before you embed your SVG diagram in WordPress.

For example, with both word wrap and text formatting enabled, the diagram above is broken when embedded as an SVG in WordPress.
Make sure you disable word wrap and text formatting to get a clean SVG

Disable text formatting:

  1. When editing your diagram in diagrams.net, right click on a blank spot on the drawing canvas and choose Select All from the context menu to select everything in your diagram.
  2. In the format panel on the right, select the Text tab, and disable the Formatted Text checkbox.

Disable word wrap:

  1. Right click on a blank area on the drawing canvas and choose Select Vertices from the context menu to select all shapes.
  2. In the format panel on the right, select the Text tab, and disable the Word Wrap checkbox.
    Disable word wrap and formatted text when you export or embed your diagram as an SVG image

Follow us on GitHub, Twitter, Facebook, Discord.

Share: