Design Lab · 03
FlowMind User flow diagram generator: write the journey, get the diagram
Type a user journey the way you'd say it out loud, one step per line, and FlowMind draws the flow as you type. Questions become decisions, their answers become branches, and the result downloads as an SVG you can drop into Figma or a doc.
Draw your flow
One step per line. End a line with "?" to make it a decision, then indent its answers underneath as yes: … and no: …. The diagram redraws as you type.
Swipe sideways to see the whole diagram.
How it works
Three steps, no account.
Write the steps
One step per line, top to bottom. "Open the app", "Choose a park", "Submit the report".
Add the decisions
End a line with "?" to make it a decision, then indent its answers underneath as "yes: …" and "no: …". Any label works: "free:", "pro:", "team:".
Export it
Download the diagram as SVG or copy the code. SVG imports into Figma as editable vector layers.
Where it helps
What I actually use it for.
Sketching in a meeting
Type the flow while people talk and share your screen. Everyone sees the same diagram update.
Documenting a spec
Paste the steps into a PRD and export the diagram alongside it, so the text and the picture always match.
Checking a happy path
Writing a flow as plain lines quickly shows where a decision has no answer or a path goes nowhere.
Under the hood
Simple techniques, picked on purpose.
Everything runs in this browser tab. No AI service is called and nothing you type or upload leaves the page, so it answers instantly and keeps working offline.
From text to shapes
Each line is read in order. Lines ending in ? become decision diamonds; indented label: text lines under a decision become its branches. Everything else is a step.
Branches are laid out side by side under their decision and joined back into the next step, so the main path always runs down the middle.
The output
The diagram is drawn as a plain SVG: rounded rectangles for steps, diamonds for decisions, pills for start and end, and arrowed paths between them. Text wraps to fit each shape.
Because it's SVG, it stays sharp at any size and can be edited in any vector tool.
Honest limits
- Branches are one step deep: a decision inside a branch isn't supported yet.
- Loops (going back to an earlier step) aren't drawn.
- Very wide decisions with many answers scroll sideways on a phone.
Made something with it?
Tell me what FlowMind should do next.
These started as tools for my own design work. If this one saved you some time, or fell short, I'd like to hear about it.