Skip to content

What is NX Graph?

Nx Graph is a feature that provides a visual representation of the dependency relationships between projects in our Nx workspace. It helps us to understand project dependencies, optimise builds, and identify the impact of changes.

How do I generate the dependency graph?

The command nx graph will start a local server and open the Nx Graph UI in your default web browser, showing all projects and their dependencies.

  • Once the Nx Graph UI opens in your browser, you'll see an interactive graph representation of your Nx workspace.
  • Projects (applications and libraries) are represented as nodes.
  • Dependencies between projects are represented as edges connecting the nodes.

How do I Interact with the graph UI?

  • Zoom and Pan: Use your mouse or trackpad to zoom in and out, and click and drag to pan across the graph.
  • Highlight Nodes: Hover over a node (project) to highlight it and view its dependencies.
  • View Details: Click on a node to view detailed information about the project, including its name, type, and any tags.
  • Explore Dependencies: Click on the arrows connecting nodes to explore specific dependencies between projects. This feature allows you to trace how changes in one project might impact others, facilitating better understanding of project interdependencies.
  • Filter and Focus: Use command-line options (--focus=) to filter the graph to focus on specific projects or (--all) to see all projects.

How do I visualise the affected dependency graph?

Use nx affected:dep-graph to generate and view an interactive diagram showing the affected projects and their dependencies.

How do I compare changes using Nx Graph?

Use nx affected:graph --base=<base-branch> --head=<head-branch> to compare changes between branches or commits and see affected projects.

Can I export the Nx Graph for sharing?

  • Using the command line: Use nx graph --file=dep-graph.html to export the dependency graph to an HTML file.
  • In the Graph UI: While viewing the Nx Graph UI in your browser, right-click (or control-click on macOS) on the graph canvas.Select an option such as "Save As..." or "Export as Image" depending on your browser's capabilities.

Example Commands

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# Visualise affected dependency graph
nx affected:dep-graph

# Focus on a specific project in the graph
nx graph --focus=my-app

# Compare changes between branches
nx affected:graph --base=main --head=feature-branch

# Export the graph to an HTML file
nx graph --file=dep-graph.html