Many of our customers use draw.io, a popular web-based tool for drawing diagrams. It comes built-in with certain commercial wikis and text editors. You can get it as an Electron desktop application and save resulting diagrams as XML files.
Those of you who checked your draw.io files into a Git repository might have noticed a problem. With compression enabled, the XML files that the diagramming tool produces are often a thin envelope around a binary blob. This is opaque to Git’s text-based diff algorithms and prevents us from quickly telling what has changed between two revisions of a diagram. Having failed to find a good text-based solution, we’ve decided to present differences graphically.
The solution involves
compare from the ImageMagick suite and requires you to have draw.io installed locally.
Scripts below assume macOS, but porting them to other systems shouldn’t pose a challenge.
Let’s consider file
We want to visualise how it changed between revisions
We start by pulling the XML blobs out of the Git repository. Let’s use a temporary directory for all the files we create.
Now we use draw.io to turn XML files into PNG images.
Then we invoke
compare to render the difference.
diff—might return a non-zero code to signal that input files aren’t identical.
We ignore that by conditionally invoking
We now can open all three files: both rendered diagrams and the difference between them.
There’s a lot that we could improve here. We could account for the viewport of the input files changing. We could blur the diff and overlay it on top of the source files. We could create a web-based viewer with a slider. We could take an entirely different approach, decompress the binary blob, pretty print it, and compare it textually. But what we have is more than enough for our purposes.
We hope this helps.