Flowchart Maker from Text

How the Flowchart Maker works

Flowchart maker from text: why typing beats dragging

Most flowchart editors make you draw first and think second. You drop a box, drag an arrow, then spend longer nudging shapes than deciding what the process is. Typing the steps reverses that. Each line states one fact about the process, "this step leads to that one", and the layout follows from the facts. Changing the process means editing a line, not redrawing half the page. The text also doubles as a plain record that can be pasted into a ticket, an email or version control and redrawn at any time.

Where flowcharts earn their place

Frank and Lillian Gilbreth presented the "flow process chart" to the American Society of Mechanical Engineers in 1921 to study factory work. The symbols most people know were standardised later, in ANSI X3.5 (1970) and ISO 5807 (1985): a rounded terminal for start and end, a rectangle for a process step and a diamond for a decision. This tool uses those three because they cover almost every everyday chart.

Common uses today:

• Standard operating procedures. ISO 9001 asks organisations to determine their processes and how they interact, and a one-page flowchart is the usual evidence an auditor sees.
• Clinical and safety algorithms. Resuscitation and triage guidelines are published as decision flowcharts because a diamond with two labelled exits is faster to follow under pressure than a paragraph.
• Support and sales scripts. "Is the device on? Is the light green?" is a decision tree, and agents follow it more consistently as a chart.
• Software logic. Sketching a login, checkout or retry flow before coding exposes the missing "else" branch while it is still cheap to fix.
• Onboarding and teaching. A new starter reads a ten-box chart in a minute. The same content as a policy document takes much longer.

Writing the steps

Each line is one arrow: "Receive order -> Check stock". Chain steps on one line with more arrows, "A -> B -> C", and "→" or "=>" work as well as "->". To label an arrow, end the line with a colon and the label: "In stock? -> Pack items: yes". The first time a step appears, brackets can set its shape:

• round brackets make a start or end pill, "(Start)"
• curly brackets make a decision diamond, "{In stock?}"
• square brackets, or none, make a process box

After that, refer to the step by its name alone. Lines starting with "#" are comments. The sample order process has 10 steps, 11 arrows, 2 decisions and 1 loop back.

How the layout is worked out

The page follows the arrows from the first step. Each step goes one row after the latest step that leads into it, so a step reached by a short path and a long path waits for the long one. Steps in the same row are sorted by the position of the steps feeding them, which keeps branches from crossing more than they need to. An arrow that returns to an earlier step, such as "Send invoice -> Paid?", is detected as a loop. It is drawn around the outside edge of the chart and enters the side of its target, so retries stay visible without tangling the main flow.

How to read the result

• Steps counts distinct names. If it is higher than you expect, a name was typed two ways.
• Arrows counts every connection, including loops.
• Decisions counts diamonds. Every decision should normally have at least two outgoing arrows, each labelled.
• Loops back counts arrows that point to an earlier row. Zero means the process always moves forward. Several loops in a short chart often mean the process has rework worth looking at.

Top down suits a printed page or a document. Left to right suits a long, mostly linear process on a wide slide. Row spacing opens up room for arrow labels or squeezes a long chart onto one screen. Colour by Shape separates terminals, actions and questions. Colour by Row picks out the stages of a long process.

Tips for charts people actually follow

• Start every box with a verb. "Check stock" and "Send invoice" say who does what. "Stock" and "Invoice" do not.
• Ask questions with clear answers. A diamond should read as yes or no, or as a short list of options, and every exit needs a label. An unlabelled arrow out of a diamond is the most common flowchart error.
• Names must match exactly. "Pack items" and "Pack Items" are two different steps. If the chart suddenly grows a stray box with no arrows in, look for a typo.
• Keep labels plain. An arrow label cannot contain brackets or a colon, because they are read as syntax.
• Split big processes. Beyond about 15–20 steps a single chart gets hard to scan. Make a top-level chart whose boxes are sub-processes, then draw each one separately.
• One start, clear ends. Several end pills are fine, for example "Order shipped" and "Order cancelled". Two starts usually means two processes.
• Check the long names. Names are shortened with an ellipsis when a row is crowded. Hovering shows the full text, and the downloaded SVG keeps it.

Getting it out of the page

SVG stays sharp at any size and opens in design tools and most office apps. PNG is the safe choice for chat apps and slides. To rasterise an SVG at a specific size later, use SVG to PNG.

For reporting lines rather than processes, the org chart maker uses the same typed approach. For free-form links with no start or end, try the network graph maker. To put a process on a timeline with dates, use the Gantt chart maker. To brainstorm the steps before ordering them, start in the mind map maker. To show which team owns each step, use the swimlane flowchart maker; for messages between systems, the sequence diagram maker; for choices with odds and payoffs, the decision tree maker. If the diagram needs to live as Mermaid code, check it in the Mermaid live editor.

Related tools