Diagram definition and image in one file with draw.io editable PNG files.

Diagrams are a great way to communicate because most people think visually. Most diagraming tools have some type of diagram file type, vsd, vsdx, dwg, emf and some type of exported graphics format used in documents, png, jpg, gif. This means there are two files for every drawing, the drawing itself and the exported image. Dual file storage and synchronization is eliminated with drawing-embedded-png files.

Some drawing tools draw.io have the ability to export an image with the drawing instructions embedded as metadata in the image. This means the PNG is both an image and a drawing. You only need to maintain one file in your document, your wiki pages, google drive, SharePoint or in your source code repository.

This video walks through how to use this create and load editable PNG drawings in draw.io

Saving the Diagram as a PNG with embedded markup

Launch draw.io 

Ccreate a diagram.

Select File --> Export the diagram as png.

Set a border width other than 0.  Bad image!

Make sure Include a copy of my diagram  is checked.  This puts the diagram editor markup inside the PNG.

Once the export is finished, you can close the export without saving the document in draw.io format. We won't be needing it because our drawing is inside the png file.

Loading the PNG with embedded diagram markup

Open draw.io and select Open Existing Diagram

Note that draw.io knows that there are several file types that can have the drawing markup.  PNG is one of them.

Select the previously saved png file.

Draw.io loads the png file as a drawing and presents the editor

At this point, all save operations will save back to the loaded p.ng image file.