flow

binds state

Boxes joined by arrows, laid out automatically from a list of steps and where each leads: an approval process, a customer journey, a decision tree. Never give positions.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"

direction

Props

"text"textThe title above the flow, e.g. Claim approval.optional

itemsexpressionThe list of steps, e.g. items=steps. At most 40.required

idnameThe field that identifies each step.id

labelnameThe field with what each box says.label

nextnameThe field with where a step leads: one id, a list of ids, or ids separated by commas. Leave it empty on the last step.next

kindnameThe field with each step's shape: step (a box), decision (a diamond), start or end (a pill).kind

edgesexpressionLabels for arrows, as a list of {from, to, label}, e.g. the Yes and No out of a decision.—

directiondown · rightWhich way it runs: down or right. When right doesn't fit its space, it runs down instead.down

bindstateState that holds the selected step's id. Pressing a step sets it.—

onactionActions to run after a step is selected, with bind= already set, e.g. emit:changed. Separate several with ;—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

For your model

The exact guide entry a model gets for flow, generated from the same definition.

  flow "<text>"  — Boxes joined by arrows, laid out automatically from a list of steps and where each leads: an approval process, a customer journey, a decision tree. Never give positions.
    "<text>"  The title above the flow, e.g. Claim approval.
    items=<expression, required>  The list of steps, e.g. items=steps. At most 40.
    id=<name>  The field that identifies each step.
    label=<name>  The field with what each box says.
    next=<name>  The field with where a step leads: one id, a list of ids, or ids separated by commas. Leave it empty on the last step.
    kind=<name>  The field with each step's shape: step (a box), decision (a diamond), start or end (a pill).
    edges=<expression>  Labels for arrows, as a list of {from, to, label}, e.g. the Yes and No out of a decision.
    direction=<down|right>  Which way it runs: down or right. When right doesn't fit its space, it runs down instead.
    bind=<state>  State that holds the selected step's id. Pressing a step sets it.
    on=<action>  Actions to run after a step is selected, with bind= already set, e.g. emit:changed. Separate several with ;
    example:
      state picked="" steps=[{id: "in", label: "Claim filed", kind: "start", next: "check"}, {id: "check", label: "Under $5,000?", kind: "decision", next: "auto,review"}, {id: "auto", label: "Approve automatically", next: "pay"}, {id: "review", label: "Adjuster review", next: "pay"}, {id: "pay", label: "Pay out", kind: "end"}]
      state edges=[{from: "check", to: "auto", label: "Yes"}, {from: "check", to: "review", label: "No"}]
      flow "Claim approval" items=steps edges=edges bind=picked

More data

stat rating chart chart-line chart-rule chart-note meter table table-column compare compare-row details detail schedule board tree map pin

All data elements on one page →