Skip to content

draw.io

draw.io makes diagrams that show how steps, decisions and systems connect.

Visit draw.io

What is worth mapping before you build?

Use boxes for steps and arrows for what happens next. For an order, draw the moment a customer submits it, the stock check and the point where your app confirms the order. Label the branches for in stock and out of stock.

A diagram can tell someone where to ask a question, who handles a failed step and what needs to be saved. It records the flow you intend to build. The arrows do not make those steps happen in your app.

Where does an editable draw.io file live?

Choose the storage location before relying on the file. The free browser editor at app.diagrams.net can save on your device, in your browser or in a supported cloud account. A cloud location may ask you to authorize access.

A browser-saved copy is tied to that browser’s stored data. Keep a separate .drawio source file if you will need to reopen the work elsewhere. The free desktop editor can work offline and saves to a local path. A folder your computer syncs can still copy that file to a cloud account.

How can you check a process map before sharing it?

Draw one fictional order on paper and give someone the job of following it. Use invented names and orders. Leave the editor and cloud accounts closed.

  1. Draw the step that can fail
    Start with Place order and draw a branch where the item is sold out. Ask the reader where they would go to see what happened.
  2. Choose what needs editing
    Mark the source drawing for the person who maintains the process. Mark a separate picture for the person who only needs to see the customer-facing flow.
  3. Check what the picture could carry
    Imagine your source contains a second page with staff notes. Write that the review image should contain only the intended page and no embedded diagram data. Remove private material from the copy before exporting it.

When can a picture contain your original drawing?

draw.io can include editable diagram data inside a PNG or SVG. The vendor shows that reopening an image with that data can reveal more than one diagram page. Turn off the option to include a copy of the diagram when you want a picture without the source.

Keep the .drawio file for later edits. For a view-only handoff, make a clean copy with the intended content, export the picture and inspect the result before sharing. A plain image can still be copied or annotated. The export option controls whether the editable diagram data travels with it.