> ## Documentation Index
> Fetch the complete documentation index at: https://docs.benchcanvas.app/llms.txt
> Use this file to discover all available pages before exploring further.

# User flow mapping

> Map any product's user flow automatically, with screens captured and connected for you.

Drawing user flows by hand in Figma is slow and goes stale fast. BenchCanvas captures the real navigation path automatically, so your flow maps reflect the actual product.

## Workflow

<Steps>
  <Step title="Paste the URL">
    [Capture](/capture/url-capture) any product, yours or a competitor's. BenchCanvas captures every screen in the navigation path.
  </Step>

  <Step title="See the connected flow">
    Screens appear in order, linked by real [connections](/canvas/connections), inside a [frame](/canvas/flows-and-frames).
  </Step>

  <Step title="Refine the map">
    Reorder with [automatic layout](/canvas/layout), add missing screens ([Add screens manually](/capture/add-screens)), and adjust connections.
  </Step>

  <Step title="Annotate and share">
    Note decision points and alternative paths with [comments](/collaborate/comments), then [share](/share/share-links) or [export](/share/export).
  </Step>
</Steps>

## Tips

* Map several flows in one project, for example signup, checkout, and settings, each in its own frame.
* For branching paths like A/B variants, capture each variant separately and compare them.
* For authenticated flows, [record with the extension](/extension/record-authenticated-flows).
* Recapture in one step when the product changes to keep the map accurate.

<Card title="Connections" icon="arrow-right-arrow-left" href="/canvas/connections">
  How BenchCanvas detects and lets you edit navigation links.
</Card>