Visualize the history of a git repository
Tags: git, visualization, history
Published: 2020-02-25 11:27:04

I'm a <a href="https://modeling-languages.com/" target="_blank" rel="noopener noreferrer">visual person</a>. I prefer to use graphical tools whenever possible. This also applies to the management of my (humble) code contributions to the <a href="https://som-research.uoc.edu/research-tools/" target="_blank" rel="noopener noreferrer">research team tools</a>, all of them hosted on GitHub. So far, I've been using <a href="https://www.sourcetreeapp.com/" target="_blank" rel="noopener noreferrer">SourceTree</a> as Git client to commit, push, pull,... on the repositories. And it's worked pretty well for me but it offers very limited visualization support and I wanted to explore other, more visual, alternatives to handle the more complex development merging/branching scenarios we are facing in <a href="https://github.com/xatkit-bot-platform" target="_blank" rel="noopener noreferrer">Xatkit</a>. Note that computing and visualizing in a usable way the Git commit-graph is not trivial at all. In fact, <a href="https://devblogs.microsoft.com/devops/supercharging-the-git-commit-graph/" target="_blank" rel="noopener noreferrer">Git's own support for this is improving</a>.


And I did find a few tools. Not all of them useful but all interesting and/or plain surprising. I'll use this post to keep track of them.

<h2>Visual Git Clients</h2>
There are plenty of Git clients (also <a href="https://livablesoftware.com/mobile-apps-git-github-android-iphone/" target="_blank" rel="noopener noreferrer">for mobile devices!</a>). Not that many that emphasize the visual history of the repository. Here we goes my selection.
<div class="mainFeature-subSection">
<h3>GMaster</h3>
<a href="https://gmaster.io/" target="_blank" rel="noopener noreferrer">Gmaster </a>shows a strong commitment to being as visual as possible and not just a GUI wrapper on top of the Git command line. It integrates a number of different visualizations. To begin with, you can use its branch explorer to navigate your repository, checkout branches, diff and merge from this view. The representation also helps identify the commits with more changes at a glance too.

<img class="aligncenter" src="https://gmaster.io/images/home/gmaster-branch-explorer.png?v=NiaJ96P3I6leioEszBtqKdS91jb838RK4IHm7_xpCXU" alt="gmaster Branch Explorer" width="726" height="376" />

But this is not the only useful visualization. You can, for instance, also perform visual merges and visual diffs.

<a href="http://livablesoftware.com/wp-content/uploads/2020/02/visualmerge.png"><img class="wp-image-118761 aligncenter" src="https://livablesoftware.com/wp-content/uploads/2020/02/visualmerge-1024x493.png" alt="Visual merge with gmaster" width="708" height="341" /></a>

Obviously, nobody forces you to everything at the graphical level. You are free to use these visualizations to get an overview of the state of the project and then move on to a more classical text diff/merge for the fine-grained details.

Gmaster is <a href="https://gmaster.io/pricing" target="_blank" rel="noopener noreferrer">still</a> free so give it a try (and give some feedback to the creators!).
<h3>GitKraken</h3>
<a href="https://www.gitkraken.com/git-client" target="_blank" rel="noopener noreferrer">GitKraken </a>is one of the most well-known Git clients. It comes with a large number of features and integrations. Among them, a visual commit history that includes also a drag-drop functionality. It's a very interesting option for students, educators and non-profits as, beyond a free plan, they offer a pro account to all of them plus a large number of <a href="https://www.gitkraken.com/learn-git" target="_blank" rel="noopener noreferrer">educational resources to learn Git</a>.

<a href="http://livablesoftware.com/wp-content/uploads/2020/02/gitkraken.png"><img class="size-full wp-image-118762 aligncenter" src="https://livablesoftware.com/wp-content/uploads/2020/02/gitkraken.png" alt="GitKraken client" width="906" height="517" /></a>
<h3>GitUp</h3>
<div class="mainFeature-subSection">
<p class="mainFeature-subSection-blurb"><a href="https://gitup.co/" target="_blank" rel="noopener noreferrer">GitUp</a> lets you see your entire labyrinth of branches and merges with perfect clarity. Any change you make, large or small, even outside GitUp, is immediately reflected in GitUp's graph. No refreshing, no waiting. And serious speed as well (they claim to render the entire graph of 40,000 commits for the official Git repo in less than a second).</p>
<img class="aligncenter" src="https://gitup.co/images/map.gif" />

