# Chord
URL: /diagrammatic/docs/charts/chord

Flows between peers around a circle.

> 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 { Chord } from "diagrammatic";
```

Pages that left one rotation and landed on another. The circle is the point: these teams page each other.

- entries

  - payments → checkout

    38

  - checkout → payments

    22

  - checkout → search

    14

  - search → checkout

    9

  - growth → checkout

    18

  - platform → payments

    16

  - platform → search

    11

  - payments → platform

    8

  - growth → search

    7

  - search → growth

    4

* aspect

  1.15

* title

  On-call handoffs

* groups

  - payments
  - checkout
  - search
  - growth
  - platform

* flows

  - - from

      payments

    - to

      checkout

    - value

      38

  - - from

      checkout

    - to

      payments

    - value

      22

  - - from

      checkout

    - to

      search

    - value

      14

  - - from

      search

    - to

      checkout

    - value

      9

  - - from

      growth

    - to

      checkout

    - value

      18

  - - from

      platform

    - to

      payments

    - value

      16

  - - from

      platform

    - to

      search

    - value

      11

  - - from

      payments

    - to

      platform

    - value

      8

  - - from

      growth

    - to

      search

    - value

      7

  - - from

      search

    - to

      growth

    - value

      4

Illustrative data. Incident handoffs, Q2 2025. n = 147.

fig. 47 · On-call handoffs, one quarter

Payments into checkout is the thickest ribbon at 38, and the return carries 22. Growth sends 18 into checkout and seven into search. Platform sends 27 across payments and search and receives eight from payments.

- Use it for

  Dense mutual exchange: migration, trade, traffic between equals.

- Watch out

  Beautiful and hard to read; reserve it for genuinely circular relationships.

## Motion

Each ribbon carries a trail from the group it leaves to the group it reaches, which a chord cannot show at rest. Put `data-dg-motion` on the chart or any ancestor; see [Motion](/diagrammatic/docs/motion).

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

export default function HandoffChord() {
  return (
    <div data-dg-motion="">
      <Chord
        aspect={1.15}
        title="On-call handoffs between teams"
        groups={["payments", "checkout", "search", "growth", "platform"]}
        flows={[
          { from: "payments", to: "checkout", value: 38 },
          { from: "checkout", to: "payments", value: 22 },
          { from: "checkout", to: "search", value: 14 },
          { from: "growth", to: "checkout", value: 18 },
          { from: "platform", to: "payments", value: 16 },
          { from: "platform", to: "search", value: 11 },
        ]}
      />
    </div>
  );
}
```