From Whiteboard Photo to Editable Diagram with AI

Every team has one: a whiteboard photo from a design session, a screenshot of a diagram from an old slide deck, an exported PNG with no source file. It is useful, and it is stuck. Nobody can edit it, diff it or put it in a pull request. Archgram's picture-to-diagram feature reads a picture with an AI vision model and rewrites it as an editable diagram. This guide covers how to get a good result.

How to do it

1. Open the Export menu in the editor and choose Import from picture (AI)…, or drop the picture anywhere on the editor.
2. Choose the result: Mermaid (text you can diff and keep in Git), D2 (richer shapes and nesting) or Excalidraw (a hand-drawn canvas you can move around).
3. Optionally add a hint, such as "left to right" or "ignore the legend in the corner".
4. Review the draft, fix what it got wrong, and save.

The feature is part of Pro (30 pictures a month). PNG, JPEG, WebP and GIF files are accepted. Large photos are shrunk in your browser before they are sent, and Archgram does not store the picture.

Getting a better result from the same photo

• Shoot straight on. A flat, well-lit photo beats an angled one. Whiteboard glare hides marker strokes.
• Make labels legible. If you can barely read a word, the model will guess.
• One diagram per picture. Crop a photo with three sketches into three pictures.
• Prefer clean arrows. Lines that cross or end ambiguously are the most common source of wrong connections.
• Use the hint to resolve the thing a person would know from context, like reading direction or what to ignore.

Treat the result as a draft

AI reads boxes, arrows and text well, but it can misread a handwritten label or connect the wrong two boxes. That is why the result opens as editable text instead of a locked image: scan the generated code against the original once, fix the few errors, and you are done. It is usually much faster than redrawing from scratch, and the diagram is now something your team can review and keep up to date.

Your picture goes to the AI provider in use for the request: Archgram's, or your own if you added an AI key. Keep that in mind for pictures that contain sensitive information. Open the editor to try it, and see AI Features for the details.