User flow maker
Sketch flowcharts and user journeys — add start, process, decision and screen nodes, drag to arrange, connect with arrows, label and export to SVG or PNG.
Open User flow maker →What is the user flow maker?
A free, private diagramming tool for sketching flowcharts and user journeys in your browser. Add start, process, decision and screen nodes, drag them into place, connect them with labelled arrows, then export the result. Everything is drawn on your device, so nothing is uploaded and it keeps working offline after the first load.
How to use User flow maker
- Add a shape — Drop in start, process, decision and screen shapes for each step or screen. A new shape opens ready to name, so just type its label right on it, or leave it blank.
- Arrange the layout — Drag shapes around the canvas to position them the way you want the journey to read.
- Connect and label — Select a shape and drag from one of the blue dots on its edge onto another shape to draw an arrow, then click the arrow to label the branch.
- Export the diagram — Save your finished flow as a scalable SVG for print and editing, or as a PNG for slides and documents.
Frequently asked questions
Is my diagram uploaded anywhere?
No. The whole flow is built and rendered in your browser, so nothing you create leaves your device.
What node types can I use?
There are start, process, decision and screen nodes, so you can map both logic branches and the actual screens a user moves through.
Which export formats are available?
You can export to SVG, which stays sharp at any size and can be re-edited in vector tools, or to PNG for quick sharing in slides and docs.
How do I name a shape?
Type its label directly on the shape. A new shape opens ready to name, and you can click a selected shape (or double-click any shape) to edit it again; leave it blank for an unlabelled shape.
Can I label the connecting arrows?
Yes. You can label connections too, which is handy for naming decision branches such as Yes and No.
Tips
- Use decision nodes for branching points and label each arrow leaving them so the path is unambiguous.
- Export as SVG when you may need to tweak the diagram later or print it at a large size.
- Keep the flow reading left-to-right or top-to-bottom so the journey is easy to follow.