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.
How to Use the Flowchart Maker
- 1Add nodes by type — Terminal (start/end), Process (an action), Decision (a yes/no branch), and I/O (input/output).
- 2Click Connect, then click the source node and the target node to draw an arrow between them.
- 3Double-click a node to edit its label; drag nodes in Select mode to reposition them.
- 4Delete a node or arrow by selecting it and clicking Delete; use screenshot to save the diagram.
Worked Example: Charting an “Even or Odd” Check
Build the flowchart for a simple algorithm that tells you whether a number is even or odd. Start with a Terminal node labelled “Start”, then an I/O parallelogram “Read number n”. Next add a Decision diamond asking “n mod 2 = 0?” From the diamond, draw two arrows: label the Yes branch to a Process box “Output ‘Even’”, and the No branch to another Process box “Output ‘Odd’”. Finally connect both boxes into a single Terminal “End”.
That five-shape pattern — Terminal, I/O, Decision, Process, Terminal — is the skeleton of almost every basic algorithm, and the shapes carry meaning that plain boxes can't: a reader instantly knows a diamond means the flow splits and a parallelogram means data enters or leaves. For a loop (say, summing the numbers 1 to 10), the only new idea is a back-edge: after the Process box that updates your running total, draw an arrow back up to the Decision that checks “counter > 10?”. Put the condition check at the top for a while-loop or at the bottom for a do-while, exactly as the tips below describe.
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.