To make a flowchart online for free, open the Flowchart Maker, type your process as short Mermaid lines — one step per line, decisions in curly braces, arrows between them — and watch the diagram draw itself in the live preview as you type. Download it as SVG or PNG when it reads clearly. This guide explains the syntax, then builds a complete returns process step by step.
Flowcharts fail in a predictable way when they are drawn by dragging boxes. The first version looks tidy, then somebody adds a step, then a decision gains a third answer, and soon the arrows cross, the boxes no longer line up, and updating the diagram feels harder than redrawing it from scratch. Typing the process solves that maintenance problem. Text is easy to edit, easy to diff, easy to paste into a ticket, a wiki page or a handover document, and easy to regenerate when the process changes next month. That is the real advantage of a Mermaid-based maker: the diagram is a by-product of a clear written process, so if you cannot type it, the process itself is probably not clear yet.
How to Make a Flowchart Online, Step by Step
- Open the maker. Go to the Flowchart Maker and start from a template if one fits: flowchart top-to-bottom, flowchart left-to-right, sequence, class, state, ER diagram, Gantt chart or user journey map.
- Write the start point. Use a round start such as A((Text)) with a short label like Customer requests return. Every letter is a reusable ID, so keep IDs short and in order.
- Add one step per line. Write normal steps with square brackets, such as B[Check order date], then connect them with arrows in the form A --> B.
- Turn questions into decisions. Use curly braces, such as C{Within 30 days?}, and give each answer its own labelled arrow, so nobody has to guess which branch means yes.
- Watch the preview and fix errors early. The diagram previews live as you type, and parse errors are shown under the preview. Fix the first error, then continue, rather than typing twenty lines and hunting through all of them.
- Pick a theme and export. Choose Default, Neutral, Dark, Forest or Base, then Download SVG, Download PNG, or Copy SVG code. For print, choose the white-background PNG option so the diagram does not carry a dark panel onto paper.
The Syntax You Actually Need
Most useful flowcharts need only four ideas. A step is a letter ID plus square brackets: A[Text]. A decision swaps the brackets for curly braces: B{Text}, and it should always contain a question that can be answered. A round start or end point uses double round brackets: C((Text)), which visually separates the beginning and end of the process from the work in the middle. An arrow connects two IDs, A --> B, and a labelled arrow explains a branch, for example C -- Yes --> D. Letter IDs can be reused anywhere, so a shared final step such as Close return case can be pointed to from several branches without duplicating its wording. If you keep labels short, keep one idea per box and keep decisions as questions, the diagram stays readable even when the underlying process is not simple. For polished written documents around the diagram, our text editor is a handy drafting companion, and our chart maker covers the numbers side when a process review also needs data.
| Shape in text | Example | Meaning | Use it for |
|---|---|---|---|
| Square brackets | A[Check order date] | Process step | Work that someone or some system does |
| Curly braces | C{Within 30 days?} | Decision | A question with two or more labelled answers |
| Double round brackets | A((Customer requests return)) | Start or end | Where the process begins and where it closes |
| Arrow | A --> B | Flow | The order in which steps happen |
| Labelled arrow | C -- Yes --> D | Branch | The answer that leads to the next step |
Worked Example: A Returns Process Flowchart
Here is the complete returns process used throughout this guide, exactly as you would type it into the tool. Count the lines: this flowchart example has 12 lines, the sequence example below has 9 lines, and the Gantt example has 10 lines — those are the three bars in the chart that follows.
flowchart TD
A((Customer requests return)) --> B[Check order date]
B --> C{Within 30 days?}
C -- Yes --> D[Send return label]
C -- No --> E[Offer store credit]
D --> F[Receive returned item]
E --> F
F --> G{Item undamaged?}
G -- Yes --> H[Refund to original payment]
G -- No --> I[Contact customer about condition]
H --> J((Close return case))
I --> J
Read what the code teaches. Both branches of the 30-day decision rejoin at the same receive step, which is why reusing the letter F matters: there is one receiving process, not two. The second decision handles condition, and both of its outcomes end at the same closing step J. If your own diagram has two boxes with identical wording, that is a sign they should be one box with two arrows arriving. If a decision has an unlabelled arrow leaving it, that is a sign a reader will ask a question you could have answered in the diagram itself.
Lines of code in the three worked examples in this article — hover or tap each bar for details.
The Same Process as a Sequence Diagram and a Gantt Chart
A flowchart answers what happens in what order. Two neighbouring diagram types answer different questions about the same returns process. A sequence diagram answers who talks to whom, which is what support and integration teams argue about:
sequenceDiagram
participant Customer
participant Shop
participant Courier
Customer->>Shop: Request return
Shop->>Customer: Send return label
Customer->>Courier: Hand over parcel
Courier->>Shop: Deliver returned item
Shop->>Customer: Confirm refund
A Gantt chart answers when things happen, which is what planning needs. This Gantt example has 10 lines and turns the same returns stages into a simple dated plan:
gantt
title Returns Process Timeline
dateFormat YYYY-MM-DD
section Intake
Receive request :a1, 2026-10-01, 1d
Check eligibility :a2, after a1, 1d
section Fulfilment
Ship return label :b1, after a2, 1d
Inspect item :b2, after b1, 2d
Issue refund :b3, after b2, 1d
Class diagrams describe the structure of software, state diagrams describe how one thing changes state, ER diagrams describe database tables and their relationships, and a user journey map describes what a person experiences stage by stage. None of them replaces a flowchart; each one is the right tool for a different conversation. Teams planning site work often pair a flowchart with the checks in our website launch checklist, and teams planning content pair journey maps with our guide to creating a website content calendar, because both pair a visual sequence with the written work behind it.
Themes, Downloads and Sharing the Diagram
Themes change presentation, not meaning. Default is the safe general choice, Neutral suits formal documents, Dark suits dark slides and dashboards, Forest gives a softer green palette, and Base is a plain starting point when a diagram will be restyled elsewhere. Export with the audience in mind. SVG is the best default for documents, websites and slides because it scales without blurring, and Copy SVG code lets you place that vector markup directly where a site accepts it. PNG is the practical choice for tickets, chat threads and tools that only accept images, and the white-background PNG option matters whenever the destination is paper or a light page. Save the Mermaid text as well as the picture: the text is the editable source, and six months from now you will be glad you kept it.
Five Mistakes That Make Flowcharts Hard to Read
- Paragraphs inside boxes. A box should hold a short action, not a policy document. Put the detail in the document under the diagram and keep the box to a verb and a noun.
- Decisions without questions. A diamond labelled Eligibility tells nobody what is being decided. Within 30 days? can be answered; Eligibility cannot.
- Unlabelled branches. Every arrow leaving a decision needs its answer on it, otherwise the reader must guess which path is yes.
- Duplicated steps instead of reused IDs. Two identical boxes drift apart when one gets edited. Reuse the letter ID and keep one source of truth.
- Typing the whole diagram before checking the preview. Parse errors are easiest to fix on the line that caused them. Build in small pieces and let the live preview confirm each one.
Conclusion: Type the Process Clearly and the Diagram Follows
A good flowchart is mostly good writing: short steps, honest decisions, labelled branches and a clear start and end. Type that into the Flowchart Maker, check the live preview, and download SVG or PNG — and when the process changes, edit the text instead of wrestling with boxes.
Mapping a process that needs to become a real web app or workflow? Book a free consultation with Asad Webs — share your flowchart and tell us where the handoffs break down, and we will reply with honest next steps and an indicative quote, with no obligation.
Frequently Asked Questions
What is Mermaid in plain language?
Mermaid is a small text language for diagrams. Instead of dragging boxes onto a canvas, you type lines that describe steps, decisions and arrows, and the software draws the diagram from those lines. Changing the process means editing text, which is why flowcharts written this way are easy to revise, copy and store alongside the document they belong to.
What is the difference between A[Text] and B{Text}?
Square brackets make a normal process step, written as A[Text]. Curly braces make a decision diamond, written as B{Text}, which should ask a question with labelled answers leaving it. Round shapes for start and end points are written as C((Text)). The letter before the brackets is a reusable ID, so you can connect the same step from several places without typing its label again.
How do I add a label to an arrow?
Write the label between the arrow parts, for example C -- Yes --> D for a decision answer, or A -->|Sends email| B in the other common form supported by Mermaid. Keep labels short: Yes, No, Approved or Rejected usually say everything a reader needs, and long labels make the diagram harder to follow on a phone.
Why does my diagram show a parse error?
The tool shows parse errors under the preview, and the usual causes are an unclosed bracket, a missing arrow, a label containing a bracket or brace character, or a decision written with square brackets so the next line does not make sense. Fix one line at a time, starting with the line the error points to, and the preview updates live as you type.
Should my flowchart run top to bottom or left to right?
Top to bottom suits processes a reader follows in time, such as approvals, returns and onboarding, because it reads like a page. Left to right suits pipelines and handovers between teams, especially when the diagram will sit wide on a presentation slide. The tool offers both as templates; the content is identical, only the direction changes.
Can I use the flowchart maker for diagrams other than flowcharts?
Yes. The same Mermaid engine supports sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts and user journey maps. A sequence diagram is better when the point is who talks to whom, a Gantt chart is better when dates matter, and an ER diagram is better for database tables. Choose the diagram that matches the question, not the one you learned first.
Should I download SVG or PNG?
Download SVG when the diagram will go into a document, a website or a slide that may be resized, because SVG stays sharp at any size. Download PNG when a tool only accepts images or when you need a fixed picture for a ticket or chat thread, and choose the white-background PNG option if the diagram will be printed or pasted onto a light page. Copy SVG code is useful when you want to embed the vector markup directly.
Be the first to share a useful question or thought.