Flowchart maker

How to make a flowchart

1. Write the steps in the Steps box, one arrow per line or a whole chain on one line: (Start) -> [Mix] -> {Smooth?}. The same words mean the same box, so you can come back to a step on a later line.
2. Add the branches of a question with labels: {Smooth?} -> yes: [Bake] and {Smooth?} -> no: [Mix]. An arrow back to an earlier step is drawn as a loop round the side.
3. Pick Top down or Left to right. The boxes are placed for you so none overlap, and arrows are routed between them.
4. Tap any box to change its words or shape, add the next step after it, or connect it to another box with an optional label. Pick a colour for each shape. Undo takes back any change.
5. Save it: PNG for documents and slides, SVG for design programs, PDF to print, Mermaid for GitHub, GitLab or Notion. Or make a share link.

A worked example

These four lines:

(Start) -> [Mix] -> {Smooth?}
{Smooth?} -> yes: [Bake]
{Smooth?} -> no: [Mix]
[Bake] -> (End)

give five boxes (two rounded ends, two steps and one diamond) and five arrows, two of them labelled. Mix is written three times but drawn once, because steps are matched by their words. The no arrow goes from the diamond back up to Mix, so it is a loop: instead of cutting through the chart it leaves the diamond on its right, runs up a lane outside every box and comes down into the top of Mix. In left-to-right mode the same loop runs along the bottom.

The layout is done by dagre, an open-source library (MIT licence) for layered graphs: it puts every step in a row (a column, left to right) after the steps that lead to it, orders each row to cut down crossings, and keeps at least 36 pixels between boxes. Arrows that go back up are taken out first and routed separately in lanes clear of all boxes. A label is the text before a colon after the arrow, so -> Step 3: wash means a label Step 3 and a step wash; put the step in brackets, -> [Step 3: wash], to keep the colon in its words. When you edit on the chart, the text is rewritten with one arrow per line and every step in brackets.

What it cannot do

• No swimlanes and no groups: every step is one box in one chart. Mermaid subgraphs are left out when you open them, with a note.
• No free placement: the layout is automatic and you choose only the direction, top down or left to right. You cannot drag a box to a spot of your own.
• It does not turn a paragraph into steps. It draws the steps you write; paste lines in the A -> B form, or Mermaid flowchart text, not an essay.
• Over 200 steps is slow on a phone, because the whole chart is laid out again after each change: measured on a desktop computer, 200 steps take about 80 ms and 500 about a quarter of a second, and a phone takes several times longer. The page draws at most 500 steps and 120 characters per step.
• Two steps cannot have the same words, because the text matches steps by their words; a Mermaid chart with two boxes called Done opens as Done and Done (2).
• The PDF uses Helvetica, so letters outside Western European alphabets (and emoji) make the page put the chart into the PDF as a high-resolution picture instead of text.
• A share link over 2,000 characters (measured: about 180 steps of three words each) may be cut by some chat apps; the page tells you the length. Saved charts live in this browser on this device only; private browsing or clearing site data removes them.

Privacy and what is stored

Nothing you type leaves your device. The page sends an anonymous page-view count and, when you first edit and when you export, one of two fixed words (flow-make, flow-export), never a step's text or a file name. Your charts are kept in this browser's local storage as you go, so a reload loses nothing, and Clear all saved charts removes every one in one tap. A share link carries the chart after the #, which browsers do not send to any server; opening one shows it as a copy and saves nothing until you tap Save this copy on this device. The layout library (dagre 3.1.1, 49 KB) comes from this site; the PDF library (pdf-lib, MIT licence) is loaded from this site only when you first ask for a PDF.

Questions

Is this flowchart maker free, with no sign-up?

Yes. There is no account, no trial, no watermark and no limit on the number of charts. The chart is drawn in your browser and kept in this browser's storage, so nothing you type is sent anywhere.

How do I turn text into a flowchart?

Write one step per line and join steps with ->, for example (Start) -> [Mix] -> {Smooth?}. Brackets choose the shape: round for start and end, square for a step, curly for a question, slashes for input or output. For a branch write {Smooth?} -> yes: [Bake] and {Smooth?} -> no: [Mix]. The chart redraws as you type.

How do I put a flowchart in Word or Google Docs?

Save it as PNG at 2x or 3x and insert it as a picture: in Word use Insert, Pictures; in Google Docs use Insert, Image, Upload from computer. Word also accepts the SVG file, which stays sharp at any size and keeps every label as text. For a printed handout, use the PDF on A4 or Letter.

Is this an AI flowchart generator?

No. It does not read a paragraph and guess the steps; it draws exactly the steps and arrows you write, the same way every time, and nothing leaves your device. If you want a chatbot to suggest the steps, ask it for Mermaid flowchart text or for lines in the A -> B form shown here and paste the answer into the text box.

Can I use Mermaid code?

Yes, for flowcharts. Paste text that starts with flowchart TD or flowchart LR (or graph TD) and it is converted to this page's steps: rectangles, rounded and stadium boxes, diamonds and parallelograms, with arrow labels. Subgraphs and styles are left out with a note. Export gives Mermaid text back, which GitHub, GitLab and Notion render. Other Mermaid diagrams, such as sequence diagrams, are refused with a message.

Does it work on a phone?

Yes. Tap a box to change its words or shape, add the next step after it or connect it to another box; drag to pan and pinch to zoom. The text box and the chart share the first screen, and charts stay saved in the phone's browser.