gitgraph.js and 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 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 pen with the following HTML …

    <link rel="stylesheet" href="" />
    <script src=""></script>
  <body><canvas id="graph"></canvas></body>

… and following JS …

var graph = new GitGraph({
  template: "metro", // or blackarrow
  orientation: "vertical",
  elementId: 'graph',
  mode: "extended", // or compact if you don't want the messages  

var master = graph.branch("master");
master.commit( { message: "Initial Commit" });

… to render the rather simple single commit branch below …

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

var myTemplateConfig = {
    colors: ["#008fb5", "#979797", "#f1c109", "#33cc33"],
          branch: {
            lineWidth: 3,
            spacingX: 30,
            labelRotation: 0
  commit: {
        spacingY: 40,
        dot: {
          size: 10
        message: {
          displayAuthor: false,
          displayBranch: true,
          displayHash: true,
          font: "normal 14pt Arial"
var myTemplate = new GitGraph.Template( myTemplateConfig );

var graph = new GitGraph({
  template: "metro", // or blackarrow
  orientation: "vertical",
  elementId: 'graph',
  mode: "extended", // or compact if you don't want the messages  
  template: myTemplate

… which would render …

The blueprint codepen for this style can be found at

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.

3 responses to “gitgraph.js and for git visualization”

  1. […] Crayon Syntax Highlighter allows you to have syntax highlighted code snippets from a wide variety of languages in your blog posts. It also provides line numbers, optional code wrapping, line expansion and much more. An example snippet can be seen below taken from this post: […]

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: