Flowchart Maker — Drag and Drop Algorithm Diagrams
Build algorithm and process flowcharts directly in your browser. Drag nodes, draw connecting arrows, and edit labels — no software to install. No signup, runs entirely in your browser.
Tips for Drawing Flowcharts
Always start with a Terminal
Every flowchart should begin and end with a Terminal (rounded rectangle) node labelled Start and End. This makes the flow unambiguous.
One action per Process box
Keep each Process node to a single operation (e.g. "Compute sum" or "Increment i"). Multiple steps in one box make the flow hard to follow.
Label Decision branches
Decision diamonds should have Yes/No (or True/False) labels on their outgoing arrows. Connect the true branch downward and the false branch to the side by convention.
Use I/O for user interaction
Use the parallelogram I/O shape specifically for input and output steps — reading a value from the user or displaying a result. This keeps it visually distinct from computation.
Plan structure before drawing
For loops, sketch the loop body, the condition check (Decision), and the back-edge arrow before placing nodes. Position the condition check at the top for while-loops and bottom for do-while.
Frequently Asked Questions
What node types are available?
Four standard flowchart shapes: Process (rectangle) for actions and operations, Decision (diamond) for yes/no branches, Terminal (rounded rectangle, also called rounded ends or stadium) for Start and End points, and I/O (parallelogram) for input and output steps.
How do I connect two nodes?
Click the Connect button in the toolbar, then click the source node followed by the target node. An arrow is drawn between them automatically. The tool returns to Select mode after the connection is made.
How do I edit a node label?
Double-click any node to open the label editor. Type the new label and press Enter or click OK. Labels longer than 18 characters are truncated in the diagram to keep nodes readable.
How do I delete a node or arrow?
Select the node or arrow by clicking it (it turns purple when selected), then click the Delete button. Deleting a node also removes all arrows connected to it.
Can I move nodes?
Yes. In Select mode, click and drag any node to reposition it on the canvas. Arrows update automatically to connect to the new position.
Can I export or save the flowchart?
Currently the tool is in-browser only. You can use your browser's screenshot tool or a screen capture to save the diagram. Export functionality is planned for a future update.
Is my diagram saved?
Diagrams are not saved between sessions — the canvas resets when you refresh or close the tab. Use the Reset button to return to the default example flowchart.