Created a new tag Special working similar as Milestone but draw a line

packages/mermaid/src/diagrams/gantt/ganttDb.js

@@ -33,7 +33,7 @@ let sections = [];
 let tasks = [];
 let currentSection = '';
 let displayMode = '';
-const tags = ['active', 'done', 'crit', 'milestone', 'vert'];
+const tags = ['active', 'done', 'crit', 'milestone', 'vert', 'special'];
 let funs = [];
 let inclusiveEndDates = false;
 let topAxis = false;
@@ -422,7 +422,7 @@ const compileData = function (prevTask, dataStr) {
 
   const task = {};
 
-  // Get tags like active, done, crit and milestone
+  // Get tags like active, done, crit, milestone, and special
   getTaskTags(data, task, tags);
 
   for (let i = 0; i < data.length; i++) {
@@ -470,7 +470,7 @@ const parseData = function (prevTaskId, dataStr) {
 
   const task = {};
 
-  // Get tags like active, done, crit and milestone
+  // Get tags like active, done, crit, milestone, and special
   getTaskTags(data, task, tags);
 
   for (let i = 0; i < data.length; i++) {
@@ -538,6 +538,7 @@ export const addTask = function (descr, data) {
   rawTask.done = taskInfo.done;
   rawTask.crit = taskInfo.crit;
   rawTask.milestone = taskInfo.milestone;
+  rawTask.special = taskInfo.special;
   rawTask.vert = taskInfo.vert;
   rawTask.order = lastOrder;
 
@@ -571,6 +572,7 @@ export const addTaskOrg = function (descr, data) {
   newTask.done = taskInfo.done;
   newTask.crit = taskInfo.crit;
   newTask.milestone = taskInfo.milestone;
+  newTask.special = taskInfo.special;
   newTask.vert = taskInfo.vert;
   lastTask = newTask;
   tasks.push(newTask);

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

@@ -284,6 +284,14 @@ export const draw = function (text, id, version, diagObj) {
             0.5 * theBarHeight
           );
         }
+        if (d.special) {
+          return (
+            timeScale(d.startTime) +
+            theSidePad +
+            0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) -
+            0.5 * theBarHeight
+          );
+        }
         return timeScale(d.startTime) + theSidePad;
       })
       .attr('y', function (d, i) {
@@ -295,6 +303,9 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           return theBarHeight;
         }
+        if (d.special) {
+          return theBarHeight;
+        }
         return timeScale(d.renderEndTime || d.endTime) - timeScale(d.startTime);
       })
       .attr('height', theBarHeight)
@@ -355,6 +366,10 @@ export const draw = function (text, id, version, diagObj) {
           taskClass = ' milestone ' + taskClass;
         }
 
+        if (d.special) {
+          taskClass = ' special ' + taskClass;
+        }
+
         taskClass += secNum;
 
         taskClass += ' ' + classStr;
@@ -381,6 +396,12 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           endX = startX + theBarHeight;
         }
+        if (d.special) {
+          startX += 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - 0.5 * theBarHeight;
+        }
+        if (d.special) {
+          endX = startX + theBarHeight;
+        }
         const textWidth = this.getBBox().width;
 
         // Check id text width > width of rectangle
@@ -406,6 +427,9 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           endX = startX + theBarHeight;
         }
+        if (d.special) {
+          endX = startX + theBarHeight;
+        }
         const textWidth = this.getBBox().width;
 
         let classStr = '';
@@ -444,6 +468,9 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           taskType += ' milestoneText';
         }
+        if (d.special) {
+          taskType += ' specialText';
+        }
 
         // Check id text width > width of rectangle
         if (textWidth > endX - startX) {
@@ -771,6 +798,25 @@ export const draw = function (text, id, version, diagObj) {
     }
   }
 
+  /**
+   * @param theSidePad
+   * @param theTopPad
+   * @param w
+   * @param h
+   */
+  function _drawDate(theSidePad, theTopPad, w, h) {
+    const todayG = svg.append('g').attr('class', 'today');
+    const today = new Date();
+    const todayLine = todayG.append('line');
+
+    todayLine
+      .attr('x1', timeScale(today) + theSidePad)
+      .attr('x2', timeScale(today) + theSidePad)
+      .attr('y1', conf.titleTopMargin)
+      .attr('y2', h - conf.titleTopMargin)
+      .attr('class', 'today');
+  }
+
   /**
    * From this stack exchange question:
    * http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript

packages/mermaid/src/diagrams/gantt/styles.js

@@ -237,6 +237,19 @@ const getStyles = (options) =>
     fill: ${options.taskTextDarkColor} !important;
   }
 
+  .special {
+      transform: none;
+      border-radius: 0;
+      width: 3px;
+      height: 100%;
+      fill: red;
+  }
+
+  .specialText {
+      font-weight: bold;
+      fill: red;
+  }
+
   .activeCritText0,
   .activeCritText1,
   .activeCritText2,