RSS

WikiTraccs Creates Images for Draw.io Pages

This post shows WikiTraccs exporting each page of a draw.io diagram as image.
By Heinrich Ulbricht |

This post builds on the last one that highlighted how WikiTraccs can create missing draw.io preview images: WikiTraccs Creates Draw.io Preview Images.

But why stop at missing draw.io preview images? Let’s apply the export logic to draw.io diagram pages as well.

How Do Diagram Pages Work in Draw.io?

Draw.io diagrams can contain multiple diagram pages which are represented as tabs at the bottom of the draw.io editor.

Here is a simple sample diagram, showing the first of three pages:

Clicking a tab will switch to the corresponding diagram page.

A draw.io macro by default shows a single diagram page, although you can cycle through the pages:

In the draw.io macro settings you can select the diagram page to show when opening the Confluence page:

When you migrate a Confluence page (that contains draw.io) to SharePoint and not all diagram pages are shown via draw.io macros, most diagram pages tended to be invisible in SharePoint.

WikiTraccs changes that.

Creating Draw.io Page Images in SharePoint

WikiTraccs can create images for all diagram pages in a draw.io diagram:

It doesn’t matter if all those diagram pages are shown on a Confluence page.

The moment a single diagram page is shown on a Confluence page, WikiTraccs will export all diagram pages as images and migrate those to SharePoint Online.

You’ll see a collapsed section labeled Page Snapshots of Draw.io ‘DIAGRAMNAME’:

Expanding this section shows all diagram pages:

As shown in above screenshot, WikiTraccs will:

  • create a section that is add after the section that contains the first draw.io diagram page
  • create an image for each of the diagram pages
  • format those images using a layout table, as SharePoint otherwise is not able to put images next to each other

Each of the exported diagram page images is stored as additional attachment of the SharePoint page. Those pages are marked with the -wt suffix.

I’m not yet satisfied with how the section looks in SharePoint. Is it at the right place? Should the section be lower in the page? How about a section background color? Should the formatting table have borders? I appreciate feedback on this matter.

Known Limitations

When there are multiple multi-page diagrams on a page, the sections in SharePoint will be generated in reverse order.