# Arc diagram
URL: /diagrammatic/docs/charts/arc-diagram

A network flattened onto one line.

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

Nodes follow a fixed file order. Each arc shows how many positions an import jumps.

- entries

  - cli

    3 imports

  - core

    2 imports

  - auth

    1 import

  - db

    1 import

  - api

    2 imports

  - net

    1 import

  - ui

    2 imports

  - test

    2 imports

* aspect

  2.2

* title

  Module imports in file order

* graph

  - nodes

    - - id

        cli

    - - id

        cfg

    - - id

        core

    - - id

        auth

    - - id

        db

    - - id

        api

    - - id

        net

    - - id

        ws

    - - id

        ui

    - - id

        log

    - - id

        fs

    - - id

        test

  - links

    - - source

        cli

      - target

        cfg

    - - source

        cli

      - target

        ui

    - - source

        cli

      - target

        ws

    - - source

        core

      - target

        db

    - - source

        core

      - target

        log

    - - source

        auth

      - target

        db

    - - source

        db

      - target

        api

    - - source

        api

      - target

        net

    - - source

        api

      - target

        cfg

    - - source

        net

      - target

        ws

    - - source

        ui

      - target

        log

    - - source

        ui

      - target

        fs

    - - source

        test

      - target

        cli

    - - source

        test

      - target

        api

* highlight

  cli

Illustrative data. Module imports in file order.

fig. 50 · Module imports in file order

test reaching back to cli is the longest jump, spanning eleven positions. cli to ui spans eight, followed by cli to ws and core to log at seven each. core to db to api forms two shorter hops.

- Use it for

  Connection patterns over an ordered set, sequences especially.

- Watch out

  Node order decides everything; sort it on purpose.

## Motion

Each arc carries a trail from its `source` to its `target`, whichever side of the axis the source sits on. Put `data-dg-motion` on the chart or any ancestor; see [Motion](/diagrammatic/docs/motion).

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

export default function ImportArcs() {
  return (
    <div data-dg-motion="">
      <ArcDiagram
        aspect={2.2}
        title="Which modules import which, in file order"
        graph={{
          nodes: ["cli", "cfg", "core", "db", "api", "net", "ui", "log"].map(
            (id) => ({ id }),
          ),
          links: [
            { source: "cli", target: "cfg" },
            { source: "cli", target: "ui" },
            { source: "core", target: "db" },
            { source: "core", target: "log" },
            { source: "api", target: "db" },
            { source: "api", target: "net" },
            { source: "ui", target: "log" },
            { source: "log", target: "cfg" },
          ],
        }}
      />
    </div>
  );
}
```