<canvas id="gitGraph"></canvas>
const template = new GitGraph.Template({
  colors: ['#069fc2', '#8fc93a', '#f0c808', '#f46036', '#e34543'],
  commit: {
    shouldDisplayTooltipsInCompactMode: false,
  	dot: { size: 5, strokeWidth: 2.5 },
    message: {
      color: '#333',
      font: 'normal 10pt monospace',
      displayAuthor: false,
      displayBranch: true,
      displayHash: false
    }
  }
})

const g = new GitGraph({ template, mode: '' })

const master = g.branch({ name: 'master' })
master.commit('Init')

const dev = g.branch({ name: 'dev', parentBranch: master })
dev.commit('Install react-router')
	.commit('Add layout for Dashboard')
  .commit('Add Modal component')
  
const login = g.branch({ name: 'login', parentBranch: dev })
login.commit('Install dependencies')
  .commit('Add layout for form login')
  .commit('Install validation library')
  .commit('Fix typo')
  .commit('Implement login logic')
  .commit('Fix undefined variable')


dev.commit('Add wrapper for HTTP requests')
  .commit('Add layout for homepage')
  
login.merge(dev)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.js