Free Flowchart Generator Online - Flow Chart Maker - Small Study Tools

Drag & Drop · Instant Connectors · Works on Mobile

Flowchart Generator

Build process diagrams by dragging nodes onto the canvas and connecting them with arrows. Add steps, decisions and shapes instantly. Every node is fully draggable and resizable on both desktop and mobile. Pro Mode adds custom colours, more shapes, templates, connector styles and SVG/PDF export.

100% Private — saved only in your browser, never sent to a server

● Pro Version is Free for now

✓ Custom colours · More shapes · Templates ·
Connector labels · Zoom · SVG/PDF export unlocked

Day Night

Connector Style PRO

Line Style

Arrow Type

Label

📦 Nodes: 0

➜ Connectors: 0

🔲 Snap to Grid: Off

Click "Add Node" to begin, then drag it anywhere. Works with touch too.

Your canvas is empty — tap "Add Node" to get started

100%

Export your flowchart

📖 Quick Reference

Oval marks the start or end of a process.

Rectangle a single process or action step.

Diamond a decision point with Yes/No branches.

Parallelogram an input or output step.

📋 Quick-Start Templates PRO

⚙️

Basic Process

Start → Steps → End

🔀

Decision Tree

Yes/No branching

✅

Approval Workflow

Submit → Review → Approve

💡 Flowchart Tips PRO

