Designer Flow Chart

How to use

Add something	Click anything in the left list. It lands on the canvas, already selected.
Build a storyboard	Add a Storyboard, keep it selected, then click Button, Text, Image, Section — each one drops inside the storyboard and belongs to it. Drag them where you want.
Shape vs category	Two separate things on the right. Shape is what it looks like. Category is what you call it — type anything you like ("Storyboard section", "Legal step", "CRM field"). The category is what the written export prints.
Unclassified shapes	The Plain shapes list at the bottom of the palette adds shapes with no category at all. Give them your own.
Ref and Title	Every shape has two labels above it. Ref sits on the left — that is what numbering fills in (Step 1, A1). Title sits on the right — your own name for it, and it can stay blank. Text inside is the third thing: the words in the shape itself.
Number it all at once	In the Numbering drawer, ✨ Number it all for me follows the arrows from wherever the flow starts and does the lot: the main line becomes steps, each branch off a step becomes a rule under it, and whatever a rule leads on to becomes an outcome. A box is one step and its parts become a, b, c. Anything hanging off on a dashed arrow — saves to, notifies — is left alone, because it is a side note, not a step. A sticky note on its own, with no arrow touching it, is left alone too — it is a general comment about the flow, not a step in it. Change any of them by hand afterwards.
Numbering part of a flow	“Number it all” starts in the Numbering drawer says where it begins: at the beginning of the flow, or at the shape I have selected. Pick the shape first, then press the button — everything before it keeps the numbers it already has, and everything from that shape onwards is redone. If the shape you pick is already a Step, it keeps that number and counts on from there; if it is not, it becomes the next step after the highest one still numbered.
Start from something	File ▾ → ✨ Start from something… opens a set of flows already drawn and already numbered: a sign-up and first payment, a new client, quote to invoice, a complaint, something made wrong, a web page, a campaign, a training map, hiring. Open one and change it — none of it is precious.
Snapping a screen	The whole thing in six presses. 📸 Snap opens the drawer. ▶ Choose a screen to work on — the browser asks which window or screen, and it stays picked. The moment you pick it, the whole screen is taken and opened here, in the editor, without you going anywhere. In the editor you say which step the picture is for from the list along the bottom, box the part you want with ✏ Draw the box, cover anything private, put your stickers on, and press ✓ Done — next step. That saves it and moves you to the next one along the chain by itself — Step 1, its rules, each rule's outcomes, then Step 2. Go and do that bit in the other window, come back, and right-click anywhere on the canvas for the next shot. ✓ Done — stay on this one saves without moving on, and Ctrl+V pastes a picture from the clipboard instead, with no sharing at all. Double-click any picture to open it full size.
Editing the screen	Every shot opens in the editor, over the picture as it was taken — nothing is moving any more, so nothing can drift. The step it belongs to is a row of buttons along the top: click a different one and that is where the picture goes; the ones that already have a picture are marked. ▶ Back to the live screen (the space bar, or a scroll-click) drops you back onto the screen as it is right now if you caught the wrong moment, and ❄ Freeze it here grabs that moment instead. ✏ Draw the box is the quickest way to say what you want: drag a box round that part of the screen and everything outside it is dropped when you press Done. The wheel zooms, the arrow keys nudge a pixel at a time (hold Shift for twelve), hold Shift and move resizes the box from its centre, and Whole screen puts it all back. Untick Open each picture to edit it in the drawer if you would rather the whole screen went straight onto the step.
Stickers, before the shutter	Along the bottom of the aimer: Click here (a red ring with a pointer, for the thing they have to press), Arrow (drag from where the label sits to the thing you mean), Ring it, Number (1, 2, 3 as you place them) and Label (drag a box, type a few words). Every one of them can carry words, and you add them afterwards: drop your stickers first, then switch to ✋ Pick / add words and click the sticker you mean. A little box opens right beside that sticker — type a few words and press Enter. Remove in that box takes the sticker off. The words sit in a dark chip beside the sticker. They are all drawn onto the picture when you take it. Keys 1–6 pick a tool, 0 goes back to ✋ Pick, Ctrl+Z undoes and Ctrl+Y redoes (the ↶ ↷ buttons do the same), Backspace steps back one, F is whole screen.
One picture, several steps	Snapped a screen that four different steps are about? Pick the picture, press ⧉ Same picture, another step… and choose the step. The picture is copied over with no sticker on it, and the sticker tools open so you can point at the part that step is about. The screen itself is only kept once however many steps use it — ten steps off one screen cost one screen's worth of file. 👆 Change the sticker on this one re-opens the tools on any of them; the picture underneath is never touched.
Trimming a snap	Undo is Ctrl+Z and redo is Ctrl+Y, or the ↶ ↷ buttons — every crop, cover and label can be stepped back and forward. A pasted picture, or one already on the canvas, opens in the trimmer instead — ✂ Trim it, or cover something up on the picture, or the same button in the full-size view. Keep this bit is the tool it starts on: drag a box round the part you want and everything outside it goes dim, so you can see exactly what you are keeping; drag again to change the size. Mute it out scrambles anything that must not be readable, Cover it puts a solid block over it, Ring it draws a red box round the thing the reader should look at, and Type over lets you drag a box and write what should sit there instead — for a name or an account number. Undo takes the last one back, Start again clears the lot. When you press Use this picture, the crop and every cover are baked into the picture that gets saved — there is no original hiding underneath. To do it later instead, pick the picture and press ✂ Trim it, or cover something up, or use the same button in the full-size view. ⇄ Share a different window or screen re-opens the browser's picker, so you can switch to your desktop, another program, or a second monitor — pick Entire Screen for the desktop.
Build from this flow	Share ▾ → 📚 Build from this flow… turns the diagram into eighteen things: a work instruction, a build spec, a test script, a checklist, a quick card, the screen list, the data map, the integrations, the messages, who does what, what could go wrong, the notes, a CSV, Mermaid, and a prompt you can paste into Claude. Every one is filled in from the diagram alone — where the diagram does not say something, it says so rather than making it up.
Number your steps	Click ①② Number (or press N) — a Numbering drawer opens on the right and the shape editor folds away until you are done. Then click your shapes in the order they happen — they label themselves Step 1, Step 2, and so on. Shift-click a shape or an arrow instead and it goes into the second series, for rules and branches. Esc or Done when you have finished.
Rules and outcomes	A rule always belongs to a step — you cannot have one on its own. Shift-click a branch and it becomes Step 3 · Rule 1, taking the step from whatever it hangs off. Anything that rule leads on to becomes Step 3 · Rule 1 · Outcome 1, and the next one along is Outcome 2. If two rules both point at the same shape, it keeps the first ref and shows +1 — the shape editor and the written export name the other one.
Inside a box	Number a Storyboard or System box and its parts become Step 1a, Step 1b, Step 1c. A rule hanging off one of those parts keeps it: shift-click the page that comes off Step 1b and it is Step 1b · Rule 1, not just Step 1.
Starting a number where you want	Steps, Rules and Outcomes each have their own Next box. They fill themselves in as you go — the rule count restarts under each new step or part, the outcome count under each new rule — but type a number in and that is the one used next. Clear all takes the numbering off every shape and starts again; titles and text are left alone, and Ctrl+Z brings it back.
Check the flow	Share ▾ → ⚠ Check the flow follows every arrow and lists what the diagram does not say: shapes that lead nowhere, shapes nothing reaches, decisions with only one answer, branches with no name, rules with no outcome, empty shapes, and anything cut off from the start. Click one to jump to the shapes it is about. It never guesses at your process — every item is a missing arrow or an empty box.
How much to show	Show on the shape switches between the full path (Step 3 · Rule 1 · Outcome 1), the short one (3.1.1) and just the last part (Outcome 1). The written export always spells it out in full whichever you pick. Renaming Steps, Rules or Outcomes renumbers everything already placed.
Numbering a box	Number a Storyboard or a System box and everything inside it is numbered with it — Step 4a, Step 4b, Step 4c, top to bottom. Change Parts inside a box if you would rather have A, B, C · .1, .2, .3 · i, ii, iii — or leave the insides alone.
Your own names	Change Prefix to anything: Instruction, Task, A, B. A short prefix loses the space (A1), a word keeps it (Step 1) — click the preview button under the Steps box to flip that. New set starts a fresh series, so one part of the chart can be A1, A2 and another B1, B2. Number selection numbers everything you have selected, top to bottom, in one go.
Move / resize	Drag the shape. Drag the small square at its bottom-right corner to resize.
Text inside	Double-click the shape and type, or use Text inside on the right.
Label	Label prints above the shape and is the name used in the written export.
Speech bubble	Select a shape, click 💬 Speech bubble, type one comment per line. The bubble points at the shape and can be dragged anywhere.
Shape inside a shape	Drag a shape until it sits fully inside another and drop it. The right panel shows Inside of. Moving the outer shape carries everything in it.
Connect	Click Connect, click the first shape, then the second — e.g. a storyboard section to its preview. `Esc` stops. Click an arrow to label it.
Styling the words	In Words: B bold, I italic, A−/A+ to size the text in that one shape (the % button puts it back), • Bullets or 1. Numbers to turn each line into a list, and a Font — Sans, Serif, Rounded, Narrow or Typewriter. With several shapes selected you can set all of that on every one at once.
Kinds of arrow	Click an arrow and pick how it travels: Direct, Curved, Right angles or Auto path — auto path walks around any shape in the way and re-routes itself when you move things. You can also set solid / dashed / dotted, one-way / two-way / no head, thin / normal / thick, and a colour. Quick types sets a whole look in one click. The next arrow you draw copies the last one you set up.
Written export	Lists every shape: its category, text, what it connects to, its speech bubble lines, what it sits inside and what it contains. Copy it or save as .txt.
Pictures	Select a shape and use Add a picture… on the right, or just drag an image file onto the canvas. A picture behaves like any other shape — connect it, put it inside a storyboard, label it.
Text always fits	Text wraps to the shape and the type shrinks to fit. If it still cannot fit, the shape grows. Shrink the shape to fit its text tightens a shape back up.
Coming back to work	Open takes back anything this app made — the .json, the .svg, the .png picture and the .txt written export all carry the whole diagram inside them. You can also drag the file onto the canvas.
What the exports look like	PNG, SVG and the zoomable web page come out in the midnight look you work in — same dark canvas, same neon labels. Print is the only one that flips to the flat paper look, so a printout or a PDF stays plain and ink-friendly.
Pages and printing	📄 Pages sets the paper (A3, A4, A5, Letter, Legal, Tabloid), portrait or landscape and the margin, and can show the page edges right on the canvas with Page 1, 2, 3… so you can see what lands where. Printing then does one sheet per page, and each sheet says “joins page 4 →” along the edges where it carries on — those labels only appear on the printout, never on the canvas. Switch to All on one page for the old shrink-to-fit behaviour. Empty pages are skipped.
Snaps out of the way	A picture that hangs off a step on a dashed line is a snap, and a screen at full size takes up a lot of room while you are still building. ✨ Tidy up now parks every one of them in a single column down the right of the drawing, in the order their steps happen — Arrange ▾ → 🖼 Stack the snaps on the right does only that part. Arrange ▾ → 🙈 Hide the snaps (also in the Snap drawer) puts them away completely: they drop out of the canvas, the Fit, and the pictures you export, until you press it again. Nothing is deleted and nothing is lost — the flow file still has every one of them, and the setting is saved with the flow. A picture drawn inside a box is part of that box and is left alone by both.
Room for more text	Type as much as you like: the shape grows, everything below it shuffles down, and the storyboard or System box around it grows too. ✨ Tidy up does the same across the whole canvas in one click.
Size of all text	A− and A+ in the toolbar change the text size of every shape, label, arrow and speech bubble at once.
Lock in place	Tick 🔒 Lock in place (or press `L`). A locked shape cannot be dragged, resized or shuffled by Tidy up.
Select several	`Shift`-click shapes, or `Shift`-drag a box around them. Drag any one and they all move. `Ctrl`+`A` selects everything.
Group	With several selected, ⧉ Group (or `G`) puts a box around them so they move as one. Ungroup removes the box and keeps the shapes.
Line things up	While you drag, edges and centres click into line with the shapes around — the orange dotted guide shows what you snapped to. Hold `Alt` to drag freely. With several selected, the panel offers Left / Centre / Right / Top / Middle / Bottom, even gaps, same width and height.
The right panel	Drag its left edge to make it wider. Each section folds up — click its heading. Inside of is a tree showing what sits under what: search it, fold sections with ▾, click a row to move the shape there.
Name a flow	Type its name in the toolbar and press `Enter` — that saves it. Everything you save or export uses that name. Save as… just puts the cursor back in the name box: type a different name, press `Enter`, and you have a second flow.
A folder for your flows	Click 📁 Folder… once and pick where your flows live. From then on Save (or `Ctrl`+`S`) writes straight over that flow's file in the folder, Save as… makes a new one, and Open lists everything in the folder. Every export lands there too. Chrome or Edge on a computer only — elsewhere files just download as before.
HTML export	HTML writes a web page of the diagram you can open on any computer and zoom around in — scroll to zoom, drag to move, Fit, 100%, Print. It also carries the flow inside it, so Open can take it back.
Several flows at once	Tabs across the top of the canvas — click one to flick to it, + New flow starts another, × closes one (saving it first). The Flows drawer on the left lists everything open plus every file in your folder; click a file there to open it in its own tab.
Drawers	Shapes, Flows and the Shape editor each have a ‹ / › button to fold them away, and a thin edge you can drag to make them wider or narrower. Widths and folded state are remembered.
It saves itself	Once a flow has a name and you have picked a folder, every change writes itself back a second or so later. The toolbar shows when it last saved; a dot on the tab means there are changes not written yet.
Undo and redo	`Ctrl`+`Z` undoes, `Ctrl`+`Y` redoes, as far back as you like — saving does not clear the history, and each open flow keeps its own.
Getting around	Drag empty canvas to pan, wheel to zoom, Fit to see everything.
Keys	`C` connect · `Del` delete · `Ctrl`+`Z` undo · `Esc` cancel

