JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

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

JavaScript

var myTemplateConfig = {
  colors: [ "#F00", "#0F0", "#0dF" ], // branches colors, 1 per column
  branch: {
    lineWidth: 6,
    spacingX: 50,
    showLabel: true,                  // display branch names on graph
  },
  commit: {
    spacingY: -80,
    dot: {
      size: 12
    },
    message: {
      displayAuthor: true,
      displayBranch: false,
      displayHash: false,
      font: "normal 14pt Consolas"
    },
    shouldDisplayTooltipsInCompactMode: false, // default = true
    tooltipHTMLFormatter: function ( commit ) {
      return "" + commit.sha1 + "" + ": " + commit.message;
    }
  }
};
var myTemplate = new GitGraph.Template( myTemplateConfig );

var gitgraph = new GitGraph({
  template: myTemplate,
  reverseArrow: true,
  orientation: "horizontal",
  mode: "compact"
});

var master = gitgraph.branch({name: 'master', column: 1});

gitgraph.commit("...");
var develop = gitgraph.branch({name: 'dev', column: 2});    // New branch from HEAD
develop.commit();
develop.commit();
develop.commit();

develop.merge(master);

develop.commit();
develop.commit();

develop.merge(master);

develop.commit();
develop.commit();

var hotfix = master.branch({
	name: 'HotFix', column: 0
});
hotfix.commit();

hotfix.merge(master);
hotfix.merge(develop);

develop.commit();