EditableImage
Draw.io XML

Turn a whiteboard photo into an editable diagram.

Shot at an angle, under a glare, in marker — the boxes come back as shapes with their arrows attached, ready to straighten up.

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 secondsProcessingImages are sent to third-party AI services. Privacy details

Signing in is free, and new accounts start with credits.

New accounts get 10 free credits.

Standard processing: 4 credits. Additional AI actions or fallback processing may cost extra, and every run is charged — including the same image twice. See credit packs and pricing.

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 a photo makes harder, and what it does not

A photograph of a board is a harder input than a screenshot and it is worth being plain about why. The lines are marker strokes rather than vectors, the board is rarely square to the camera, and there is usually a bright patch where the lights are. None of that stops the structure being read — boxes are still boxes and arrows still point somewhere.

What it does affect is the lettering. Printed capitals in a marker pen read reasonably well; joined-up handwriting does not, and this is not the tool to hand a page of cursive to. If the labels are hard for you to read in the photo, they will come back wrong.

The practical advice is dull and it works: get the whole board in frame, stand square to it, and take it before anyone stands in front of it.

What comes back

Editable result
A technical diagram of the kind this recovers as nodes, labels, and connectors shown with editable regions
ConnectorGateway → Orders
11 nodes · 12 live connectors
Draw.io XMLMove a node and its connectors stay attached

How it works

  1. 01Photograph the board with the whole diagram in frame, as square to it as you can manage.
  2. 02Shapes and connector routing are measured from the image; the labels are read by a model.
  3. 03Straighten up what needs straightening in the Draw.io canvas, then export .drawio XML.

When people reach for this

Questions

Does handwriting work?

Printed capitals in marker usually read. Joined-up handwriting usually does not. The shapes and arrows are recovered either way, so the worst case is that you retype the labels onto a structure that is already correct.

What about glare and shadows?

A bright patch tends to cost you the labels under it rather than the shapes, because the shapes are recovered from edges and the labels from contrast. Reshoot with the glare somewhere else if a section comes back blank.

Will my wonky rectangles come out straight?

They come back as real rectangles at measured positions, so yes — but the positions are where you drew them. Draw.io's align and distribute will do the rest in one pass.

Closer to what you have?