Free tool
Flowchart Maker: Draw Shapes or Type the Steps as Text
Add shapes to an open board, join them with arrows that stay attached when you move things, and label the branches Yes and No. If you prefer typing, write steps joined by arrows or paste Mermaid lines and the chart lays itself out.
The flowchart is drawn and kept in your browser, so nothing is uploaded. Your last chart is saved on your own device for next time.
Mapping a process before you build it
A flowchart earns its keep when a process has branches. A signup that behaves one way for new users and another for returning ones, a quote approval, a support triage, an order with a payment check: each has a decision, and a drawing shows the gaps that a written list hides. Draw it first, find the missing branch, then build.
The toolbar adds six shapes. Click one and it appears on the board, joined to the selected shape if there is one.
| Shape | Meaning |
|---|---|
| Start or end | Where the flow begins or stops |
| Process | A step someone or something performs |
| Decision | A question with branches, such as Yes and No |
| Input or output | Data going in or coming out |
| Document | A form, file or report |
| Note | A comment that is not part of the flow |
Working on the board
- Press Tab to add the next step already joined to the selected shape. The Next step goes menu decides whether it lands below or to the right.
- Drag the blue dot of a shape onto another shape to join them, or drag it into empty space to create a new joined step.
- Press Enter or F2, or use Edit text, to rename a shape. Arrow keys nudge a selected shape.
- Double-click empty board to add a shape there. Scroll to move around, and pinch or hold Command while scrolling to zoom.
- Seven fill swatches colour the selected shape, and Snap to grid keeps things tidy.
- Undo and redo go back and forward through your changes.
Arrows bend at right angles, can carry a label, and follow the shapes when they move.
Building the chart from text
The box under the board turns typed lines into shapes. Join steps with -> and a flow like Start -> Record the screen -> Happy with it? becomes three joined shapes. A step that ends with a question mark becomes a decision, and words like start, end or stop become the rounded start and end shape. Put a label on an arrow with ->|Yes|.
The same box reads Mermaid flowchart lines, including shape brackets and a graph direction line. Lines it cannot read are skipped and counted in the status message, and a chart is limited to 300 shapes. After drawing, Copy as Mermaid writes your board back out as text, which suits notes and documentation pages that render Mermaid.
Habits that keep a flowchart readable
- Give each decision exactly two or three labelled exits, and make sure every exit leads somewhere.
- Keep one flow direction, top to bottom or left to right, and let loops run back against it.
- Write steps as short actions, such as Send the quote, rather than whole sentences.
- Use fill colours for meaning, for example one colour for steps a customer takes and another for steps your team takes.
- Split a large flow into two charts rather than zooming out until the text is tiny.
Fit zooms the board to show everything, which is a quick check that nothing is stranded off screen.
Saving, sharing and website planning
PNG, SVG and PDF are saved from the buttons under the board, Copy picture puts the image on the clipboard, and Save file stores the chart as a file you can open again later. Background can be white or see-through. A drawn user path is also a good start for planning pages, and our guide to landing page structure explains how steps in a visitor journey map to sections.
Frequently asked questions
How do I make a flowchart from text?
Type steps joined by arrows, one chain per line, into the text box, then press the button that makes the flowchart from it. You can also paste Mermaid flowchart lines.
How do I add a Yes or No label to an arrow?
In the text box, write the label between bars after the arrow, as in -> |Yes| Next step. On the board, you can label an arrow after it is drawn.
What turns a step into a decision shape?
A step ending with a question mark becomes a decision in the text builder. On the board, choose the Decision shape from the toolbar.
Can I export to Mermaid?
Yes. Copy as Mermaid writes your chart as flowchart text and puts it in the text box and on the clipboard.
Can I come back to the chart later?
The last chart is kept on your device, and Save file lets you store it as a file and open it again. A new chart button clears the board.
What file types can I save?
PNG, SVG and PDF, plus a file of the chart itself. Copy picture also places a PNG on the clipboard.
More free tools
- mind map maker: Make a mind map with keyboard shortcuts, import or export outlines, and save it as PNG, SVG, PDF, Markdown or OPML.
- org chart maker: Make an org chart from an indented list or a CSV and save it as PNG, SVG or PDF.
- timeline maker: Turn dated events into a timeline across or down the page and save it as PNG, SVG or PDF.
- Venn diagram maker: Draw a two or three circle Venn diagram by typing items into each part, then save it as PNG, SVG or PDF.
- Markdown editor: Write Markdown with a live preview, then save it as .md, HTML or PDF.