Answer: Type your process one step per line, using start:, end:, ? for decisions and > for input or output, and a standard flowchart draws itself as you type. Download it as an SVG. It's free, there's no signup, and your steps are saved only in this browser.
Describe the process as a list, get a proper flowchart with real symbols
start: / end: terminators · ? Q decision (next line = yes path) · ? Q | Target no branch jumps to Target · .step branch-only (no arrow in from above) · > step input/output · # comment
| Symbol | Shape | Means | Example |
|---|---|---|---|
| Terminator | Rounded rectangle | Start or end of the flow | "Start: order received" |
| Process | Rectangle | An action or step | "Charge the card" |
| Decision | Diamond | A yes/no question | "Card approved?" |
| Input / Output | Parallelogram | Data entering or leaving | "Email receipt sent" |
| Flow arrow | Directed line | Order of steps | Yes/No labeled exits |
| Document | Wavy-bottom rect | A printed or filed doc | "W-4 filed" |
| Connector | Small circle | Jump to another page | "A" on page 2 |
The first five symbols follow the ANSI/ISO conventions drawn in every process diagram since the 1970s. They're what readers expect, and the exotic shapes rarely earn their complexity. This tool draws those five. Document and connector shapes aren't drawn, so describe a document step in words instead, like "> W-4 filed".
The left pane takes a plain-text description of a process; the right renders it with standard symbols. Every line is a step. A leading ? makes it a decision diamond whose yes path continues to the next line, and | Target on that line aims the no branch at a later step by name, which is how loops and rejections are drawn. The result is an SVG you can download and drop into documentation, a wiki page, or a slide.
Write the happy path first, top to bottom, in short verb-first steps. Then go back and add the decisions, asking at each step "what could go differently here?" and marking those with ?. Keep every box under about eight words; if a step needs a paragraph, it's really three steps. End every branch somewhere explicit, even if it's just an end: line with a different label, because open-ended branches are where readers get lost.
The default chart shows a refund flow in five lines: a terminator, a data lookup, one decision with a named no-branch target, an action, and an end. The hiring sample shows a longer pattern, with two decisions in sequence and a rejection path that exits early. Both were written in under a minute, which is the point: the fastest flowchart is the one you can draft while the process is still fresh.
Every line becomes one shape. The first character decides which one, and anything that isn't a prefix is treated as a process step.
| You type | You get | Notes |
|---|---|---|
start: Order received | Green rounded terminator | Use once, at the top |
end: Order shipped | Red rounded terminator | One per branch is fine |
Charge the card | Process rectangle | Plain text, no prefix |
> Email receipt | Input/output parallelogram | For data coming in or going out |
? Card approved? | Notify customer | Yellow decision diamond | Next line is the Yes path; text after | is the No target |
.Notify customer | A step with no arrow coming in from above | Use for the start of a No branch |
# note to self | Nothing | Ignored, so use it for comments |
end: line gets an arrow from that end unless it starts with a dot. Start every No branch with .| has to match the target step's text exactly, though capitals don't matter. "Send rejection" won't find "Send a rejection".The chart is always 440 pixels wide and grows downward. Each ordinary step adds 74 pixels and each decision adds 102, so you can tell in advance whether it'll fit on a slide or a page.
| Steps | Of which decisions | SVG height | Fits on |
|---|---|---|---|
| 5 | 0 | 404 px | A slide, comfortably |
| 7 | 1 | 580 px | A slide (the default refund example) |
| 10 | 2 | 830 px | A document page |
| 15 | 3 | 1,228 px | A page, scaled down a little |
| 20 | 4 | 1,626 px | A wiki or a long scroll |
| 25 | 5 | 2,024 px | Time to split it into sub-flows |
SVG scales without blurring, so a tall chart can still be shrunk onto a page. Past about 15 steps, though, the text gets small enough that splitting the process into a main flow and a couple of sub-flows reads better.
Five cover almost everything: a rounded terminator for start and end, a rectangle for a process or action, a diamond for a decision, a parallelogram for input or output, and an arrow for flow direction. Document, database, and connector symbols exist for specialized diagrams, but mixing in too many shapes is the fastest way to make a chart nobody reads.
One step per line. Plain lines become process rectangles. Start a line with start: or end: for terminators, with ? for a decision diamond (the next line is the yes path), and with > for input or output. Add | Target step after a decision to point the no branch at a later step by name. Lines starting with # are ignored.
One clear start, decisions that always have two labeled exits, verbs in every box, and no more than around 15 steps on one page. If the chart needs a legend longer than the chart, split it into a main flow plus sub-flows. Test it by walking a real example through every branch with your finger.
When the order of operations can change based on conditions. A checklist assumes every step happens every time in sequence; a flowchart earns its keep the moment someone asks "but what if it fails validation?" If your process has no branches, a checklist is honestly the better tool.
Yes, that's what the decision branch is for. Partly. The no branch can only draw an arrow to a step further down the list. So ? Form valid? | Fix errors works when a .Fix errors line comes later. If the target is earlier, or the name doesn't match, the chart shows a short red "No → Fix errors" label instead of an arrow, which still reads as a loop back. Every retry loop should have an obvious exit.
The download is an SVG file. Word, PowerPoint, Google Docs, Confluence and most browsers display SVG directly, and it stays sharp at any size. If you need a PNG, open the SVG in a browser and take a screenshot, or open it in any image editor that reads SVG and export from there. The SVG isn't a native Visio or draw.io diagram, so it can't be edited shape by shape in those tools.
Your step list is saved in this browser's local storage, so it's still there when you come back on the same device. Nothing is sent to a server, so it won't appear on another computer, and clearing your browser data removes it. Keep a copy of the text somewhere if the chart matters, because the text is all you need to redraw it.