Online Flowchart

📖 About this tool

Drawing a flowchart in a design suite is heavy, and doing it on paper is hard to revise. This tool takes plain text and turns it into a tidy flowchart: one step per line, a question mark at the end of a line makes it a decision, and indenting a line turns it into a branch. Change the text and the diagram follows, with no boxes to drag around.

It suits approval flows in a report, the steps of a sign-up funnel, explaining a debugging routine to a colleague, or sketching conditional branches from code for a non-technical audience. Export a PNG to paste into a document, or an SVG to keep sharp on a web page.

Because the diagram is generated from text rather than drawn by hand, it stays consistent when the process changes. Insert a step in the middle and every later node moves down by itself, so there is nothing to realign. The same text can be pasted into a ticket, a chat message or a comment, which makes it easy for someone else to reproduce exactly the picture you are looking at. If you work with processes that change often, keeping the source text in your repository and regenerating the image before each release is usually less work than maintaining a drawing file.

The tool draws every node on a grid, so connectors are straight and evenly spaced instead of wandering across the canvas. Decision diamonds are sized to fit their label, and branch labels sit beside the connector rather than on top of it, so nothing overlaps even when the wording is long. You can turn step numbers on when you plan to walk someone through the diagram out loud, and leave them off when the picture needs to look clean in a slide.

✨ Features

• Text becomes the diagram: one step per line, indent for branches, edits show up at once.
• Decisions detected automatically: a line ending in a question mark is drawn as a diamond.
• Labelled branches: write "No -> Return" and the condition appears on the connector.
• Two layouts: top-to-bottom for long flows, left-to-right for wide screens.
• Four palettes: blue, green, grey and orange, all safe inside most documents.
• Numbers and arrows: optional step numbers and arrowheads make it easier to talk through.
• Three exports: PNG for documents, SVG for the web, JSON to edit again later.

🚀 How to use

1. Type the steps into the left box, one step per line.
2. Add a question mark at the end of any line that is a decision; it becomes a diamond.
3. Indent branches by two or four spaces, optionally as "No -> Return for correction".
4. Pick the direction, shape style and palette, then adjust font size and spacing.
5. Click Generate. The flowchart appears on the right with node and branch counts.
6. Download a PNG or SVG, or copy the SVG markup to paste elsewhere.

⚠️ Notes

• Do not skip indent levelsBranches must sit exactly one level below their parent; two levels down will break parsing.
• Decisions rely on the question markOnly a trailing question mark makes a diamond; one in the middle of the line does not.
• Branch labels use an arrowWrite "condition -> step" with spaces around the arrow for reliable detection.
• The canvas grows with contentVery long flows produce a tall image; consider splitting into several diagrams.
• Local onlyYour text never leaves the browser, and the page does not keep it, so save what you need.