Addshore

It's a blog

gitgraph.js and codepen.io for git visualization

I was looking for a new tool for easily visualizing git branches and workflows to try and visually show how Gerrit works (in terms of git basics) to clear up some confusions. I spent a short while reading stackoverflow, although most of the suggestions weren’t really any good as I didn’t want to visualize a real repository, but a fake set of hypothetical branches and commits.

I was suggested Graphviz by a friend, and quickly found webgraphviz.com which was going in the right direction, but this would require me to learn how to write DOT graph files.

Eventually I found gitgraph.js, which is a small JavaScript library for visualizing branching ‘things’, such as git, well, mainly git, hence the name and produce graphics such as the one below.

In order to rapidly prototype with gitgraph I setup a blueprint codepen.io pen with the following HTML …

… and following JS …

… to render the rather simple single commit branch below …

Styling can be adjusted passing a template into the GitGraph object …

… which would render …

The blueprint codepen for this style can be found at https://codepen.io/addshore/pen/xWdZXQ.

With this blueprint setup I now have a starting point for further visualizations using gitgraph and codepen comparing Gerrit and Github, for example below comparing a merged pull request consisting of two commits, the second of which contains fixes for the first, vs a single change in gerrit, that has 2 seperate versions.

Keep an eye out on this blog for any more progress I make with this.

1 Comment

  1. I really like gitgraph.js, in fact it’s what I used to produce the graph on https://phabricator.wikimedia.org/T89945

Leave a Comment

© 2018 Addshore

Theme by Anders NorenUp ↑

%d bloggers like this: