Flowchart Maker
Write one step per line and the flowchart draws itself. A line ending in a question mark becomes a yes/no decision. Download PNG or SVG with no sign-up.
End a line with ? to make a decision. On the lines right below, write Yes: step or No: step for the branches, and put a step name after -> to connect to that step.
How to make a flowchart
- Write the steps of your process in the box above, one per line. The first line is drawn as the start and the last line as the end.
- End a step with a question mark when it needs a decision. It becomes a diamond with Yes and No arrows.
- If a branch has its own task, write "Yes: task" or "No: task" on the line right below the question.
- Pick a direction, then download the finished chart as PNG or SVG.
Rules for decisions
You do not need to know any diagram syntax. There are four rules, and the example buttons show each of them in action.
- A branch you leave out goes to the next line. Under "Is it in stock?", writing only "No: Tell the customer" sends the Yes arrow to the following line.
- A Yes branch rejoins the main path. A new step such as "Yes: Take an umbrella" is drawn and then continues to the next line. A new step on a No branch stops there.
- Using the name of an existing step connects to it. "No: Show an error -> Enter password" shows the error and loops back to the "Enter password" step. The name must match exactly.
- With no branch lines at all, Yes goes to the next line and No returns to the previous step, which fits "repeat until it passes" flows such as "Do the tests pass?".
To chain several steps on one branch, join them with arrows: "No: Tell the customer -> Refund -> Cancel order".
What it is good for
- Documenting a process — order handling, refunds or approvals are easier to follow as one picture than as a long paragraph. Paste it into a handover document or a wiki.
- Reports and assignments — draw an algorithm, a lab procedure or a user journey and drop it into Word, Google Docs or slides. The PNG has a white background, so it sits well on a page.
- Planning and development — sketch login, checkout or sign-up flows that split on conditions and share them before a meeting.
- Everyday checklists — travel preparation, moving house or a troubleshooting order work the same way.
How the symbols are drawn
Rounded boxes are the start and the end, rectangles are tasks, diamonds are decisions with Yes and No exits, and arrows show the direction of the flow. Only the most common symbols are used, so anyone can read the result. For many steps, "Left to right" suits wide slides, while "Top to bottom" suits documents and phone screens.
Writing Mermaid code directly
Open the "Mermaid code" tab and your steps are converted into Mermaid syntax. Mermaid is an open text format for diagrams, and editing the code lets you fine-tune box shapes and arrow labels. The same box also draws sequence diagrams (sequenceDiagram), which show messages between people and systems, and Gantt charts (gantt) for schedules. Start from an example button and change the names and dates.
If the code has a mistake, a message above the preview tells you which line to check, and the last good chart stays visible in a faded state so you can compare while fixing. Your text and code are saved automatically in this browser, so they are still there when you come back, and they are never sent to a server.
FAQ
Do I need to sign up or install anything?
No. It works right away with no account, and PNG and SVG downloads have no watermark.
How do I make a yes/no decision?
End a line with a question mark and it becomes a diamond. On the lines right below, write "Yes: step" and "No: step" to add the branches.
Is my text sent to a server?
No. The text is turned into a chart inside your browser, and your draft is saved only on this device.
Should I download PNG or SVG?
Use PNG to paste into documents, chats and slides. Use SVG for large prints or to keep editing in a design tool.