# Network
URL: /diagrammatic/docs/charts/network

Entities and their relationships.

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

Ten services on the checkout path. Gateway and checkout each have four links, the highest degree in this graph.

- entries

  - gateway

    4 links

  - checkout

    4 links

  - payments

    3 links

  - inventory

    2 links

  - pricing

    1 link

  - auth

    2 links

  - cart

    2 links

  - risk

    2 links

  - email

    1 link

  - flags

    2 links

* aspect

  1.2

* title

  Checkout service graph

* graph

  - nodes

    - - id

        gw

      - label

        gateway

    - - id

        checkout

      - label

        checkout

    - - id

        pay

      - label

        payments

    - - id

        inv

      - label

        inventory

    - - id

        price

      - label

        pricing

    - - id

        auth

      - label

        auth

    - - id

        cart

      - label

        cart

    - - id

        risk

      - label

        risk

    - - id

        email

      - label

        email

    - - id

        flag

      - label

        flags

  - links

    - - source

        gw

      - target

        checkout

    - - source

        gw

      - target

        auth

    - - source

        gw

      - target

        cart

    - - source

        gw

      - target

        flag

    - - source

        checkout

      - target

        pay

    - - source

        checkout

      - target

        inv

    - - source

        checkout

      - target

        price

    - - source

        checkout

      - target

        risk

    - - source

        pay

      - target

        risk

    - - source

        pay

      - target

        email

    - - source

        cart

      - target

        inv

    - - source

        auth

      - target

        flag

Illustrative data. Service graph from the checkout trace sample, 14 Aug.

fig. 49 · Checkout service connections

Gateway connects to checkout, auth, cart, and flags. Checkout connects to payments, inventory, pricing, and risk. Risk is the only service linked to both checkout and payments.

- Use it for

  Structure in connections: hubs, bridges, and islands.

- Watch out

  Force layouts are unstable art; pin the nodes readers must find.

## Motion

Each link carries a trail from its `source` to its `target`, turning an undirected-looking graph into a call path. Put `data-dg-motion` on the chart or any ancestor; see [Motion](/diagrammatic/docs/motion).

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

export default function RequestPathNetwork() {
  return (
    <div data-dg-motion="">
      <Network
        aspect={1.2}
        title="Calls made by one checkout request"
        graph={{
          nodes: [
            { id: "gw", label: "gateway" },
            { id: "checkout", label: "checkout" },
            { id: "pay", label: "payments" },
            { id: "inv", label: "inventory" },
            { id: "risk", label: "risk" },
            { id: "email", label: "email" },
          ],
          links: [
            { source: "gw", target: "checkout" },
            { source: "checkout", target: "pay" },
            { source: "checkout", target: "inv" },
            { source: "pay", target: "risk" },
            { source: "pay", target: "email" },
          ],
        }}
      />
    </div>
  );
}
```