<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.js"></script>
  </head>
  <body><canvas id="graph"></canvas></body>
</html>
@import url(https://fonts.googleapis.com/css?family=Lato);

html, body {
  font-family: Lato, Arial, sans-serif;
}
,
h3 {
  font-size: 18px;
}

p {
  font-size: 16px;
}

.container {
  margin-top: 20px;
  padding-top: 20px;
  background-color : #333E67;
  min-height: 400px;
  
  border-radius: 3px;
}

.container {
  width: 19%;
  float: left;
  margin: 0.5%;
}

.card {
  background-color: #fff;
  margin: 2px;
  border-radius: 5px;
  
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}

.card:hover {
  cursor: pointer;
}

.card-header {
  padding: 1px 0 0 1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.card-body {
  padding: 3px 0 3px 3px;
}
var myTemplate = {
          colors: ["#00bf00", "#008fb5", "#f14f4f", "#aaaaaa" ],
          branch: {
            lineWidth: 10,
            spacingX: 50,
            labelRotation: 0
          },
          commit: {
            spacingY: -60,
            dot: {
              size: 14
            },
            message: {
              font: "normal 14pt Arial"
            }
          }
};
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,
  author: "Some Dev <dev@example.com>"
});
 
var master = graph.branch({ name:"master"});
master.commit( { message: "Initial Commit" });
master.tag("v1909.0.0")
var hotfix = master.branch({ name:"release/1909.0", column: 2 })
var feat = master.branch("feat/whizzzbang")
feat.commit( { message: "WhizzBang" });
//feat.commit( { message: "Lint" });feat.commit( { message: "Code Review 1" });feat.commit( { message: "Typo" });feat.commit( { message: "Typo" });feat.commit( { message: "Typo" });
feat.merge(master, {author:"Bors"})
master.tag("v2201.0.0")
hotfix.commit( { message: "HOTHOTHOT FIIIX" });
hotfix.tag("v1909.0.1")
var hotfixmerge = hotfix.branch({ name:"merge/1909.0.1", column: 1, color: "#f1c109" })
master.merge(hotfixmerge, {author:"Bors", color: "#f1c109"})
hotfixmerge.merge(master, {author:"Bors"})
master.tag("v2201.1.0")
var feat = master.branch({ name:"feat/fizzbang", column: 1})
feat.commit( { message: "FizzBang" });
feat.merge(master, {author:"Bors"});
master.tag("v2201.2.0")

hotfix.commit( { message: "warm fix" });
hotfix.tag("v1909.0.2")
var hotfixmerge = hotfix.branch({ name:"merge/1909.0.2", column: 1 })
hotfixmerge.commit( { message: "forward porting 1909.0.2" });
master.merge(hotfixmerge, {author:"Bors"})
hotfixmerge.merge(master, {author:"Bors"})
master.tag("v2201.3.0")
View Compiled
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.6/dragula.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.2/dragula.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.1/highcharts.js
  4. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js