Even better, <a href="https://github.com/git-up/GitUp" target="_blank" rel="noopener noreferrer">GitUp is free and entirely open source. </a>To top it off, in the same repo you'll find GitUpKit, a reusable generic Git toolkit. GitUp itself is built as a thin layer on top of GitUpKit. This means that you can use that same GitUpKit framework to build your very own Git UI.

<a href="http://livablesoftware.com/wp-content/uploads/2020/02/gitup.png"><img class=" wp-image-118760 aligncenter" src="https://livablesoftware.com/wp-content/uploads/2020/02/gitup-1024x653.png" alt="Another GitUp screenshot" width="612" height="390" /></a>

</div>
</div>
<h2>Tools to learn Git</h2>
Tools whose purpose is to help you learn how Git works. They are basically an online environment where you can type sequences of Git commands and the tool renders a visualization to help you understand what's going on in response to your commands
<h3>Git Gud</h3>
<a href="https://nic-hartley.github.io/git-gud/" target="_blank" rel="noopener noreferrer">Git Gud</a> is a minimalistic web-based environment where you can write git commands and see their impact on an initially empty repository, with the sole purpose of "getting good" (I guess this is <a href="https://www.urbandictionary.com/define.php?term=GiT%20GuD" target="_blank" rel="noopener noreferrer">why they named the tool Git Gud</a>).

<a href="http://livablesoftware.com/wp-content/uploads/2020/02/gitgud.png"><img class=" wp-image-118756 aligncenter" src="https://livablesoftware.com/wp-content/uploads/2020/02/gitgud.png" alt="GitGud tool" width="572" height="518" /></a>
<h3>Git School</h3>
Another learning environment is <a href="https://git-school.github.io/visualizing-git/" target="_blank" rel="noopener noreferrer">Git School</a>. You can basically do the same as with Git Gud. This time the commit graph is displayed horizontally

<a href="http://livablesoftware.com/wp-content/uploads/2020/02/gitschool.png"><img class=" wp-image-118759 aligncenter" src="https://livablesoftware.com/wp-content/uploads/2020/02/gitschool.png" alt="Git School visualization" width="598" height="473" /></a>
<h2>Other interesting Git tools</h2>
<h3>Git History</h3>
Instead of visualizing the history of the repo, <a href="https://githistory.xyz/" target="_blank" rel="noopener noreferrer">Git History</a> helps you to quickly browse the history of files in any git repo. Go back in time and see who did what changes when.

<a href="http://livablesoftware.com/wp-content/uploads/2020/02/githistory.png"><img class="size-full wp-image-118758 aligncenter" src="https://livablesoftware.com/wp-content/uploads/2020/02/githistory.png" alt="Git History of a file" width="728" height="447" /></a>
<h3>Git Temporal</h3>
<a href="https://marketplace.visualstudio.com/items?itemName=bee.git-temporal-vscode" target="_blank" rel="noopener noreferrer">Git Temporal for VSCode</a> has a similar goal: to allow you to quickly see the changes over time to a file or directory in your Git repository.

<img class="aligncenter" src="https://raw.githubusercontent.com/git-temporal/git-temporal/master/packages/git-temporal-vscode/images/gtdemo.gif" alt="GitTemporal Demo" width="712" height="420" />
<h3>Gource</h3>
Software projects are displayed by <a href="https://gource.io/" target="_blank" rel="noopener noreferrer">Gource</a> as an animated tree with the root directory of the project at its centre. Directories appear as branches with files as leaves. Developers can be seen working on the tree at the times they contributed to the project. Not really sure this animation alone brings any useful information but it's definitely cool to see. Check the video below, showing the history of python development, to understand better what I'm talking about.

{% youtube aPk1BqK8zzI %}