---
title: "User-flow diagrams"
description: "See your app's screens and paths as a diagram generated from the real code and data model."
url: https://evonx.ai/docs/evolve/user-flow-diagrams
locale: en
updated: 2026-09-04
---

# User-flow diagrams

See your app's screens and paths as a diagram generated from the real code and data model.

A user-flow diagram shows your app as its users travel through it: screens as
nodes, actions as the paths between them. Evonx generates these diagrams from the
real code and data model — not from a drawing you maintain by hand — so they stay
true to what's actually built.

## What they're for

- **Sanity-checking structure.** Before approving a change, see where the new
  screen hangs in the app and which paths lead to it.
- **Spotting gaps.** Dead ends and orphan screens are obvious in a diagram long
  before a user finds them.
- **Talking about the app.** "Add the export on the job-detail screen, not the
  list" is easier when both of you look at the same map.

## Reading a diagram

Each node is a screen your app actually has; each edge is a navigation or action
connecting them ("save creates the job, then opens its detail"). Because the
diagram is derived from the codebase and its data model, renaming or removing a
screen in a later change updates the picture — there's no stale diagram to
maintain.

## Using flows in a change

1. Open your project's user-flow view to see the current structure.

2. When requesting a change that adds or moves screens, reference the flow: "the
   new report screen should be reachable from the dashboard, next to Jobs".

3. In the thread's design stage, review the proposed flow alongside
   [mockups](/docs/evolve/design-and-mockups): the mockup shows how a screen
   looks, the flow shows where it lives.

> **Note**
> Flows complement, not replace, clicking through a
> [live preview](/docs/preview-and-debug/preview-hub): the diagram tells you the
> structure is right, the preview tells you it feels right.

## Related

- [Design & mockups](/docs/evolve/design-and-mockups) — the visual half of the
  design stage.
- [Evolution Threads explained](/docs/evolve/evolution-threads) — where design
  artifacts fit the flow.