# App flow — <feature> (/docs/maintain/_templates/app-flow)

- **Status:** Draft
- **Last updated:** YYYY-MM-DD
- **Related ADRs:** ADR-NNNN

> Snapshot of the system as it stands today. Edit in place; never record what changed.

What a person sees and how they move through it. Sample values are invented (ADR-0008).
Phone width first; note where desktop differs.

## Entry points [#entry-points]

- Where a person reaches it from (home page, sidebar, search, a package badge or README link,
  a direct URL, the Markdown version), and what access it needs.
- Who does not see it, and what they get at its URL.

## Flow [#flow]

Draw this diagram with Archify too. In a copy, wrap the fence in
`<Diagram src="/diagrams/<project-slug>/<slug>.html" title="…">` … `</Diagram>`, with nothing else
inside: the page shows the Archify view and its Markdown the Mermaid. Outside the templates, a
bare Mermaid fence fails the build (ADR-0022).

```mermaid
flowchart LR
  A[Screen A] -->|action| B[Screen B]
  B -->|back| A
  B -->|search| S[Search dialog]
```

## Screens [#screens]

### 1. `<Screen name>` — `/route` [#1-screen-name--route]

The wireframe gets its own Archify view too, one per screen: an `architecture` diagram drawn
from this Mermaid, its boxes placed as the rows, inside a labelled phone-screen region. Wrap the
fence in its `<Diagram>` the same way.

```mermaid
block-beta
  columns 4
  menu["☰"] title["Site name"]:2 search["⌕"]
  crumb["Packages › npm › example-pkg"]:4
  h1["example-pkg"]:3 version["v1.2.0 ▾"]
  block:body:4
    columns 4
    install["npm install example-pkg"]:4
    para["Short description of what it does."]:4
  end
  nav["‹ Previous · Next ›"]:4
```

**States**

- Empty: …
- Loading: …
- Not found: …
- Refused (private, no access): …
- Error: …
- Degraded (an external service such as search is unavailable): …
- Success: …