Flows in your folder

Build from this flow

Every one of these is filled in from the diagram alone. Where the diagram does not say something, it says so rather than making it up.

Asset

Start from something

Already drawn, already numbered. Open one and change it — nothing here is precious.

The same picture, on another step

One screen, several steps — each with its own sticker pointing at the part that step is about. The picture is only kept once however many steps use it.

More flows

Both paid plans keep as many flows as you like, with pictures and files on them. Everything you have already saved stays exactly where it is either way.

Monthly A$19 a month · cancel any time

Best value Annual A$99 a year · works out at A$8.25 a month

That is your third flow

Nothing is deleted and nothing is locked. Every feature stays switched on — the only thing the free plan limits is how many flows you keep.

Show me how

Every one of these walks you through the real program. You do the clicking, and what you make is real work you can keep.

My account

Your card is never stored by us. Changing it, changing your billing details, getting a receipt and cancelling all happen on Stripe's own page. Cancelling never deletes a flow — you keep everything, you just go back to the free number of saved flows.

Check the flow

Click one to jump to the shapes it is about.

Sign in

Your flows are saved to your own private storage. Only you can see them.

Email Password

Your cloud flows

Rows and columns

Show them on the canvas

Columns — left to right

Rows — top to bottom

Saved

Name this step

Pages and printing

Show the page edges on the canvas Paper size Which way up Margin (mm) When you print