Coding paradigm: line by line all my opinions are belong to me

Gitgraph.js: drawcode your release processes

Today I learned a useful release process drawing trick. The best way to ensure I don’t forget about it tomorrow is post-it blog post. gitgraph.js render example


Given the length, here’s a helpful table of contents.


Today I had the exercise to draw the diagram of release process. Puzzled by this task I searched around that is the best way to draw the thing. I remembered git-flow A successful Git branching model diagram, which I find visually appealing.

Using my google-fu I discovered gitgraph.js, which visually is similar to style I like.

So, I decided to use this to scratch 2 itches: 1. draw the thing :) 2. code the thing.

Why code the thing is important here? If I missed something, or would like to reorganize some bits - I now have the option to refactor it. Ok, I can hear you now:

Developers like to develop and refactor things

And you are absolutely right, we do!

Example: Draw line with process steps

We emulate this with branches and commits.

Line with process steps

// config - defines the layout of the graph, e.g. vertical or horizontal, colors, fonts etc..
var gitgraph = new GitGraph(config);

// Define the line.
var master = gitgraph.branch({ name: "master", column: 0 });

// Add initial point, as thick blue cicrle with white center.
master.commit({ message: mkLoremIpsum(""), dotStrokeWidth: 10, dotStrokeColor: "blue", color: "white" });
// add point without message and metadata 
master.commit({ messageDisplay: false });
master.commit({ message: mkLoremIpsum("") });

Example: Detour (split) the process

We emulate this with extra branches.

Process detour

var release = gitgraph.branch({ parentBranch: master, name: "v1.2.1.0", column: 1 });
release.commit({ messageDisplay: false });

Example: Process junction

We emulate this this merges.

Process junxtion

release.commit({ message: mkLoremIpsum(""), tag: "v1.2.1.2" });
release.merge(master, { dotStrokeWidth: 10, message: mkLoremIpsum("") });

Full Sketch & Source code

Example Sketch

The sketch source code is found at


NB. If you've found typos or errors, please suggest a correction or edit on github.
comments powered by Disqus