Manually edit the XML source of your draw.io diagram

The shapes, connectors, styles, and metadata in your diagram, and even which shape libraries are currently displayed, are all described in XML code. In draw.io, you can view the XML source of each page in a multi-page diagram, and edit it directly.

Tip: Review how to define a new custom shape, to see how the shapes in your diagram are defined in XML.

Edit the diagram source code

  1. Select Extras > Edit Diagram from the draw.io menu to see the XML source of your diagram, which starts and ends with the <mxGraphModel> tags.
    Click Extras > Edit Diagram to view the XML source of your diagram
  2. Edit the diagram source to add or remove elements in your diagram, restyle shapes and connectors, modify layers, edit shape metadata, set global diagram options, and more. You may find it easier to copy all of the XML code into an appropriate editor with contextual highlighting.
    Click Extras > Edit Diagram to view the XML source of your diagram
  3. When you have finished, select how you want the changes to be saved from the drop-down list: Replace existing drawing, or Open in New Window, or Add to Existing Drawing (similar to how you would import a diagram).
    Select how you want to save the changes you have made to the diagram's XML source code
  4. Click OK to save your changes (or Cancel to return to the editor without saving the changes).