WSWorker's Studio
🔀

Flowchart maker

🔒 Runs locallyDrawing tools

Build simple flowcharts with boxes, diamonds, and arrows.

The flowchart maker lets you add process boxes and decision diamonds, drag them into position, connect them with arrows, and export the result as a PNG — a quick way to sketch a process or decision flow without opening full diagramming software.

Share

LINEFacebookXThreads

How to use

  1. Click "Add process box" or "Add decision diamond" to place a node, then drag it into position.
  2. Double-click any node to edit its text.
  3. Turn on "Connect mode", then click one node and then another to draw an arrow between them.

Common use scenarios

  • Sketching a process flow for a document or presentation.
  • Mapping out a decision tree with yes/no branches.
  • Drafting a quick flowchart before building it properly in dedicated diagramming software.
  • Explaining a step-by-step process visually to a teammate.

✓Content & verification reviewed: 2026-08-25

How we verify Flowchart maker

How to confirm your flowchart connects and exports correctly.

Connect mode links node centers, not specific edges

With connect mode on, clicking one node and then another draws a straight arrow between their centers — the tool doesn't route around other nodes or attach to a specific side, so overlapping arrows are possible in busy diagrams.

Double-click to edit text, single-click to select or move

A single click selects a node so you can drag or delete it, while double-clicking opens it for text editing — mixing these up is the most common reason a node moves when you meant to rename it, or vice versa.

Delete removes the selected node and its connections

Deleting a selected node also removes any arrows attached to it, since a dangling arrow with no start or end node wouldn't make sense — if you only want to remove a connection, delete and redraw the arrow instead of the node.

Before you rely on the result

  • You've distinguished a single click (select/move) from a double-click (edit text) so the right action happens.
  • Connect mode is on when you intend to draw arrows, and off when you intend to move nodes.
  • You understand deleting a node also removes its connected arrows.
  • You've exported the PNG before closing the tab, since there's no auto-save.

Who this is for

  • Anyone sketching a process flow for a document or presentation.
  • People mapping out a decision tree with branching paths.
  • Anyone drafting a rough flowchart before building it in dedicated diagramming software.
  • Teammates explaining a step-by-step process visually.

Real-world examples

Approval process sketch

Someone documenting a request-approval workflow adds process boxes for each step and a decision diamond for the approve/reject branch, then connects them with arrows and exports a PNG for the team wiki.

Decision tree draft

A person mapping out a troubleshooting flow adds several decision diamonds in sequence, each branching to different process boxes, to visualize the logic before writing it up as documentation.

Quick explanation for a teammate

Someone explaining a multi-step process in a meeting sketches the flow live, exports it as a PNG, and shares it right after the call instead of writing a long description.

Limitations

  • Connections are simple straight arrows between node centers — no orthogonal routing or arrow re-styling.

Frequently asked questions

Do arrows route around other nodes?

No — arrows are drawn as straight lines between node centers, so in a busy diagram an arrow may visually cross over an unrelated node.

What happens to arrows if I delete a node?

Any arrow connected to that node is deleted along with it, since an arrow can't exist without both a start and end node.

How do I rename a node without moving it?

Double-click the node to open text editing rather than single-clicking and dragging, which moves it instead.

Can I export as something other than PNG?

Not currently — export produces a flat PNG image of the current canvas; there's no vector or editable-file export for flowcharts.

🔒 Runs in your browser — nothing is uploaded. Results are for reference only; see the disclaimer. Last updated: 2026-08-25

Subscribe for updates

New tools and tips, straight to your inbox. No spam, unsubscribe anytime.