How to use the Flowchart Maker Online
- 1. Start from an examplePick a login flow, a decision or a loop, or start typing.
- 2. Edit the stepsChange the text of boxes and arrows. The preview updates as you type.
- 3. Download itSave the flowchart as a sharp PNG or a scalable SVG.
Flowchart syntax in two minutes
This tool uses Mermaid, a popular text-to-diagram language that GitHub and many documentation tools also understand. The first line sets the direction: flowchart TD (top to bottom) or flowchart LR (left to right). Then each line links two shapes:
A[Process]— rectangle for a stepB{Decision?}— diamond for a yes/no questionC([Start])— rounded box for start and endD[/Input/]— parallelogram for input or outputA --> B— arrow, andA -- Yes --> B— labelled arrow
Give each shape a short ID such as A or Check and reuse the ID to connect to it again. That is how you draw loops back to an earlier step.
Example: sum of 1 to N
The "Loop: sum 1 to N" example shows how a for loop looks as a flowchart: read N, set sum = 0 and i = 1, check i <= N ?, add i to sum, increase i, and go back to the check. When the check is No, print the sum. For N = 4 the flow goes round four times and prints 1 + 2 + 3 + 4 = 10.
Flowcharts help you plan logic before you write code, and many school and university exams still ask for them. Good habits:
- One start and one end symbol.
- Every diamond has exactly two exits, labelled Yes and No.
- Keep box text short; detail belongs in code comments.
Labels are drawn as plain SVG text, so the PNG export works in every modern browser.
Frequently asked questions
Do I need to learn Mermaid first?
No. Start from an example and change the words. The hint under the editor lists every shape you need for school-level flowcharts.
Why does it say Diagram error?
A bracket or arrow is probably incomplete. The message shows where Mermaid got stuck; the last good diagram stays on screen until you fix it.
Is the diagram made on your server?
No. Mermaid runs in your browser, loaded from the cdnjs public CDN. Your text is not uploaded.
Is the flowchart maker free?
Yes, completely free. Drawing and editing need no form. When you download your first PNG or SVG we ask for your name and WhatsApp number, once for all Uncodemy tools.