GithGraph.js demo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.9.0/gitgraph.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.9.0/gitgraph.js"></script>
<canvas id="gitGraph"></canvas>

JavaScript

var gitgraph = new GitGraph({
  template: "metro", // or blackarrow
  orientation: "vertical",
  author: "John Doe",
  mode: "extended" // or compact if you don't want the messages
});

var master = gitgraph.branch("master");
master.commit({
  message: "Release of version 0.1",
  tag: "0.1",
  author: "John Releaser"
});

var next = gitgraph.branch({
  parentBranch: master,
  name: "next",
  column: 2
});

var f1 = gitgraph.branch({
  parentBranch: master,
  name: "jd/feature-1",
  column: 3
})

var f2 = gitgraph.branch({
  parentBranch: master,
  name: "jd/feature-2",
  column: 4
})

f1.commit("Develop a feature - part 1");
f2.commit("Develop a second feature - part 1");
f1.commit("Develop a feature - part 2");
f1.merge(next, { tag: "0.2-beta-1" });
f2.commit("Develop a second feature - part 2");
f2.merge(next, { tag: "0.2-beta-2" });
f1.merge(master);
f2.merge(master);

master.commit({
  message: "Release of version 0.2",
  tag: "0.2",
  author: "John Releaser"
});