Flow modelling for engineers
Describe the app.
Get the screen flow.
Wayframe turns one plain-English sentence into a live, editable diagram — screens as nodes, navigation as directed edges. Reason about the whole path before you commit a single route to code.
- ~2s
- from sentence to first diagram
- 1
- reducer behind every edit
- 0
- shapes dragged by hand
Three moves from sentence to reviewed flow
No canvas setup, no shape library, no manual layout. The diagram is generated, then refined the way you refine code — in small, traceable steps.
> a marketplace app with sign-in, browsing, a cart and checkout
Built like a developer tool, not a diagram toy
Everything on the canvas is typed, addressable and reversible — the same properties you expect from the code that follows it.
- 01
Directed screen graph
Screens are nodes, navigation is a directed edge. Branches, dead ends and loops become visible instead of implied.
- 02
Chat-driven edits
“Add a payment step after cart” resolves to structured tool calls that mutate the graph — not a wall of prose.
- 03
Direct manipulation
Rename inline, drag connections between handles, delete an edge from its midpoint. The canvas never locks you out.
- 04
Category typing
Every screen carries a category — core, commerce, auth — so scope creep in one surface is obvious at a glance.
- 05
Pattern comparison
Check the flow against known product patterns and get concrete, approvable additions for whatever is missing.
- 06
Traceable versions
Generation, typed edits, manual changes and approved suggestions each land in the log, attributed to their source.
Find the screens you forgot before QA does
Wayframe compares your graph against flows from comparable products and returns concrete gaps — each one a card you approve or reject on its own.
- 01Approvals apply through the same edit path as typed instructions.
- 02Approved additions inherit their category stripe on the canvas.
- 03Every approval is logged as “Approved suggestion”, never as a manual edit.
- 04Rejecting a card changes nothing — no node, no version, no trace.
The whiteboard was never the bottleneck — redrawing it was
| Dimension | Whiteboard / generic canvas | Wayframe |
|---|---|---|
| First diagram | Drag, align and relabel for 30 minutes | One sentence, roughly two seconds |
| Changing the flow | Rearrange shapes, redraw arrows | One instruction, applied structurally |
| Missing screens | Noticed in review — or in production | Surfaced by pattern check, card by card |
| Change history | Screenshots in a thread | Versioned log, attributed by source |
| Handoff to code | Interpretation required | Typed nodes, edges and categories |
Questions engineers ask first
Still unsure whether it fits your stack? Open the canvas — the whole surface is usable without an account.
Not yet. It produces the structural model — screens, transitions and categories — that you reason about before writing routes. Export and codegen are on the roadmap.
Start with one sentence
Map the flow before you write the first route
Open the canvas, describe your app, and edit from there. No setup, no template picking, no dragging boxes into alignment.
no credit card · dark by default · light one toggle away