Turn scattered product screens into behaviorally labeled journeys.

Start with a repository or existing screens. See the product grouped by what users are trying to do—not by filenames alone.User Flow Library turns a repository or existing screens into journeys named for what users are trying to do. Inspect the screens, paths, branches, and source structure together on one canvas.

Guided importGitHub repositoryConnect GitHub once, choose a repository for each project, and follow discovery, rendering, and journey organization inside the workspace.Upload and organizeScreenshotsBring screens you already have, then use the project assistant to group, label, and connect them.First-party betaFigma framesConnect Figma once in account settings, paste a file URL, review likely screens, and import them as organized flows.

Explore an illustrative map

Key

01Launch
02Sign in
03Home
04Browse menu
05Item detail
06Customise
07Add to bag
08Checkout
09Save for later
10Order history

Fig. 1 — example output. Ten screens, one flow, one branch.Foldout — scroll ⟵ for screens 1–5 · Sheet 02

See routes become user behavior.

This fictional marketplace shows the output without exposing a customer, repository, or private product. Routes remain traceable, but the journeys are named for the behavior they represent: buying a product or saving it for later.

Apps: 3
Routes: 32
Example routes: 9
Journey screens: 6
Journey edges: 7

exampleco/wayfinder-marketFictional product · illustrative data only

Discovered apps

Storefront
apps/storefront
16 routes
Seller Console
apps/seller-console
9 routes
Help Center
apps/help-center
7 routes

Storefront route set

//catalog/products/[slug]/cart/checkout/orders/account/help/returns

Buying a productBehaviorally labeled journey · scroll →

Figure 01. Fictional demonstration data: 32 routes across three apps, organized into an example purchase journey with a save-for-later branch.

A user journey, not a route dump.

The useful artifact is the relationship between screens. A coherent journey should explain what the person is doing, which step comes next, and where their path can branch.

The route tree still matters, but it is source evidence—not the final organization. Open the canvas to inspect the whole product or choose one labeled journey to follow a coherent path through it.

Project model / anatomyLive structure

01Journey label: Generated journeys are named for the behavior they represent.
02Ordered screens: Source relationships place relevant screens into an inspectable path.
03Navigation edges: Known destinations and branches remain visible between screens.
04Route provenance: Imported screens keep the source path used to discover them.
05Rendered screens: Generated HTML or captured screenshots provide the visual layer.
06Shared canvas: Journeys, screens, and navigation edges remain together in one project.

Watch the map take shape inside the project.

A GitHub import reports discovery, rendering, and organization as separate stages. Screens can appear on the canvas while later work continues, so progress is visible instead of hidden behind one long wait.

The same project keeps the assistant, canvas, and journey list in one workspace. Your MCP-enabled agent can read and update that structure without replacing the visual workflow.

Import a GitHub repository See how agents use the project

Wayfinder Market / project workspaceIllustrative product view

Project assistant

Rendering discovered screens

Completed screens are appearing on the canvas while the remaining routes are processed.

Source connectedcomplete

Routes and screens discoveredcomplete

Screens rendering on canvasactive

Journeys organizingqueued

CanvasRendering

Journeys

01Buying a product
02Saving an item for later
03Updating account details

Figure 02. Illustrative workspace showing the assistant, incremental canvas rendering, and behaviorally labeled journeys together.

Share the living map, not another stale deck.

Output 01

Public project

Send one revocable link. Reviewers can browse without creating an account.

Output 02

Mermaid diagram

Edit the flow as code, keep versions, and carry it into the docs you already use.

Output 03

PDF export

Take an ordered, flow-by-flow record with you when a static handoff is the right format.

Start with the source that is ready today.

GitHub has the guided import. Screenshots can be uploaded and organized in a project. Figma frame import is an agent-assisted beta and requires a personal access token in settings.

Import from GitHub