Get Beautiful Git Graphs: An Easy Guide for Installation and Usage

Get Beautiful Git Graphs: An Easy Guide for Installation and Usage

Enhance your workflow with visually appealing Git graphs and enjoy the advantages of their streamlined design

Working with Git for our projects is something many of us do. We mostly use Git Bash. It's useful for managing our projects and keeping track of changes.

But here's where things get a bit tricky: when we want to look at things like graphs or logs to understand our work better, things can get a little confusing.

I mean Bash can indeed show graphs but they aren't very intuitive and interactive. Look at this example:

Git log graph

This isn't very intuitive or good-looking, is it? So you might want to see something beautiful to look and that doesn't add up to the frustration that you already have.

It might not be necessary but looking at a good UI that shows beautiful graphs is great for keeping focused and relieved.

How to see beautiful git graphs?

Now how do we get those beautiful graphs? There are two ways to do that. Each one has its benefits. But both ensure that you can look at beautiful graphs as well as still use bash and your main git software. The two methods are:

  1. Install specialized software for this

  2. VScode Git extension

We will look into both methods and see how to use them.

1. Git Extension:

Out of the different choices you have, I really like using Git extensions the most. This option has great benefits and is a really good way to make your Git experience better.

With Git extensions, you can do things easily without typing in commands, which makes your work smoother. Plus, you can easily see cool graphs that show things visually.

This way of working is convenient, efficient, and looks nice, all coming together to make using Git feel really good.

Take a look:

See the beauty of it. It compiles the tree data into a beautiful graph that has:

  • Separate branches into different colors

  • Proper Alignment

  • And great readability

That ensures that you can accurate information in a clean and sleek way. Rather than looking at the graph generated by this command:

Git log --all --decorate --oneline --graph

Installing Git Extensions

Follow these steps to unlock the power of Git Extensions and enjoy the visual beauty of your repository's history:

  1. Download Git Extensions: Head to the official Git Extensions website and download the Windows installer. Here is the original Git extensions website.

  2. Run the Installer: Locate the downloaded file and run the installer.

  3. Launch Git Extensions: Once installed, launch Git Extensions from your Start menu or desktop shortcut.

  4. Experience Visual Git Graphs: With Git Extensions up and running, open your project and click on the Git icon in the top-right corner.

Behold the beautiful graphs that offer a visual representation of your Git history and branches.

2. VScode extension git graph

Now, if you're looking to bring this experience right into your code editor, that's also possible and even better. I'll walk you through the process using Visual Studio Code (VSCode), but keep in mind that this capability is also available for other editors or Integrated Development Environments (IDEs).

Whether you prefer VSCode or other options, rest assured that you can enjoy the convenience of a cohesive Git experience directly within your chosen code editor.

Installation of Gitlense

So for VScode, we have Gitlens that just fuels your git experience. So for that follow these steps:

  1. Open Visual Studio Code.

  2. Go to the Extensions view by clicking on the square icon in the sidebar on the left or pressing Ctrl+Shift+X.

  3. Search for "GitLens" in the Extensions Marketplace.

  4. Click the "Install" button next to the "GitLens — Git supercharged" extension.

Once installed, open your project folder and a file from within it. You'll notice a small Git icon in the top-right corner of the editor. Click on it and choose "Show Git Graph" from the dropdown menu.

The Git Graph panel will then open, providing an interactive visualization of your Git repository's history and branches. This allows you to click on commits for details, zoom in and out for clarity, drag to navigate the graph, and right-click on commits for context menu options.

By clicking on the "Show Branches" icon within the Git Graph panel, you can view the list of branches and their relationships. GitLens provides an efficient way to understand your repository's history, visualize branching patterns, and gain insights into the codebase's evolution—all directly within Visual Studio Code.

Final words

I hope this guide has proven helpful and enables you to embark on a more efficient and contemporary Git SCM journey.

If you found this information valuable, consider giving it a thumbs-up and sharing it within your network to extend the benefit.

For a consistent stream of insightful content covering software engineering, programming, and web development, make sure to follow me. Your support is greatly appreciated. Thank you.