CBRV - The CodeBase Relationship Visualizer
Understanding relationships between files and their directory structure is a fundamental part of the software development process. However, it can be hard to grasp these relationships without a convenient way to visualize them and how they fit into the directory structure of the codebase. CodeBase Relationship Visualizer (CBRV), is a Visual Studio Code extension that interactively visualizes the relationships between files.
CBRV displays the relationships between files as arrows superimposed over a circle packing diagram of the codebase's directory structure. The visualization is inspired by Repo Visualizer but interactive and zoomable.
CBRV comes bundled with visualizations of the stack trace path, a dependency graph for Python codebases, and a hyperlink graph for HTML and Markdown. CBRV also exposes an API that can be used by other extensions to create visualizations for different relationships.
Stack Trace Visualization
The command "Visualize the stack trace during a debugger session" brings up the Stack Trace Visualization.
This visualization displays the stack trace as a line over the directory structure diagram. Arrows jump between the files in the current stack trace, displaying a line following the current path of execution though the code base. The visualization is linked with the debugger in real time, as you step though the debugger the visualization will update to match the current stack trace.
In the case of multithreading, multiple stack trace lines are rendered, each color-coded by thread. The extension is only be able to show stack traces for threads that are currently stopped on a breakpoint in the debugger.
The visualization uses the DAP to allow it to interface with most VSCode debuggers.
The command "Visualize the dependencies between Python files" brings up the Dependency Visualization. This
visualization displays dependencies between files in Python codebases. It displays a directed arrow for any
The command "Visualize a hyperlink graph" brings up the Hyperlink Visualization. This visualization uses the CBRV API
to display references between HTML and Markdown files. It displays a directed arrow for any
CBRV exposes an API that can be used to create your own VSCode extensions with visualizations of different relationships
between files. You can access the API in your extension by adding
See https://code.visualstudio.com/api/references/vscode-api#extensions for more info on importing extensions.
API docs are available at https://jesse-r-s-hines.github.io/CodeBaseRelationshipVisualizer. You can see examples of using the API in the src/visualizations folder.
To run the project from source run
then open it up in VSCode and press
To run the Python Dependency Graph visualization you'll need to have Python3 installed.
On Windows, you'll want to enable git symlinks before you clone the repo, first enable "Developer Mode" in Windows settings and then run
To build and run the tests run