Flowchart Maker
Type your steps one per line, join them with arrows, and get a flowchart drawn with standard symbols — terminators, processes, decisions, data and more — arranged so nothing overlaps and every Yes and No sits on its branch. Loops route back up the page. Download SVG or PNG, or set it as an APA figure. Runs entirely in your browser; free, no sign-up.
Lines without arrows are linked top to bottom. A line that starts with an arrow continues from the step above it, which is how a decision gets its branches: -Yes-> Next step. Brackets choose the symbol; a step ending in ? becomes a decision, and Start or End a terminator.
Symbols you can use
| Write it as | ISO 5807 symbol | Use it for |
|---|---|---|
| (text) | Terminator | Where the flow starts and ends. |
| [text] | Process | Any action or operation. |
| {text} | Decision | A yes/no question with a branch for each answer. |
| [/text/] | Data (input/output) | Reading or writing information: input, output. |
| [[text]] | Predefined process | A step defined elsewhere, such as a subroutine. |
| <text> | Preparation | Setting up before a loop or operation. |
| [(text)] | Stored data (database) | Data held in a database or store. |
| ~text~ | Document | A document or printed output. |
| ((text)) | Connector | Joins two parts of a chart; write a letter or number. |
6 steps · 1 decision · 6 arrows
Show the flowchart as a table
| No. | Step | Symbol | Leads to |
|---|---|---|---|
| 1 | Start | Terminator | Enter a password |
| 2 | Enter a password | Data (input/output) | Is it at least 8 characters long? |
| 3 | Is it at least 8 characters long? | Decision | No: Show an error message; Yes: Save the password |
| 4 | Show an error message | Process | Enter a password |
| 5 | Save the password | Process | End |
| 6 | End | Terminator |
Title and figure style
Takes the title out of the image and sets the figure number in bold and the title in italics above it — the APA 7 layout.
How to Use the Flowchart Maker
- 1. Write the steps, one per line. Lines without arrows are linked from top to bottom, so a simple procedure is just a list: Start, then each action, then End.
- 2. Add branches with arrows. Under a question, start a line with an arrow and a label — -Yes-> Save the file — and the line continues from the question above it. Chain several steps on one line with more arrows: -No-> Show an error -> Ask again.
- 3. Choose symbols when the default is wrong. A step ending in a question mark becomes a decision, and Start or End a terminator; everything else is a process. Wrap a step in brackets for any other symbol, such as [/Enter a number/] for input.
- 4. Pick the direction and download. Top to bottom suits most procedures; left to right suits wide ones. Download SVG or PNG — with APA style figure on if the chart is going into a paper — or Copy outline for a text version.
The Text Syntax
A line is a step or a chain of steps joined by arrows. An arrow is ->, -->, => or →. Give an arrow a label by putting it between the dashes — -Yes-> — or between double dashes with spaces, -- Yes -->, or after the arrow, -->|Yes|. A line that begins with an arrow continues from the nearest step above that did not itself begin with an arrow. The same words always mean the same step, whatever the capitals or spacing, which is how two branches rejoin at one End.
A procedure with a decision and a loop
(Start) [/Enter a password/] Is it at least 8 characters long? -No-> Show an error message -> [/Enter a password/] -Yes-> [Save the password] Save the password -> (End)
Six steps, one decision and six arrows. The error message links back to the input step, so that arrow is drawn as a loop up the right-hand side.
Flowchart Symbols (ISO 5807)
ISO 5807:1985, Information processing — Documentation symbols and conventions for data, program and system flowcharts, program network charts and system resources charts, is the international standard for flowchart symbols. It was reviewed and confirmed in 2019. The tool draws the symbols in the table; the shape carries the meaning, so the chart reads the same in black and white.
| Write it as | Symbol | Use it for |
|---|---|---|
(text) | Terminator | Where the flow starts and ends. |
[text] | Process | Any action or operation. |
{text} | Decision | A question with one branch for each answer. |
[/text/] | Data (input/output) | Reading or writing information. |
[[text]] | Predefined process | A step defined elsewhere, such as a subroutine. |
<text> | Preparation | Setting up before a loop or operation. |
[(text)] | Stored data (database) | Data held in a database or store. |
~text~ | Document | A document or printed output. |
((text)) | Connector | Joining two parts of a chart; write a letter or number. |
The cylinder for stored data is the usual database symbol; check your course or style guide if it asks for a specific standard version.
How the Layout Works
The tool places each step on a layer — a step sits below everything that leads to it — then orders the steps within each layer to reduce crossing arrows, and spaces them so no two symbols touch. Arrows are drawn at right angles. Several arrows leaving one step share a trunk and then fork, an arrow that skips layers runs in the gap between steps rather than through them, and a loop back to an earlier step leaves and enters on the right-hand side, so it cannot be mistaken for an arrow arriving from above. Labels sit on their arrows on a white plate. The layout is the same every time for the same text; you change the chart by changing the text.
Drawing a Flowchart That Reads Well
- One start, at least one end. Begin with a single terminator. Several paths may finish at the same End, which keeps the chart compact.
- One question, two answers. Phrase each decision so it can be answered Yes or No, and label every outgoing arrow. Three or more outcomes usually mean two decisions.
- Verb first. Write process steps as actions — Calculate the total, not Total — and keep each to a short phrase.
- Flow down or to the right. Readers expect to start at the top left; use loops only to go back.
- Split a chart that grows past a page. Put a repeated sub-procedure in its own chart and refer to it with a predefined-process symbol.
Frequently Asked Questions
- How do I make a flowchart from text?
- Type each step on its own line. Lines without arrows are connected from top to bottom; to branch, start a line with a labelled arrow such as -Yes-> and the next step. The tool reads the text, chooses a symbol for each step, lays everything out and draws the arrows.
- What do the flowchart shapes mean?
- A rounded terminator marks the start or end, a rectangle is a process, a diamond is a decision, and a parallelogram is data going in or out. A rectangle with double side bars is a predefined process, and a hexagon is preparation. These follow the symbols in ISO 5807; the table above lists all nine the tool draws.
- How do I show a loop in a flowchart?
- Make a step point back to an earlier step, either with an arrow on the line that mentions it again or by writing its words exactly as before. The tool draws the return arrow up the right-hand side with its own labelled decision branch. Make sure the loop has an exit, usually the other answer of a decision.
- Can I use a flowchart in an APA paper?
- Yes. APA 7 treats a flowchart as a figure: switch on APA style figure, set the figure number, and the number and title go above the image in bold and italics while any note goes below. Download the SVG or PNG for your document, and cite the source if the chart is reproduced from elsewhere.
- What is the difference between a flowchart and a mind map?
- A flowchart shows an ordered process with decisions and loops; a mind map shows ideas branching from a central topic with no order between branches. Use a flowchart for how something happens and a mind map to explore what to say about it.
- Is my text sent anywhere?
- No. The chart is built and downloaded entirely in your browser; nothing you type is uploaded.