Design tool
Whiteboard Flowchart Maker
Draw flowcharts on an infinite whiteboard with shapes, sticky notes, a freehand pen and connectors that follow shapes. Export PNG, SVG or JSON. Private.
Free, no sign-up. Runs in your browser; nothing is uploaded.
Pan: hand tool, hold Space or middle mouse. Zoom: mouse wheel, pinch or the buttons. Hover a shape and drag from a blue dot to draw an arrow. Shift-click adds to the selection, drag empty space to box-select. Arrow keys nudge.
19 elements, 0 selected
Style
Select something to change its colours, text and style. Double-click a shape to edit its text.
File
Everything stays in this browser. PNG and SVG exports use a light background and are cropped to your drawing.
How to use the whiteboard flowchart maker
Think on a canvas that never runs out
A flowchart is the quickest way to find the hole in a process. This whiteboard gives you an infinite canvas with the shapes you need for that and nothing that gets in the way. It opens with an order fulfilment flow so you can see how the pieces fit, then you can edit it or clear it and start your own.
Drawing
- Pick a tool. Rectangle, ellipse and diamond cover process steps, start and end points, and decisions. Text adds a free label and Sticky note adds a coloured note. Click to drop a shape at the default size, or drag to size it.
- Connect them. Hover a shape and drag from a blue dot to another shape. The arrow snaps to the nearest side of the target and follows both shapes when you move them. Choose orthogonal elbows or straight lines, add arrowheads at either end, and give an arrow a label such as Yes or No.
- Write. Double-click anything to edit its text. Shapes keep their text centred and wrap it to fit.
- Sketch. The pen draws freehand annotations over the diagram.
Moving and arranging
Click to select, Shift-click to add to the selection, or drag a box around several items. Drag to move, use the square handles to resize, and arrow keys to nudge. Snap to grid keeps everything aligned, and you can turn it off for free placement. Duplicate, copy, paste, bring to front and send to back are on the toolbar and on the usual shortcuts.
Style
The Style panel changes fill, outline, text colour, line width, dashes and font size. For arrows it adds routing, arrowheads and the label.
Shortcuts
V select, H hand, R rectangle, O ellipse, D diamond, T text, S sticky note, C arrow, P pen. Ctrl or Cmd with Z undoes and Shift adds redo. Delete removes the selection, plus and minus zoom, and 0 fits the drawing to the screen.
Saving and sharing
Export PNG for slides and documents, SVG for a sharp scalable version, or JSON for an editable backup. Your work is kept in this browser between visits, so export anything important.
If your team keeps redrawing the same processes, DEV3 builds custom workflow tools that turn diagrams like this into working software.
Frequently asked questions
Do the arrows follow the shapes when I move them?
Yes. A connector is attached to a side of each shape, so it is re-routed live when you move or resize either one. Deleting a shape removes the arrows attached to it.
How do I draw an arrow?
Hover a shape and drag from one of the blue dots to another shape. You can also pick the arrow tool and drag from shape to shape. Dropping on empty space leaves a loose end that you can drag onto a shape later.
How do I move around a big diagram?
Use the hand tool, hold the space bar, or drag with the middle mouse button to pan. Scroll the mouse wheel to zoom at the pointer, use the zoom buttons, or press 0 to fit everything on screen.
Where is my drawing saved?
Only in your browser on this device. Nothing is uploaded. Use JSON to keep a backup or move it to another device, and Import to open it again.
What does the PNG export look like?
The PNG and SVG use a light background and are cropped to your drawing with a small margin, so they look right in documents and slides whatever theme the site is in.
Can I edit text inside shapes?
Double-click a shape or an arrow to type. Press Enter to finish, or Shift+Enter for a new line. Double-click empty space to add a free text label.