{"id":118755,"date":"2020-11-18T14:54:53","date_gmt":"2020-11-18T14:54:53","guid":{"rendered":"https:\/\/livablesoftware.com\/?p=118755"},"modified":"2021-01-08T18:51:36","modified_gmt":"2021-01-08T18:51:36","slug":"tools-to-visualize-the-history-of-a-git-repository","status":"publish","type":"post","link":"https:\/\/livablesoftware.com\/tools-to-visualize-the-history-of-a-git-repository\/","title":{"rendered":"Tools to visualize the history of a git repository"},"content":{"rendered":"

I’m a visual person<\/a>. I prefer to use graphical tools whenever possible. This also applies to the management of my (humble) code contributions to the research team tools<\/a>, all of them hosted on GitHub. So far, I’ve been using 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 (see below) and I wanted to explore other, more visual, alternatives to handle the more complex development merging\/branching scenarios we are facing in Xatkit<\/a>. Note that computing and visualizing in a usable way the Git commit-graph is not trivial at all. In fact, Git’s own support for this is improving<\/a>.<\/p>\n

\"SourceTree

SourceTree in action<\/p><\/div>\n

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.<\/p>\n\n

Visual Git Clients<\/h2>\n

There are plenty of Git clients (also for mobile devices!<\/a>). Not that many that emphasize the visual history of the repository. Here we goes my selection.<\/p>\n

\n

GMaster<\/h3>\n

Gmaster\u00a0<\/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.<\/p>\n

\"gmaster<\/p>\n

But this is not the only useful visualization. You can, for instance, also perform visual merges and visual diffs.<\/p>\n

\"Visual<\/a><\/p>\n

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.<\/p>\n

Gmaster is still<\/a> free so give it a try (and give some feedback to the creators!).<\/p>\n

GitKraken<\/h3>\n

GitKraken\u00a0<\/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 educational resources to learn Git<\/a>.<\/p>\n

\"GitKraken<\/a><\/p>\n

GitUp<\/h3>\n
\n

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\u00a0the entire graph of 40,000 commits for the official Git repo in less than a second).<\/p>\n

<\/p>\n

Even better, GitUp is free and entirely open source.\u00a0<\/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.<\/p>\n

\"Another<\/a><\/p>\n<\/div>\n<\/div>\n

Tools to learn Git<\/h2>\n

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<\/p>\n

Git Gud<\/h3>\n

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 why they named the tool Git Gud<\/a>).<\/p>\n

\"GitGud<\/a><\/p>\n

Git School<\/h3>\n

Another learning environment is Git School<\/a>. You can basically do the same as with Git Gud. This time the commit graph is displayed horizontally.<\/p>\n

Similar, though less complete, this web is an example of how you could use D3 to visualize git histories<\/a>.<\/p>\n

\"Git<\/a><\/p>\n

Learn Git Branching<\/h3>\n

LearGitBranching.js<\/a> is more than a playground to run and visualize Git commands. It helps you learn Git by proposing you to complete a sequence of Git exercises of increasing levels of difficulty. Dare to test your Git level with them and see if you can write the Git sequence of commands to reach the proposed scenario!.<\/p>\n

\"Exercises<\/a><\/p>\n

Other interesting Git tools<\/h2>\n

Git History<\/h3>\n

Instead of visualizing the history of the repo, 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.<\/p>\n

\"Git<\/a><\/p>\n

Git Temporal<\/h3>\n

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.<\/p>\n

\"GitTemporal<\/p>\n

Gource<\/h3>\n

Software projects are displayed by 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.<\/p>\n