App flow — <feature>

• 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 pointsCopy Anchor Link

• 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.

FlowCopy Anchor Link

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).

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

ScreensCopy Anchor Link

1. <Screen name> — /routeCopy Anchor Link

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.

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: …