EditableImage
Draw.io XML

Recover a diagram as nodes, labels, and connectors.

The shapes come back attached to their arrows, so you can drag a box and the lines follow it — then keep working in the Draw.io editor you already know.

Original remains untouchedReview before export
Drop, paste, or choose an imagePNG, JPG, or WebP · up to 20 MB · Ctrl/⌘ V works anywhere on this page
Best withFlowcharts, architecture diagrams, and clean whiteboard exportsProcessing timeUsually 30–75 secondsPrivacyPrivate processing · source stays unchanged

Image to Draw.ioDraw.io XML

  1. Upload the diagram image.
  2. Nodes, labels, and connectors are recovered, with each arrow attached to the shapes it joins.
  3. Edit in the embedded Draw.io canvas and export .drawio XML.

What comes back

Editable result
A technical diagram of the kind this recovers as nodes, labels, and connectors shown with editable regions
ConnectorAttached to 2 nodes
7 nodes · 8 live connectors
Draw.io XMLMove a node and its connectors stay attached

How it works

  1. 01Upload the diagram image.
  2. 02Nodes, labels, and connectors are recovered, with each arrow attached to the shapes it joins.
  3. 03Edit in the embedded Draw.io canvas and export .drawio XML.

What people bring here

Questions

Which editor does it open in?

The real Draw.io editor, embedded on the page. Styling, alignment, and grouping all work as they normally do.

Are the arrows connected to the boxes?

Where the recovery could tell which shapes an arrow joins, yes — the connector is bound to them, so moving a node reroutes the line.

What can I do with the export?

It is standard .drawio XML. Open it in Draw.io, diagrams.net, or any tool that reads mxGraph files.