Flowchart maker: shapes, arrows and Yes/No labels right in your browser.
The diagram is drawn in your browser and is not sent anywhere.
What the editor can do
ISO 5807 symbols, arrows that route around shapes and stick to their sides, and Yes/No labels at decision exits. The “+” button places the next shape already connected, and Arrange lays out the whole diagram. The diagram saves itself in your browser as you work, and you can download it as PNG, SVG or PDF, or as Mermaid code.
Examples: Even or odd Largest of three Sum from 1 to N Password check
How to put a flowchart into Word or Google Docs
- Word 2019 and Microsoft 365: SVG. Insert it like any picture and the diagram stays sharp at any zoom.
- Google Docs and older Word: PNG at 300 dpi. Choose the width “A4, Word default margins” or “US Letter”, and the picture will fit the text width exactly.
- LaTeX: PDF fitted to the diagram, which \includegraphics inserts without losing sharpness.
- Fastest of all: “Copy image” in the Download window, then Ctrl+V straight into the document.
PNG and SVG files downloaded here carry the diagram inside: drag such a file back onto the sheet and keep editing.
Flowchart symbols and what they mean
The names are the same as in the shapes panel. The first five appear in almost every school task; the rest are there for diagrams that follow ISO 5807.
| Shape | Name | When to use it |
|---|---|---|
| Start / end | Start and end of an algorithm, entry and exit of a subroutine. | |
| Process | A calculation or any action: assignment, computation, a command. | |
| Decision | A condition check: the diamond has two exits, Yes and No. | |
| Input / output | Data input and output when the medium doesn't matter. | |
| Subroutine | A call to a subroutine or function described separately. | |
| Preparation | Setting up before a loop: starting values such as i = 1. | |
| Loop start | The top boundary of a loop, paired with a Loop end of the same name. | |
| Loop end | The bottom boundary of a loop; the exit condition goes into one of the two boundaries. | |
| Connector | A break in a line: the arrow continues at the connector with the same label. | |
| Off-page connector | A jump to another page. Used in textbooks; ISO 5807 has only the ordinary connector. | |
| Comment | A note on a shape, linked to it with a dashed line. | |
| Manual input | Data entered by hand, for example from a keyboard. | |
| Manual operation | An action done by a person. | |
| Document | Data on paper: a printout, a form, a report. | |
| Display | Data shown on a screen. | |
| Stored data | Data in storage when the medium doesn't matter. | |
| Internal storage | Data in main memory. | |
| Sequential access storage | Data on a medium read in order, such as tape. | |
| Direct access storage | Data on a direct-access medium, such as a disk. | |
| Punched card | Data on a punched card. | |
| Punched tape | Data on punched paper tape. | |
| Parallel mode | The start or end of actions that run at the same time. | |
| Ellipsis | A part of the diagram that isn't drawn in full. |
Flowcharts that follow ISO 5807
The ISO 5807 style in the panel sets the standard shape proportions: height a, width 1.5a, with a from 15 to 30 mm, text from 10 to 14 pt, and arrowheads either only against the flow or on every line. Shapes in this style don't grow to fit the text: if the text doesn't fit, a hint says so.
The hints icon shows where the diagram departs from the standard: a decision with fewer than two exits, an unlabelled exit, a shape without an input or output, no start or no end.
A diagram from Mermaid code
Ask a chatbot to draw a flowchart in Mermaid code and paste the whole answer, even with text around the code, using “Paste code” or Ctrl+V right on the sheet. Shapes, arrows and labels come across, and the layout is done for you. To go back, use “Copy Mermaid code” in the Download window.
Keyboard
- Enter — edit the shape's text
- Ctrl + Enter — finish the text and place the next shape
- Ctrl + ←↑→↓ — a connected shape in that direction
- ←↑→↓ — move the selection
- Shift + ←↑→↓ — move it in bigger steps
- Ctrl + Z, Ctrl + Shift + Z — undo and redo
- Ctrl + D — duplicate
- Delete — delete
- Space + drag — move the sheet
- Ctrl + mouse wheel — zoom
To check the algorithm itself in code, try the Python sandbox.
Frequently asked questions
Is there a watermark?
No. PNG, SVG and PDF files download clean, with no watermark and no sign-up.
Where are my diagrams stored?
Only in your browser; nothing is sent to a server. The browser may delete site data when space runs low or if the site hasn't been opened for a long time, so download important diagrams as a file: “Download diagram file” in the Download window or in My diagrams.
Does it work on a phone?
Yes. Drag a shape with your finger, drag an empty spot to move the sheet, and pinch to zoom. A double tap opens text editing, a long press opens the actions menu, and the shapes are in the panel at the bottom.
How do I make a flowchart that follows ISO 5807?
Choose the ISO 5807 style, set the size a and the font, and check the diagram with the hints. For a report or thesis, download PNG at 300 dpi or SVG.
Why can't I select the text in the PDF?
In the PDF the letters are drawn as outlines, so the diagram looks the same on any computer, even without our fonts. If you need selectable text, download SVG with “Keep text as text” ticked.
Which languages can I write in the shapes?
Any language of the site, including right-to-left scripts and Chinese and Japanese characters: Noto fonts load for your text. Urdu is written in Naskh letters rather than Nastaliq, because a Nastaliq font weighs more than a megabyte. Emoji and characters of other scripts come out in the system font in PNG and are left out of PDF, and the Download window warns you.
How large can a diagram be?
There is no limit. A diagram with 200 shapes and 300 arrows moves smoothly even on a slow phone: while you drag, arrows are drawn as simple bends, and the exact path is routed when you let go of the shape.
Is it free to use?
Yes, completely free and no sign-up needed. The tool runs entirely in your browser: the file never goes to a server, so the server spends neither CPU nor traffic — there is nothing to charge for. No watermarks, no limits on file size or count.