Editing File Metadata

A draw.io diagram can be represented using XML metadata, and it is possible to view and edit the metadata file associated with a diagram.  Open a diagram file, and then select Extras -> Edit file.  A screen will appear showing the XML metadata.

Below we see a simple diagram, containing a single rectangle, and the associated metadata file.




We could decide to add an extra rectangle to our diagram, positioned below the first one, in which case we can cut and paste the code for the first rectangle (see highlighted code below), assigned a new unique ID number, alter the y coordinate, and then click OK (note that the adjacent drop down menu defaults to Replace existing drawing, which is what we want in this case).




Sure enough, our diagram now contains two rectangles.

The drop down menu has another couple of options.  You could select Open in new window if you don't want to change the original diagram.

There is also Add to existing drawing, which functions in a similar way to File -> Import from (explained in How to import files).  To use this option, you must first delete the existing metadata from the window, and then copy in metadata corresponding to a different draw.io diagram.  Then select Add to existing drawing, and click OK.  This will add the elements associated with the metadata from the other diagram, whilst also retaining the ones in your existing diagram.


Editing Element Metadata

There are a number of options in the Edit menu which allow you to edit aspects of an element's metadata.  If we select one of the rectangles in the above diagram, we have access to three options: Edit metadata, Edit tooltip, and Edit Style.

Edit Style

This provides the same function as the Edit Style button on the Style tab of the Format Panel.  To learn more about styles, and how to edit the associated metadata, read the user manual entry on How to customize shapes.

Edit Tooltip

Tooltips are introduced in How do I use the draw.io environment.  You can edit a tooltip to an element by selecting the element, and then selecting Edit -> Edit tooltip, which brings up the following screen:


You can type your tooltip into the field provided, and press Apply.  If we then hover our mouse, oever the shape, we see our tooltip appear.


Edit Metadata

You can edit the metadata of a particular element by selecting the element, and then selecting Edit -> Edit metadata, which brings up the following screen:

Here, we are looking at the metadata for our rectangle from the previous example.  We can see that there is a metadata property associated with the tooltip that we added.  We can edit this entry, or delete it by clicking their cross to the right of the field.

We can add further metadata properties by entering a property name into the field, and clicking Add property.  Below we have added a new property called WebLink.


A new field is now available to us, and we can add whatever information we see fit (perhaps a URL in this case).

Press Apply to save the new metadata, or Cancel to return to the main work area without saving.