SaaS Flow Designer

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. Change any of them by hand afterwards.
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	📸 Snap opens a drawer. Press Choose a window to snap once and pick the window or screen you are working in — the browser asks, not us, and it stays picked. After that right-click anywhere on the canvas takes a still of that window and hangs it off a step as a picture, joined with a dashed line. The dashed line means the numbering and the flow check both leave the picture alone; it is an example of the step, not a step. Two modes: Snap + next step makes the next step each time so you can walk a whole process, and Onto this one puts it on whatever you have selected. Ctrl+V pastes a picture straight from the clipboard instead — so Windows ⊞+Shift+S then Ctrl+V works with no sharing at all. Double-click any picture to open it full size, where the wheel zooms and dragging moves it; the shape editor also has − and + to zoom the picture inside its own shape, with arrows to move what you can see.
Aiming a snap	With Trim and cover before it lands ticked, a snap opens the aimer over the live screen instead of grabbing it blind. A frame sits in the middle and everything outside it is dimmed — that frame is what gets taken. Move the mouse about inside it; push the pointer into the frame's edge and the picture slides that way. The wheel zooms the screen you are looking at, so you can go right in on one button. Hold Shift and move and the frame itself gets bigger or smaller — a small snap of one field or a big one of a whole window. Whole screen puts it back. Then Take it, or press Enter, or right-click.
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). They are drawn onto the picture when you take it, so what lands on the step already points at the right thing. Keys 1–5 pick a sticker, 0 turns them off, Backspace takes the last one back, 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	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.
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.
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

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

Pages and printing

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