GitGraph diagram support in MarkDown editor

Description

GitLab MarkDown page can support GitGraph diagrams.

It would be done in a block such as:

var myTemplateConfig = {
  branch: {
    lineWidth: 8,
    spacingX: 50,
    showLabel: true,                  // display branch names on graph
  },
  commit: {
    spacingY: -50,
    dot: {
      size: 12
    },
    message: {
      displayAuthor: false,
      displayBranch: false,
      displayHash: false,
      font: "normal 12pt Arial"
    },
    shouldDisplayTooltipsInCompactMode: false, // default = true
    tooltipHTMLFormatter: function ( commit ) {
      return "" + commit.sha1 + "" + ": " + commit.message;
    }
  }
};
var myTemplate = new GitGraph.Template( myTemplateConfig );

var config = {
  template: myTemplate //"blackarrow"
  , mode: "compact"
  , orientation: "vertical"
  , reverseArrow: false
};
var gitGraph = new GitGraph(config);

// Create branch named "master"
var master = gitGraph.branch("master");

// Commit on HEAD Branch which is "master"
master
    .commit()
  .commit()
  .commit();

var dev = master.branch("dev");
dev
  .commit({dotColor: "red"})
  .commit({dotColor: "red"})
  .commit({dotColor: "lightGreen"});

master
    .commit()
    .commit();

dev.merge(master, {dotColor: "blue"});

Such code would render: gitgraph

Use cases

Developers might want to document their Git workflow in their MarkDown documentation of their Git Project.

Feature checklist

Make sure these are completed before closing the issue, with a link to the relevant commit.

Edited by 🤖 GitLab Bot 🤖