Flowchart Maker

Worked example: the 21st node and a two-way arrow

The page loads with 2 nodes already in place (1 process, 1 decision) connected by an arrow, ready to try immediately. Clicking "Add process" repeatedly up to a 21st node does not add anything — the status line changes to "This canvas supports up to 20 nodes." with no error dialog, so it is easy to miss. If clicking add produces no new node, check the status line before reloading the page.

After connecting node A to node B, switching to Connect mode and linking B back to A is allowed — the status line shows "Selected arrow" rather than rejecting it — but both arrows are drawn along the same line segment and end up nearly on top of each other. To express a two-way relationship, note the direction directly in the node text instead of relying on two overlapping arrows.

• Node text is edited through the browser's native prompt dialog; double-clicking a node opens it.
• Exporting a PNG temporarily hides the orange selection outline and the dashed connect-mode indicator, so the output has no editing markers.

Only two node shapes, and the split with Sketchpad

The tool offers only two node shapes: rectangles for processes and diamonds for decisions. There is no oval start/end shape, no swimlanes, and no plain text-label node. If a process needs to distinguish "start/end" from a regular step, that has to happen through wording, not shape.

To verify, use "Select/Move" mode to click through every node and confirm its text, then export the PNG and zoom in to check arrow direction — especially when nodes sit close together, where the arrow start and end points are easy to misread.

If what is needed is a freehand sketch or signature rather than a directional step diagram, use this site's Online Sketchpad instead. Both tools export PNG, but sketchpad has no concept of nodes or arrows — once drawn, it is plain pixel strokes with no double-click-editable text.

How to use

1. Use Add process or Add decision to place nodes on the canvas.
2. Double-click a node to edit its text, and drag nodes to reposition them.
3. Switch to Connect mode, click a source node, then click a target node to add an arrow.
4. Select a node or arrow to delete it, then export PNG when the diagram is ready.

Use cases

• Map work procedures, approval steps, support replies, or classroom sequences.
• Sketch decisions, branches, and simple system logic.
• Export PNG for slides, documents, tickets, or task notes.

Who is it for

• Staff mapping an approval process or task workflow
• Teachers building a classroom decision tree or process diagram
• Product or support staff sketching yes/no decision logic

Real examples

Good to know

• The node limit is 20; clicking add again past that point does not create a node — it only updates the status text, with no error dialog.
• Two nodes can have arrows pointing in both directions at once, and they render almost exactly on top of each other, making them hard to tell apart.
• Node text is edited through the browser's native prompt dialog, not by typing directly on the canvas.