GitGraph

An innovative tool for dynamic visualization of Python codebases.
View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

GitGraph dynamically generates interactive visualizations of dependencies and relationships within a Python codebase, leveraging Tree-sitter for parsing and d3.js for rendering.

Built With

• Tree-sitter
• d3.js
• Python

(back to top)

Getting Started

Prerequisites

• Node.js and npm

  npm install npm@latest -g

Installation

1. Clone the GitGraph repo

   git clone https://github.com/shreshthgoyal/gitgraph.git

2. Install NPM packages

   npm install

3. Start the project

   npm start

(back to top)

Usage

GitGraph is designed with an intuitive interface to offer a seamless experience in visualizing and understanding Python codebases. To get started with GitGraph, follow these simple steps:

1. Codebase Selection: Add the Python codebase's GitHub username and repository name in the designated fields. This action initiates the visualization process, allowing GitGraph to dynamically generate an interactive graph of the codebase.

2. Interactive Graph Navigation:

   • Drag and Place: The nodes representing functions, classes, and files in the graph are interactive. You can drag and position them anywhere on the canvas to organize the view according to your preference.
   • Zoom: Use the zoom in and out features to adjust the graph's view. This functionality allows you to focus on specific details or get an overview of the entire codebase structure.

3. Detailed Analysis:

   • Sidebar Information: Hovering over nodes and links activates a sidebar that displays detailed information, such as the list of neighbor nodes and the functions imported from each file. This feature provides quick insights into the codebase's structure and dependencies.
   • Hyperlinks: Each file represented in the graph is hyperlinked to its respective location in the GitHub repository. This direct link enables quick access to the source code for in-depth analysis.

4. Function Definitions:

   • Quick View Modal: Clicking on a function node within the graph opens a modal window displaying the function's definition. This quick view feature allows for an immediate understanding of the function's purpose and implementation without navigating away from the graph.

(back to top)

Roadmap

• Add support for additional programming languages
• Introduce more interactive features
• Optimize performance

(back to top)

Contributing

Contributions are greatly appreciated. For any contributions, please fork the repo and create a pull request.

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Shreshth Goyal - @shreshthg30

Project Link: https://github.com/shreshthgoyal/gitgraph

(back to top)

Acknowledgments

• Node.js
• npm

(back to top)