Script Valley
Reading Other People's Code
Navigating Large CodebasesLesson 3.4

How to map a codebase using a call graph

call graph concept, building manual call graphs, automated call graph tools, finding dead code, hotspot identification, reading breadth-first vs depth-first

The Call Graph Shows How Code Is Connected

Call graph structure diagram

A call graph maps which functions call which other functions. It's the fastest way to understand the execution paths through a codebase, identify hotspots, and find dead code that nobody calls.

Build a Manual Call Graph While Reading

// Starting from the entry point, trace the call chain:
// app.js
app.post('/login', authController.login);
//   └── authController.login()
//         ├── validateLoginRequest(req.body)
//         ├── userService.findByEmail(email)
//         │     └── userRepository.findOne({ email })
//         ├── bcrypt.compare(password, user.passwordHash)
//         └── jwtService.sign({ userId: user.id })

Automated Tools Speed This Up

# JavaScript: use madge for dependency graph
npx madge --image graph.svg src/index.js

# Python: use pycallgraph or py-call-graph
pip install pycallgraph
pycallgraph graphviz -- python app.py

Breadth-First vs Depth-First Reading

Breadth-first: understand every direct call from the entry point before going deeper. Gives you a map before details. Best for orientation.

Depth-first: pick one path and follow it all the way to the bottom. Best for understanding one specific behavior end-to-end.

Use breadth-first first, then depth-first on the path that matters for your task.

Up next

How to read a design pattern you didn't write

Sign in to track progress