7 tools for visualizing a codebase

Photo by Hanna Morris on Unsplash

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

Visualize call graphs

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

code2flow code2flow/engine.py code2flow/python.py --target-function=code2flow --downstream-depth=3
Call graph of a student project by Pamela Fox. Slides.
pyan *.py --uses --no-defines --colored --grouped --annotated --svg >myuses.svg

Visualize dependencies

A fundamental functionality of build systems and package managers is dependency resolution. As you’d expect, many visualization tools tap into dependency graphs generated by these software to plot diagrams for a repository.

bazel query 'deps(//:main)' --output graph > dependencies.in
dot -Tpng < dependencies.in > dependencies.svg
pipdeptree --graph-output svg > dependencies.svg
mvn com.github.ferstl:depgraph-maven-plugin:graph

I want more interactivity!

Maybe you’re not here to fill up your README; rather, you just want to learn about a repo as quickly and intuitively as possible. If that’s the case, there are some nice tools you can play with:

  • Gource: A locally-run software.
  • CodeSee: A cloud service that offers paid plans.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ming

Ming

Tech writer with creative analogies. Website: https://myli.page | Donate: https://ko-fi.com/mingyli