# Flow map
URL: /diagrammatic/docs/charts/flow-map

Movement between places.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

```
import { FlowMap } from "diagrammatic";
```

One origin, eight destinations. Width is terabytes. More than a handful tangles; eight is the job.

- aspect

  1.7

- title

  Egress from hub-1

- origin

  - col

    13

  - row

    2

  - label

    hub-1

- routes

  - - col

      4

    - row

      1

    - value

      84

  - - col

      14

    - row

      3

    - value

      41

  - - col

      15

    - row

      3

    - value

      28

  - - col

      11

    - row

      6

    - value

      19

  - - col

      5

    - row

      6

    - value

      12

  - - col

      2

    - row

      2

    - value

      9

  - - col

      7

    - row

      3

    - value

      7

  - - col

      8

    - row

      2

    - value

      5

Illustrative data. Origin egress, last 7 days. Width = TB.

fig. 59 · Egress from hub-1

The largest route carries 84 TB to tile (4, 1). The next two carry 41 and 28 TB. The remaining five carry 52 TB together.

- Use it for

  Origin-to-destination volumes: routes, trade, migration.

- Watch out

  More than a handful of routes tangles; bundle or filter.

## Motion

Each route carries a trail from the origin to its tile. Put `data-dg-motion` on the chart or any ancestor; see [Motion](/diagrammatic/docs/motion).

```tsx
import { FlowMap } from "diagrammatic";

export default function EgressFlowMap() {
  return (
    <div data-dg-motion="">
      <FlowMap
        aspect={1.7}
        title="Egress from iad-1, live"
        origin={{ col: 13, row: 2, label: "iad-1" }}
        routes={[
          { col: 4, row: 1, value: 84 },
          { col: 14, row: 3, value: 41 },
          { col: 15, row: 3, value: 28 },
          { col: 11, row: 6, value: 19 },
          { col: 5, row: 6, value: 12 },
          { col: 2, row: 2, value: 9 },
        ]}
      />
    </div>
  );
}
```