`; const blob = new Blob([html],{type:'text/html'}); const a=document.createElement('a'); a.download='smallstudytools-flowchart-print.html'; a.href=URL.createObjectURL(blob); a.click(); toast('Print-ready file downloaded — open it to save as PDF'); }// ── MODE ────────────────────────────────────────────────────── function setMode(mode) { isPro = mode==='pro'; document.getElementById('btnSimple').classList.toggle('active',!isPro); document.getElementById('btnPro').classList.toggle('active',isPro); widget().classList.toggle('pro-mode',isPro); document.getElementById('proModeBar').style.display=isPro?'flex':'none'; document.getElementById('modeHint').textContent=isPro ?'Drag, connect, customise colours, use templates and export as SVG/PDF' :'Click "Add Node" then drag it anywhere on the canvas'; render(); try{localStorage.setItem(SK+'_mode',mode);}catch(e){} }function toast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2400);} function save(){try{localStorage.setItem(SK,JSON.stringify({nodes,connectors,nextId}));}catch(e){}}// ── INIT ────────────────────────────────────────────────────── try{ const saved=JSON.parse(localStorage.getItem(SK)||'{}'); if(saved.nodes){ nodes=saved.nodes; connectors=saved.connectors||[]; nextId=saved.nextId||1; } const savedMode=localStorage.getItem(SK+'_mode'); if(savedMode==='pro') setMode('pro'); else render(); }catch(e){ render(); }

How to Use the Flowchart Generator

From a blank canvas to a downloadable diagram. Every step works the same with a mouse or a finger.

Add a Node

Tap "Add Node", pick a shape, then drag it anywhere on the canvas.

Connect the Steps

Tap Connect, then tap one node and another to draw an arrow.

Auto-Saves as You Go

Your flowchart is saved in your browser, nothing to lose.

Export or Go Pro

Export as PNG, or unlock templates and connector styling in Pro.

Everything above runs entirely in your browser. Your flowchart is never uploaded to a server, so it stays completely private from start to finish.

Specifications

Price Free

Signup Not Required

Data Storage Local only (this device)

Canvas Free-form drag and drop, scrollable

Shapes 4 free (Pro adds hexagon, document)

Templates 3 (Process, Decision Tree, Approval Workflow) (Pro)

Export Formats PNG · SVG (Pro) · PDF (Pro)

Pro Tools Custom Colours · Connector Styling · Zoom · Snap

Platform Optimized for Web & Mobile

Category Strategy & Diagrams

Built by SmallStudyTools.com

Found a bug or something not working right? Let us know and we'll fix it. Every report helps make this tool better.

Report an Issue

Flowchart Generator, Free and Online

A flowchart generator lets you drag shapes onto a canvas, connect them with arrows, and turn a process into a clear visual diagram. This one works the same way with a mouse or a finger, every node is fully draggable and resizable on mobile, and it runs entirely in your browser.

A process described in a paragraph is hard to follow, since it hides the branches, decisions and loops that actually determine what happens next. A flowchart fixes that by turning each step into a shape and each transition into an arrow, so the whole sequence can be taken in at a glance. This free flowchart maker online tool lets you tap "Add Node" to place a shape, drag it anywhere on the canvas with your mouse or your finger, type directly into its label, and resize it with the corner handle, all of which work identically on desktop and mobile. Click "Connect" to draw arrows between steps. Export the finished diagram as a PNG. Pro Mode adds custom hex colours, two extra shapes, three quick-start templates, full connector styling with labels, canvas zoom, and export to SVG and PDF.

1Simple vs Pro, What Each Mode Includes

Feature	Simple Mode	Pro Mode (Free)
Unlimited nodes, drag and resize on desktop and mobile	Included	Included
4 core shapes, 5 preset colours, arrow connectors	Included	Included
Export as PNG	Included	Included
2 extra shapes (hexagon, document), custom hex colour	Not included	Included
3 quick-start templates	Not included	Included
Connector line style, arrow type and labels	Not included	Included
Zoom controls, snap to grid	Not included	Included
Export as SVG or PDF	Not included	Included

2What the Shapes Mean

Start / End

Process Step

Decision

Input / Output

These four shapes cover the overwhelming majority of real flowcharts. An oval marks where the process begins or ends, and a well built chart usually has exactly one of each. A rectangle is a single action or process step, the workhorse shape that makes up most of any chart. A diamond marks a decision point, almost always with a Yes path and a No path leading out of it, and labelling those two arrows is what keeps a chart with branching logic readable. A parallelogram marks a point where data enters or leaves the process, distinguishing it visually from the action steps around it.

3Where the Flowchart Actually Came From

Industrial engineers Frank and Lillian Gilbreth introduced the flow process chart to the American Society of Mechanical Engineers in 1921, in a presentation called Process Charts, First Steps in Finding the One Best Way to Do Work, a history confirmed by IBM's overview of flowchart history. What most retellings skip is that the standardised shapes used today did not appear alongside that original 1921 presentation. It took another 26 years for ASME to formalise a symbol system based on the Gilbreths' work, in 1947. The version of the flowchart used to describe computer programs is a separate, later branch again, developed independently by Herman Goldstine and John von Neumann in the late 1940s for planning early electronic computing.

Question	Quick Answer
Who introduced the flow process chart?	Frank and Lillian Gilbreth, in 1921
When were the standard shapes formalised?	1947, by the American Society of Mechanical Engineers
How many arrows should leave a decision diamond?	Two, usually labelled Yes and No
Should a flowchart have more than one Start shape?	No, exactly one Start and generally one End keeps it readable

Privacy Note

Everything, including Pro Mode's custom colours, extra shapes, templates and connector styling, runs entirely in your browser using JavaScript. Your flowchart is saved only in local storage on your own device, and is never sent to a server.

4Frequently Asked Questions

How do I make a flowchart online for free?

Click Add Node to place a shape, drag it anywhere on the canvas, then double tap or click its label to type your step. Click Connect, then tap one node followed by another to draw an arrow between them. Export the finished diagram as a PNG. No signup is required, and everything is saved only in your browser.

What is a flowchart used for?

A flowchart is a diagram that shows the steps in a process using shapes connected by arrows, so a reader can follow the sequence, spot decision points, and see exactly where a process branches or loops. It is used across business, engineering, education and software development to document, plan and communicate how a process actually works.

Who actually invented the flowchart?

Industrial engineers Frank and Lillian Gilbreth introduced the flow process chart to the American Society of Mechanical Engineers in 1921, in a presentation titled Process Charts, First Steps in Finding the One Best Way to Do Work. It took another 26 years for the standardised set of shapes now used everywhere to appear, when ASME formalised a symbol system based on the Gilbreths' original work in 1947. The version used for describing computer programs came later still, developed separately by Herman Goldstine and John von Neumann in the late 1940s.

What do the different flowchart shapes mean?

An oval marks the start or end of a process. A rectangle represents a single process or action step. A diamond marks a decision point, usually with a Yes and a No path leading out of it. A parallelogram represents an input or output step, such as data entering or leaving the process.

How do I make a flowchart on my phone?

Tap Add Node to place a shape, then drag it into position by touching and holding anywhere on the shape itself, the whole node moves with your finger. Tap the corner handle to resize a shape, and tap the label to type directly into it. Everything that works with a mouse on desktop works the same way with touch on mobile.

Is my flowchart data private?

Yes. Everything, including Pro Mode's custom colours, extra shapes, templates and connector styling, runs entirely in your browser using JavaScript. Your flowchart is saved only in your browser's local storage, and is never sent to a server.

Grounded in the documented 1921 to 1947 Gilbreth to ASME timeline, not the flattened one-date origin story most sites repeat. The full history is detailed on IBM's guide to flowcharts. For related process and diagram tools on the rest of this site, see the WBS Generator and the full SmallStudyTools.com tool library.

More Strategy & Diagram Tools

Every other tool in the Strategy & Diagrams category

Mind Map Generator Branch out ideas from a central topic

Cycle Diagram Generator Repeating processes and continuous loops

Fishbone Diagram Generator Root-cause analysis, cause and effect

Gantt Chart Generator Visual project timelines and task scheduling

WBS Generator Work breakdown structure tree

Task Priority Matrix Eisenhower Method

SWOT Analysis Generator Strengths, Weaknesses, Opportunities, Threats

PESTLE Analysis Generator Political, Economic, Social, Tech, Legal, Environmental

Porter's Five Forces Generator Competitive rivalry and industry analysis

Ansoff Matrix Generator Market penetration and growth strategy grid

Business Model Canvas Generator Full 9-block canvas for any business idea

BCG Matrix Generator Stars, Cash Cows, Question Marks, Dogs

VRIO Framework Generator Valuable, Rare, Inimitable, Organised

Gibbs Reflective Cycle Generator Labeled 6-stage reflective practice wheel