Flow map

app.flowchart() draws your bot as a Mermaid diagram: its pages and dialogues, the /commands and menu buttons that open them, and the buttons, redirects and dialogue starts seen while it ran.

console.log(app.flowchart());

mermaid

flowchart LR
  n0["catalog"]
  n1["product"]
  n2(["📝 order"])
  n3["home"]
  n4[/"/start"/]
  n4 --> n3
  n3 -->|"🛍 Catalog"| n0
  n0 -->|"Green tea"| n1
  n1 -->|"🛒 Order"| n2
  n2 -.->|redirect| n0

GitHub draws mermaid code blocks in issues, pull requests and READMEs; Mermaid Live draws it too, and mermaidLiveUrl(chart) makes a link that opens it there.

shape	what
`["page"]`	a page
`(["📝 dialogue"])`	a dialogue
`[/"/command"/]`	a command from `app.command`
`>"label"]`	a main menu button
`-->` with a label	a button (`nav.button`, `nav.home`, …)
`-.->` redirect	`nav.redirect` (from a render, a middleware or a dialogue's `onFinish`)
`==>`	`nav.startDialogue`
red, dashed, ⚠️	linked to but never registered: pressing it fails

Where the edges come from

Commands and menu buttons are known from the start. Buttons and redirects are recorded when pages render, so the diagram shows what was actually used: run your tests, click through easytg preview (its Flow tab shows the diagram as you go), or let real users use the bot. A page that nobody opened yet shows up alone.

Edges are kept in memory, per process: one per pair of screens and kind, with up to three of its button labels ("Green tea · Black tea"). So the map stays small however many different labels buttons have (counters, names), and recording is safe to leave on in production. nav.self and other links from a page to itself are left out.
{ observed: false } keeps only commands and menu buttons; { direction: 'TD' } draws top-down.

examples/flowchart.ts sends its own map with /flow.

Flow map ​

Where the edges come from ​

Flow map

Where the edges come from