Flow diagram

Use a flow diagram to show how a process moves from step to step and who handles each step.

Source

```chart
type: flow
title: A support request takes one of three paths to close
subtitle: Steps in columns by order, in the lane of the team that owns them
data:
  inline:
    - {step: Request, lane: Customer}
    - {step: Triage, lane: Support}
    - {step: Fix, lane: Support}
    - {step: Invoice, lane: Billing}
    - {step: Refund, lane: Billing}
    - {step: Pay, lane: Customer}
    - {step: Close, lane: Support}
    - {from: Request, to: Triage, note: new}
    - {from: Triage, to: Fix, note: bug}
    - {from: Triage, to: Invoice, note: bill}
    - {from: Triage, to: Refund, note: ask}
    - {from: Fix, to: Close}
    - {from: Invoice, to: Pay}
    - {from: Pay, to: Close, note: paid}
    - {from: Request, to: Close, note: spam}
encoding: {label: step, source: from, target: to, lane: lane, y: note}
```

Fields that matter

• type: flow with encoding.label for the step name; each step is a row, and its name must be unique
• A row with encoding.source and encoding.target is a connection between two steps by name; the optional encoding.y column labels it
• encoding.lane puts each step in a lane drawn as a band; steps without a lane share a last band
• A step sits in the column after the last step that leads to it, and steps in a column follow the order of what they join, then the source
• A connection that closes a cycle is drawn dashed as a return and reported; a connection to an unknown step, to itself, or a repeat is left out and reported
• A flow takes at most 150 steps and 600 connections in a panel; above that the chart is not drawn and check raises chart.limit-exceeded naming the limit and the count
• A step name wraps inside its box; one that cannot fit at the width is left out and reported, never cut
• The same rows give the same layout, and renaming a step moves no other step
• encoding.facet makes one diagram per value

Interactions

• Hover or focus a step to read its lane, its place in the order and the steps before and after it.
• Hover or focus a connection to read the steps it joins and its label.
• Move through the steps with the keyboard in the order of the flow.
• Open the Table view, Download PNG or CSV, or Expand the chart.