Open the editor

Dependency graph

What depends on what, with fan-in counts and cycles a tree cannot show.

1 dependency graph example

Frontend package dependencies

Six internal packages and one external one, with a fan-in badge on each and a cycle exposed.

A tree could not show this: the design system has several parents, and two packages depend on each other. Fan-in badges show where dependencies concentrate, and the back edge is the accented cycle.

Open in the editor

What is a dependency graph?

A dependency graph is a directed graph where each node is an item, such as a package, service or task, and each arrow means one item depends on another. Unlike a tree, a node can have many parents, and cycles can exist.

Read an arrow from the dependent to what it needs. Nodes with many incoming arrows, high fan-in, are the ones whose changes break the most things, and a loop of arrows is a circular dependency.

When to use a dependency graph

  • Use it to audit frontend packages or microservices before a refactor or upgrade.
  • Use it to find circular dependencies and single points of failure.
  • If every item has exactly one parent, a tree diagram is easier to read.

How to make a good dependency graph

  1. Keep arrows in one direction, from dependent to dependency, throughout.
  2. Lay it out in layers so most arrows point the same way and cycles stand out.
  3. Show fan-in counts or size nodes by them to highlight critical items.
  4. Color cycles in red so they are not missed.