FREE · DIAGRAM TOOLS
Flowchart Maker.
Make flowcharts online from text or with the add-step form: decisions, loops and process steps, exported as SVG or PNG.
How to use Flowchart Maker
Start from a flowchart template, then add steps with the form or edit the code. Connect each new step to an existing one, choose its shape and arrow text, and export the finished flowchart.
How it works
Flowcharts are drawn with Mermaid flowchart syntax and laid out automatically, so you never drag boxes into place. Rendering uses the open-source Mermaid library in your browser with its strict security level, so links, scripts and HTML in labels are disabled. Drafts are saved in this browser only; share links store the compressed code in the part of the URL after #, which browsers do not send to the web server. Exports contain only what you drew.
Example
Start → Receive order → In stock? → Yes: Pack items / No: Notify customer → Ship parcel → End.
How to make a flowchart online in four steps
- Choose a template: a decision flowchart, a left-to-right process or a login logic diagram.
- Add steps with the “Add a step without writing code” form. Pick the step to connect from, type the new step text, choose a shape and optionally write arrow text such as “Yes” or “No”. The new step becomes the next starting point, so you can chain a whole process quickly.
- Refine the code directly when you want: rename labels, change the direction from
TDtoLR, or highlight a step with a style. - Pick a theme and export the flowchart as SVG or PNG, or copy it as a Markdown block for documentation.
The layout is automatic. You never align boxes or reroute arrows by hand — add a step and the whole chart reorganises itself.
Flowchart symbols and their meaning
Standard flowchart symbols come from the ISO 5807 tradition. The form’s Shape menu covers the most useful ones:
| Shape | Code | Meaning |
|---|---|---|
| Stadium (terminal) | id([Start]) | Start or end of the process |
| Rectangle | id[Do something] | A process step or action |
| Diamond | id{Question?} | A decision with two or more outgoing branches |
| Parallelogram | id[/Enter data/] | Input or output, such as a form or a report |
| Cylinder | id[(Database)] | Stored data |
| Subroutine | id[[Validate address]] | A predefined process described elsewhere |
| Circle | id((A)) | Connector or a short event |
| Hexagon | id{{Prepare}} | Preparation or setup step |
Arrows, branches and loops
| Arrow | Code | Use it for |
|---|---|---|
| Solid arrow | A --> B | The normal flow |
| Arrow with text | A -->|Yes| B | Decision branches |
| Dotted arrow | A -.-> B | Optional, delayed or exceptional flow |
| Thick arrow | A ==> B | The main path you want to stress |
| Line without arrow | A --- B | Association without direction |
A loop is simply an arrow back to an earlier step, for example review -->|Changes needed| draft. Every decision should label all of its outgoing arrows so readers never have to guess which branch is which.
Tips for clear flowcharts
- Start each step with a verb: “Check stock”, “Send invoice”.
- Keep one level of detail per chart. If a step hides ten sub-steps, draw them in a second chart and use a subroutine shape.
- Prefer top-down for algorithms and left-to-right for processes shown on slides.
- Use one start and as few end points as possible.
- Colour only what matters, for example error paths, with
classDef.
Need roles and hand-offs between teams? Switch to the Workflow Diagram Maker, which uses swimlanes.
Why build flowcharts from text?
Text flowcharts are faster to change than drawings: renaming a step or inserting one in the middle takes seconds and the layout follows. The source is small, works in version control and can be pasted into GitHub or GitLab, where reviewers see the rendered chart. Download SVG for documents, websites and slides that need sharp lines at any size, or PNG at 1× to 4× resolution for chat apps, tickets and tools that do not accept SVG. The background can match the theme, be white or be transparent.
Rendering happens in your browser with the open-source Mermaid library. Your code is not uploaded, drafts are kept in this browser’s local storage, and a share link stores the compressed diagram after the # sign, which browsers do not send to the web server.
Questions about Flowchart Maker
Can I make a flowchart without knowing Mermaid?
Yes. Start from a template and use the add-step form: choose where to connect, type the text and choose a shape. The code is written for you and you can learn the syntax by watching it change.
How do I add a yes/no decision?
Add a step with the diamond shape, then add two steps connected from it with the arrow texts “Yes” and “No”. The “+ Decision” insert button adds a ready-made diamond with both branches.
Can I put the flowchart in Word, Google Docs or PowerPoint?
Yes. Insert the downloaded PNG, or the SVG in applications that accept SVG images, such as current Microsoft 365 versions. Use a 3× or 4× PNG for print.
Is there a limit on the number of shapes?
The editor accepts up to 50,000 characters and 800 connections. Very large charts become hard to read long before that; split them into several linked charts.
Is the flowchart maker free?
Yes, with no account, no watermark and no upload of your diagram.
Is Flowchart Maker free, and do I need an account?
Yes. This tool is free to use in your browser without an account. Processing takes place on your device.
What are the limits and what should I check?
Up to 50,000 characters of Mermaid code and 800 connections. PNG export up to 32 megapixels. Share links are limited to diagrams that compress to about 12,000 characters. Mermaid 11 syntax; no real-time collaboration or cloud storage. Review the result before using it in your work.
Is my input sent to a server?
Your input is processed in your browser and is not uploaded by this tool. Files and pasted text are cleared when the page is refreshed. Normal website requests are still required to load the page and its libraries. Read the privacy explanation.