Flowchart Maker — Process Diagrams in the Browser, Free
Draw process flowcharts with standard shapes (start, action, decision, end). Drag-and-drop, PNG / SVG export, no sign-up.
About Flowchart Maker
A flowchart maker is a diagramming tool for building process diagrams — sequences of actions, decisions, and outcomes connected by directional arrows — using a fixed vocabulary of shapes (oval = start/end, rectangle = action, diamond = decision, parallelogram = input/output) that engineers, business analysts, and educators have used since the 1960s. The ZTools Flowchart Maker runs entirely in the browser, gives drag-and-drop shape placement, auto-routing arrows, alignment guides, and exports to PNG / SVG without uploading anything to a server.
Use cases
- Business process documentation. New employee onboarding flow, refund handling, escalation paths. Flowchart makes the process unambiguous — everyone sees the same flow, eliminating "I thought we did it this way" misunderstandings.
- Software algorithm design. Before coding a non-trivial function, sketch the decision tree. Catches missing branches and edge cases before they cost an afternoon of debugging.
- Decision-tree training material. Teach a process to a customer-support team or new hires. Flowchart turns text procedures into visual flows that the brain processes faster.
- Approval workflows. Document approval chains (request → manager review → finance approval → payment). Flowchart surfaces parallel paths and bottlenecks visually.
How it works
- Drag shapes onto the canvas. Standard symbols: oval (start/end), rectangle (action), diamond (decision), parallelogram (I/O), cylinder (data store).
- Connect with arrows. Click+drag from one shape's edge to another. Arrows route automatically; right-angle bends snap to a grid.
- Label decisions with branches. Diamond shapes have at least 2 outgoing arrows labelled (Yes/No, True/False, condition).
- Align and tidy. Auto-align on horizontal / vertical axes; gridlines snap. Consistent spacing makes flow direction obvious.
- Export. PNG for documents and presentations, SVG for crisp scaling, JSON for re-importing. Fully client-side.
Examples
Input: Login flow: enter credentials → validate → branch on success → either dashboard or error
Output: Oval (start) → Parallelogram (input creds) → Diamond (valid?) → Rectangle (dashboard) | Rectangle (error message → back to input).
Input: Refund process: request → check eligibility → approve / deny → notify
Output: 5-step linear flow with one decision diamond and two branches; total 7 shapes.
Input: Bug triage: report → severity? → branch P0/P1/P2 → assign owner → resolve
Output: Decision diamond with three outputs; each branch leads to its own assignment + resolution sub-flow.
Frequently asked questions
What standard symbols should I use?
Oval = start / end. Rectangle = action / process. Diamond = decision. Parallelogram = input / output. Cylinder = database. Arrows = flow direction. Stick to these and any reader will understand.
How big should a flowchart be?
One page / one screen. If it spills, split into sub-flowcharts and cross-reference. Bigger flowcharts are not read; they are skipped.
Should arrows always go top-to-bottom?
Top-to-bottom or left-to-right is convention; reverse direction needs explicit arrowheads. Mixing both directions in one chart confuses readers.
How do I show parallel processes?
Split node (one input, multiple outputs) for fork; join node for merge. Some standards use double-line bars; rectangles work fine if arrows are labelled.
When should I use a swimlane diagram instead?
When ownership matters — different teams handle different steps. Swimlane (BPMN-style) shows who does what; classic flowchart shows what happens.
How do I version-control flowcharts?
Export as JSON or SVG and check into git. Plain-text formats diff cleanly; PNG-only versioning is a dead end.
Pro tips
- Pick a single direction (top-to-bottom OR left-to-right) and stick with it. Mixing forces readers to track flow manually.
- Limit decisions to 2-3 outcomes. Diamonds with 5+ branches signal you need a sub-flow.
- Label every arrow leaving a decision diamond — unlabelled branches are the #1 ambiguity in flowcharts.
- Keep shapes the same size for the same role. Mixed sizes hint at importance you didn't intend.
- Export to SVG when the chart will be printed or zoomed; PNG suffices for screen-only.
Reviewed by Ahsan Mahmood · Last updated 2026-05-05 · Part of ZTools.
For the full,
formatted version of this page, please enable JavaScript and reload
https://ztools.zaions.com/flowchart-maker.