Flowchart Maker

About the flowchart maker

A flowchart is a picture of a process. Each step sits in a box, and arrows show the order. When there is a choice, a question in a diamond splits the way into yes and no. You can see the whole process at once, so a flowchart is easy to explain and easy to check.

Most flowchart tools make you drag every box and every arrow by hand. That takes a long time, and the lines often cross. Here you just type the steps, one per line, like a list on paper. The tool puts the boxes in place, draws the arrows, and keeps the lines apart. Change a line, and the chart updates at once.

Features

• Text in, chart out — one step per line; the boxes, arrows and spacing are done for you
• Questions with yes and no — end a line with ? and write the ways out under it
• Loops and jumps — -> Step name goes back (or ahead) to a step, drawn as a line at the side
• The standard shapes — rounded start and end, box, diamond, and a slanted box for input and output
• Clear messages — each problem names its line, and one click takes you to that line
• 8 styles — Classic, Minimal, Bold, Pastel, Dark, Blueprint, Hand-drawn and Chalkboard
• Top to bottom or left to right — plus a key of the shapes for class handouts
• PNG and SVG — a sharp picture for slides, or an SVG to edit and print; your text is saved in this browser

How to write a flowchart as text

Write one step on each line. The words decide the shape:

Put the steps of a branch on the lines under its yes: or no:, indented with two spaces. When the branch is done, go back to the left: the next line comes after the question, and the two ways join there again. A short branch fits on one line: yes: Take an umbrella.

You do not have to write both ways. If a question has only yes:, the "no" way goes straight on to the next step. A branch can also have another short name, like Red:, Yellow: and Green:, so a question can have three or more ways out.

A jump uses the exact words of a step. Capital letters and a ? at the end do not matter. To loop back after a step, write -> Step name on the next line, or at the end of the same line: Save money first -> Do I have the money?.

Brackets are another way to pick a shape: (text) is a rounded end, [text] is a box, /text/ is an input or output box and <text> is a diamond. Use [ ] for a step that ends with ? but is not a question, like [Ask "Why?"].

Three examples to start from

Press an example under the text box to load it, then change it. The first example, Morning routine, shows the main ideas:

Should I buy it? adds a loop and an early end. Under Do I have the money?, the "no" way says Save money first and then -> Do I have the money?, so the chart goes back and asks again. The line no: End: Do not buy it ends the process inside a branch.

Login process uses input and output boxes, and a question inside a branch. After a wrong password, 3 failed tries? either locks the account or jumps back with no: -> Input: Email and password.

Flowchart symbols and what they mean

Tick Show a key of the shapes in Advanced options to print this key under your chart. It lists only the shapes your chart uses.

Eight styles

• Classic — soft colours, a different colour for each kind of shape
• Minimal — black lines on white, saves ink when you print
• Bold — strong filled shapes with white text, for slides
• Pastel — gentle colours and round corners
• Dark — glowing shapes on a dark background, for screens
• Blueprint — white lines on a blue grid, like a technical drawing
• Hand-drawn — a sketch on lined notebook paper
• Chalkboard — chalk lines on a green board, for the classroom

The style only changes the look. The steps, the layout and the downloads stay the same. One colour per shape can be changed to The same colour for all under the style list.

Who uses flowcharts

• Students — plan an algorithm for computer science, the steps of a science experiment, or a maths method
• Teachers — show class rules or "what to do when you are stuck" on the board in Fullscreen
• Teams — explain how a request, an order or a support ticket is handled, step by step
• Programmers — sketch the logic of a function before writing the code
• At home — make a decision, or draw a routine for children to follow

Frequently asked questions

What is a flowchart?

A flowchart is a diagram of the steps in a process. Boxes hold the steps, arrows show the order, and diamonds hold questions where the way splits. It is used in schools, offices and programming to explain how something works.

How do I add a yes / no decision?

End the line with a question mark, like Is it raining?. On the next lines write yes: and no:, each followed by its steps, indented with two spaces. If you write only one of them, the other way goes straight on to the next step.

How do I make a loop?

Write -> and the exact words of an earlier step, like -> Do I have the money?. The arrow goes back to that step. It is drawn as a line at the side of the chart, so it does not cross the other lines.

What do the red and yellow messages mean?

Red lines are problems the tool cannot draw, like a jump to a step that does not exist. Yellow lines are tips, like a question with only one way out. Each message starts with its line number. Click it, and the line is selected in the text box. The line numbers on the left of the box are marked too.

Can I edit the flowchart in another program?

Yes. Download the SVG. It opens in Inkscape, Illustrator and Figma, and you can insert it into PowerPoint or Word. The text stays real text. The PNG is a picture at twice the size, sharp for slides and documents.

Is my flowchart saved or uploaded?

Your text and your settings are saved in this browser, so the chart is still there when you come back. Nothing is uploaded. The chart is drawn on your device.

Can I write in other languages?

Yes. You can type the steps in any language. Chinese, Japanese and Korean text wraps between characters, and Arabic and Hebrew text is drawn right to left. On this page the special words (Start, End, yes, no, Input, Output) are English; brackets like (text) and /text/ work in every language.

Is the flowchart maker free?

Yes. There is no sign-up, no watermark and no limit on how many charts you make.

Good to know

• The layout is automatic. You cannot drag a box by hand; change the order of the lines instead
• Long text wraps onto more lines, up to 8 lines in one shape
• A chart can have up to 400 lines
• Branches written with yes: and no: never cross. Jumps get their own lines at the side; only two jumps that overlap each other (A back to C and B back to D) may need to cross
• If two steps have the same words, a jump goes to the first one
• The PNG of a very big chart has a longest side of 8000 pixels; the SVG has no limit

Related tools

• Mind Map Maker — put your ideas around one main topic
• Org Chart Maker — show who reports to whom in a team
• Timeline Maker — show events in the order of their dates
• Gantt Chart Maker — plan tasks over days and weeks
• Venn Diagram Maker — compare two or three groups
• Sankey Diagram Generator — show how amounts flow from one place to another

How to use it

• Type your steps in the box, one per line — or press an example to start
• End a question with ? and write yes: and no: under it, with their steps indented
• Write -> and the name of a step to go back to it
• If a red line appears under the box, click its line number and fix that line
• Pick a style, a direction and a text size
• Click Download PNG or Download SVG — or Fullscreen to show the chart on a big screen