Editable PNG Diagrams with draw.io

By -

Introduction

 

draw.io (also known as diagrams.net) is a popular tool for creating diagrams. An indispensable addition to any developer's toolbox, draw.io offers a range of features that make diagram creation easy and efficient. 

Embedding Diagram Data in PNG Files

One of the useful features of draw.io is the ability to export diagrams as PNG - Portable Network Graphics format, including the diagram itself in the image. 

 This approach offers several benefits:

  • No Need to Maintain Two Files: You don't need to keep separate files for the diagram and the exported image.
  • Easy Export: The diagram can be exported and shared easily while retaining its editability.
  • Streamlined Source Control: Save the image file directly to source control without needing to export it each time.

We aim to simplify the management of the diagram files; the PNG can be directly published without 

having to be converted first, and can be also  be edited directly in draw.io.

How to Use This Feature

For convenience, we apply naming convention to save the file with the .drawio.png extension. This can be easily recognized and indicates that the file can be edited directly as a diagram. Others can open this as a normal image file.

Step-by-Step Guide

1. Open Your Diagram in draw.io

  • Open your diagram in draw.io or diagrams.net.

2. Save the Diagram as a PNG

  • Select File > Save As from the menu.
  • Choose Editable Bitmap Image (.png) from the drop-down list next to the file name.
  • Click on the location where you want to save the PNG image file.

3. Export the Diagram as a PNG with Embedded Data

  • Select File > Export As > PNG.

  • In the export options, make sure the checkbox for Include a copy of my diagram is enabled. If you want to include all pages of your diagram, enable the All Pages option as well.
  • Save the file with the .drawio.png extension for easy identification and editing.





Supported File Formats

The file formats that support embedding metadata are:

  • PNG
  • PDF
  • SVG

Other formats do not support embedding metadata.

Conclusion

Embedding diagram data in PNG files is a powerful feature of draw.io that enhances the flexibility and usability of your diagrams. By following the steps outlined above, you can easily save and share your diagrams in a format that is both viewable and editable.



Comments

Post a Comment

Popular posts from this blog

Scaling up Business Applications - Lessons Learned

By -
In my daily work I am often busy with migration of the legacy Line of Business applications to modern solutions using new architectures, latest technologies. I am always interested to find out more over the challenges there, the approach, results, and – most importantly – the lessons learned. That is one of the reasons I found it beneficial last week to attend a meeting for our .NET group From a Monolith to a Scalable Application , by Marc Gerritsen. The presentation was about a project of migrating an existing financial application that manages health insurers declarations. I had there a few questions for myself and I was specially interested in the 'how' part of their solution: How did you implement scaling? What was your approach? What pitfalls did you encounter? Vertical scaling Vertical scaling, by adding more computing resources to your application was implemented by extending the database new servers with more memory and new CPUs. There was also more which ...
Read more