The other day I was trying to describe some branching and merging strategies over distributed repositories to a remote coworker. Sadly I’m fairly new to complex git branching behaviour, so I had a hard time describing what I was trying to say.

I realised the best thing to do was to try and share some diagrams. Now being clued up on javascript, and having a few minutes spare I researched to see if there is anything I could use to generate descriptive diagrams for me.

Luckily I stumbled across Git Graph JS. It’s a really simple library for showing git concepts. Without further ado - let’s see some code. First we setup some objects…

var gitgraph = new GitGraph(orientation: "vertical"),
    
    masterBranch,
    uatBranch,
    developmentBranch,

    userMaster = "@Digiguru",
    userUAT = "@UAT",
    userDEV = "@Dev";

Now let’s visualise the first commit in the master branch

masterBranch = gitgraph.branch("Master");
masterBranch.commit({
    message: "Initial Release",
    author: userMaster
});

Now I wanted to describe our UAT area should be branched from master…

uatBranch = masterBranch.branch("UAT"); 

uatBranch.commit({
    message: "Branch for UAT area",
    author: userMaster
});

Now features should be worked on in their separate feature branches that are taken off UAT. This allows us to keep the UAT area clean from volatility while the sprints are underway.

developmentBranch = uatBranch.branch("Feature");
developmentBranch.commit({
    message: "Supplier feature being worked on",
    author: userDEV
});

developmentBranch.commit({
    message: "Feature nearing compeltion",
    author: userDEV
});
developmentBranch.commit({
    message: "Ready for UAT",
    author: userDEV
});

Eventually we have to get the branch back into UAT. When we are there we notice a bug, and make a fix. Notice you “Push” merges from the feature into the UAT branch.

developmentBranch.merge(uatBranch, {
    message: "Merge Supplier feature into UAT",
    author: userUAT
});

uatBranch.commit({
    message: "Bugfix from UAT",
    author: userUAT
});

Finally commit to master

uatBranch.merge(masterBranch, {
    message: "Release 1",
    author: userMaster
});

Bonus

Thanks to these visualizations being in javascript you can easily amend properties, like rotating them and applying arrows.

var gitgraph = new GitGraph({orientation: "horizontal", template: "blackarrow"}),

Git Graph JS is a really good library and super simple to use. If you want to visualise git commits, then this is worth a look.