@yeger/turbo-graph-ui

@yeger/turbo-graph-ui

Interactive visualization of Turborepo task graphs.

Installation

npm install --save-dev @yeger/turbo-graph
# or
yarn add -D @yeger/turbo-graph
# or
pnpm install -D @yeger/turbo-graph

Usage

The visualization can be opened by running this package's turbo-graph command. For simple usage, create a script in your root package.json.

{
  "script": {
    "graph": "turbo-graph"
  }
}

Nodes represent your workspaces, i.e., packages. Each workspace can have multiple nodes, each color defining the corresponding task (as seen in the toolbar).

CLI

• -o, --open: Open the visualizer in the default browser.
• -p, --port <port>: Port of the visualizer. (default: 29312)
• -h, --help: Display help message

Controls

By right-clicking a node, only its (transitive) dependencies and dependents are shown.

Further, the checkboxes allow filtering nodes by their corresponding tasks.

The graph can be zoomed using the mouse-wheel and nodes may be dragged while holding the left mouse-button.

The "Reset" button centers the graph.

License

MIT - Copyright © Jan Müller