7 tools for visualizing a codebase

Need to write a README file, but not sure what to say? If this is a frustration that bothers you frequently, you might consider beefing your document up with a diagram. After all, a picture is worth a thousand words, as the cliche goes.

Photo by Hanna Morris on Unsplash

This article collects tools that generates graphs for a code repository.

Visualize files by size and type

Let’s start with the most generic tool, repo-visualizer. It plots files as bubbles, indicating their extension names and sizes with colors and sizes, respectively. It's brought to you by GitHub Next, a lab at GitHub the company, and (naturally) it's packaged as a GitHub Action.

Visualize Docker Compose files

The next tool specifically caters to Docker users, but it’s still language-agnostic. To visualize docker-compose.yml, you can use docker-compose-viz:

docker run \--rm \-it \--name dcv \-v $(pwd):/input pmsipilot/docker-compose-viz render \-m image docker-compose.yml

Here’s how it would look:

I like how it’s also plotting extra information like open ports and mounted volumes.

Visualize call graphs

Code2flow supports a couple of dynamic languages, including Python, JavaScript, Ruby, and PHP.

Here’s the example provided in its README:

code2flow code2flow/engine.py code2flow/python.py --target-function=code2flow --downstream-depth=3

Call graph of a student project by Pamela Fox. Slides.

If Python is the only language you care about, you might have heard of pycallgraph , but -- alas, the bane of open source software projects -- the original author had to abandon the project due to personal time constraints. The most sensible alternative I can find is pyan.

pyan *.py --uses --no-defines --colored --grouped --annotated --svg >myuses.svg