Flowchart Maker

Write steps as text and get an auto-laid-out flowchart; export SVG/PNG.

About this tool

Write one connection per line, such as start(Start) -> ask{Raining?} and ask -> umb[Take an umbrella]: yes. Square brackets make process boxes, round brackets make start and end pills, curly braces make decision diamonds, double round brackets make circles and [/text/] makes an input or output shape. The chart lays itself out from top to bottom with arrows and labels, and loops back to earlier steps are drawn as curves.

How to write a clear flowchart

A flowchart shows a process as a sequence of steps and decisions, which makes it a good way to document procedures, plan program logic, explain a support process or check that a policy covers every case. Conventional shapes help people read them quickly: rounded terminals for start and end, rectangles for actions, diamonds for yes-or-no questions, and slanted boxes for inputs and outputs. Each decision should have one arrow per answer, labelled clearly. Describing the chart as text instead of drawing it means you can concentrate on the logic, edit by retyping, keep the source in a document or version control, and let the layout take care of positions. Give each step a short id the first time it appears with its label, then refer to it by the id alone; you can chain several arrows on one line. The syntax is close to Mermaid's flowchart notation, so simple Mermaid diagrams often work as they are. Honest limits: the automatic layout uses simple layering, so very large or highly interconnected charts can produce crossing lines; split them into sub-processes. Subgraphs, styling commands and left-to-right layout aren't supported. The mind map maker and the org chart maker turn outlines into diagrams, and the Gantt chart maker plans timelines.

Frequently asked questions

What shapes can I use?

[Box] for steps, (Text) for start and end, {Question?} for decisions, ((Circle)) for connectors and [/Text/] for inputs and outputs.

How do I label an arrow?

Add a colon and the label at the end of the line: ask -> yes_step[Do it]: yes

Does it work with Mermaid syntax?

Simple flowcharts usually do: node shapes and arrows use similar notation. Subgraphs and styles aren't supported.

Is my data saved?

No. The chart is drawn in your browser and nothing is stored or sent.