A free online flowchart maker with real shapes and smart arrows
This flowchart maker lets you build a proper process diagram in minutes: drop in start/end pills, process boxes, decision diamonds, input/output parallelograms, documents and database cylinders, then drag from a shape’s handle to another shape to connect them with an arrow. Arrows stay attached when you move things, and they can be straight or neat elbow connectors with a label such as “Yes” or “No”.
Everything is drawn as SVG, so the chart is crisp at any zoom and exports as a sharp PNG or an editable SVG file. A JSON save keeps the chart fully editable, and an “Export as Mermaid” option turns the drawing into flowchart TD text that you can paste into GitHub, Notion, Obsidian or the Mermaid Diagram Editor and keep editing as code.
The chart autosaves in your browser as you work and never leaves your device, which makes it suitable for internal processes, interview prep, standard operating procedures and anything else you would rather not upload to a diagramming service.
How to use the Flowchart Maker
- Click a shape in the top row to add it at the centre of the canvas, or drag it onto the canvas to place it exactly. Double-clicking an empty spot adds a process box there.
- Double-click any shape and type its text. Press Enter to finish, or Shift+Enter for a new line; boxes grow taller to fit.
- Hover over a shape and drag one of its four blue handles onto another shape to connect them. The arrow attaches to the nearest side of the target.
- Click an arrow and press “Label” to add text such as Yes or No. Choose “Elbow arrows” or “Straight arrows” for new (and selected) connectors.
- Drag a box around several shapes (or Shift+click) and use “Align…” to line up edges or centres or to space them out evenly. “Snap to grid” keeps everything on a 20 px grid.
- Export with the buttons under the canvas: PNG for slides and documents, SVG for crisp printing or further editing, JSON to reopen here later, Mermaid to continue as text.
Flowchart Maker features
Six standard flowchart shapes
Terminal (start/end), process, decision, input/output, document and database, drawn with the conventional outlines and soft colour coding so the chart reads correctly at a glance.
Port-based connectors
Arrows start from a specific side of a shape and end on the nearest side of the target. Elbow connectors route in horizontal and vertical segments; straight connectors go point to point. Labels sit on a small white tab at the midpoint.
Select, move, align, snap
Single-click, Shift+click or rubber-band selection; drag to move whole groups; arrow keys nudge by a grid step (Shift for 1 px); align left/right/top/bottom/centres and distribute evenly.
Undo and redo
Up to 100 steps covering every move, edit, connection, deletion, alignment and import. Ctrl+Z, Ctrl+Shift+Z and Ctrl+Y work alongside the buttons.
Four export formats
PNG at 2× resolution with a white background, standalone SVG, editable JSON, and Mermaid flowchart text with the right bracket syntax for each shape.
Autosave and touch support
The chart, zoom level and settings are stored in your browser after every change. Pointer events make dragging work with a mouse, trackpad, finger or stylus.
What each flowchart shape means
Flowchart symbols are standardised in ISO 5807 and the earlier ANSI templates, and most people recognise them even if they have never read the standard. Using them consistently makes a chart far easier to follow.
| Shape | Symbol | Use it for | Mermaid syntax |
|---|---|---|---|
| Start / End | Rounded pill | Where the process begins and the possible ways it ends | id([Text]) |
| Process | Rectangle | A single action or step: “Validate address”, “Send invoice” | id[Text] |
| Decision | Diamond | A question with two or more labelled exits: “Approved?” | id{Text} |
| Input / Output | Parallelogram | Data entering or leaving: a form, a report, a message | id[/Text/] |
| Document | Wavy-bottom rectangle | A printed or generated document, contract or receipt | id@{ shape: doc, label: "Text" } |
| Database | Cylinder | Stored data: a table, a file store, a CRM record | id[(Text)] |
Keyboard shortcuts
- V select mode · H or hold Space to pan · scroll or pinch to zoom.
- Enter edits the selected shape or connector label · Esc cancels or clears the selection.
- Delete / Backspace removes the selection (connectors attached to a deleted shape go with it).
- Ctrl + A selects every shape · arrow keys nudge by one grid cell, with Shift by one pixel.
- Ctrl + Z undo · Ctrl + Shift + Z or Ctrl + Y redo.
Tips for a flowchart people actually read
- Flow top to bottom or left to right; let “Yes” continue downward and “No” leave sideways.
- One verb per process box. If a box needs a paragraph, it is really several steps or belongs in a separate chart.
- Label every exit of a decision so no arrow is ambiguous, and use “Align…” and the grid so columns and gaps stay even.
- Rough it out on the Online Whiteboard or in the Mind Map Maker, then build the clean version here and export it as Mermaid for a colleague to revise as text.
Flowchart Maker FAQ
Is this flowchart maker free, and do I need to sign up?
Yes, it is free and there is no account. Open the page, add shapes and export whenever you like. The chart is saved in your browser between visits.
How do I connect two shapes with an arrow?
Hover over (or tap) the first shape so its four blue handles appear, then drag a handle onto the second shape and release. The arrow attaches to the nearest side. Click the arrow and press “Label” to add text.
Can I export the flowchart as an image?
Yes. “Export PNG” downloads a 2× resolution PNG with a white background, and “SVG” downloads a vector file that stays sharp at any size and opens in Inkscape, Illustrator or Figma.
What is the Mermaid export for?
Mermaid is a text format for diagrams that renders in GitHub, GitLab, Notion, Obsidian and many wikis. The export writes a flowchart TD block with the correct bracket syntax for each shape and labelled arrows, so you can keep editing the chart as code.
Can I reopen a chart later or on another computer?
The chart autosaves in the browser you used. To move it, press “JSON” to download a file, then “Open .json” on the other device; the file keeps shapes, text, connectors and labels fully editable.
Why do my arrows bend?
“Elbow arrows” route in horizontal and vertical segments, the usual convention in process diagrams. Switch the connector style to “Straight arrows” for point-to-point lines; changing the setting while an arrow is selected restyles that arrow.