Multi-page flows

Connect named pages with flow arrows to define navigation order and control how pages are laid out on the canvas.

Basic syntax

Flow declarations appear at the end of the document, outside any page block. Pages must have IDs.

wiremarkUI
  page HOME "Home" { }
  page ABOUT "About" { }
  page CONTACT "Contact" { }

  HOME --> ABOUT --> CONTACT

--> is the default right-pointing arrow. Pages are placed left-to-right in the order they appear in the chain.

Live example Open in editor ↗

Directional arrows

Each arrow in a chain can carry an explicit direction:

Arrow	Direction	Canvas placement
`-->` or `-r->`	Right	target in the next column, same row
`-d->`	Down	target in the next row, same column
`-u->`	Up	target in the previous row, same column
`-l->`	Left	target in the previous column, same row

Mixed-direction chains

Arrows in a single chain can point in different directions:

LOGIN -r-> DASH -d-> USERS -r-> DETAIL

The renderer builds a grid from these instructions: DASH is to the right of LOGIN, USERS is below DASH, and DETAIL is to the right of USERS.

Live example Open in editor ↗

Pages without flows

Pages that are not referenced in any flow declaration are placed in a remainder column to the right of all flow columns, in the order they were declared. They are still fully rendered.