From 1125f5a28339d38a09bff067b432854a5830b993 Mon Sep 17 00:00:00 2001
From: megantriplett <megantriplett10@gmail.com>
Date: Tue, 18 Mar 2025 16:10:16 -0400
Subject: [PATCH 01/22] added new tag "vert" in ganttDB

---
 packages/mermaid/src/diagrams/gantt/ganttDb.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 15c7fab97..3731dacbe 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/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'];
+const tags = ['active', 'done', 'crit', 'milestone', 'vert'];
 let funs = [];
 let inclusiveEndDates = false;
 let topAxis = false;
@@ -538,6 +538,7 @@ export const addTask = function (descr, data) {
   rawTask.done = taskInfo.done;
   rawTask.crit = taskInfo.crit;
   rawTask.milestone = taskInfo.milestone;
+  rawTask.vert = taskInfo.vert;
   rawTask.order = lastOrder;
 
   lastOrder++;
@@ -570,6 +571,7 @@ export const addTaskOrg = function (descr, data) {
   newTask.done = taskInfo.done;
   newTask.crit = taskInfo.crit;
   newTask.milestone = taskInfo.milestone;
+  newTask.vert = taskInfo.vert;
   lastTask = newTask;
   tasks.push(newTask);
 };

From 2bc3a0f97c1fcc49929c4814c22f28756846836e Mon Sep 17 00:00:00 2001
From: megantriplett <megantriplett10@gmail.com>
Date: Fri, 21 Mar 2025 15:28:34 -0400
Subject: [PATCH 02/22] vert is now a copy of milestone tag

---
 .../src/diagrams/gantt/ganttRenderer.js       | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index a10eb100f..7ef58f9c2 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -284,6 +284,14 @@ export const draw = function (text, id, version, diagObj) {
             0.5 * theBarHeight
           );
         }
+        if (d.vert) {
+          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.vert) {
+          return theBarHeight;
+        }
         return timeScale(d.renderEndTime || d.endTime) - timeScale(d.startTime);
       })
       .attr('height', theBarHeight)
@@ -354,6 +365,9 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           taskClass = ' milestone ' + taskClass;
         }
+        if (d.vert) {
+          taskClass = ' vert ' + taskClass;
+        }
 
         taskClass += secNum;
 
@@ -381,6 +395,13 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           endX = startX + theBarHeight;
         }
+
+        if (d.vert) {
+          startX += 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - 0.5 * theBarHeight;
+        }
+        if (d.vert) {
+          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.vert) {
+          endX = startX + theBarHeight;
+        }
         const textWidth = this.getBBox().width;
 
         let classStr = '';
@@ -445,6 +469,10 @@ export const draw = function (text, id, version, diagObj) {
           taskType += ' milestoneText';
         }
 
+        if (d.vert) {
+          taskType += ' vertText';
+        }
+
         // Check id text width > width of rectangle
         if (textWidth > endX - startX) {
           if (endX + textWidth + 1.5 * conf.leftPadding > w) {

From a401a4ab4924786cafee752cd47c22e9231dbe38 Mon Sep 17 00:00:00 2001
From: megantriplett <megantriplett10@gmail.com>
Date: Fri, 21 Mar 2025 15:39:38 -0400
Subject: [PATCH 03/22] Made vert render a vertical line

---
 .../mermaid/src/diagrams/gantt/ganttRenderer.js     | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 7ef58f9c2..cb5590fd1 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -297,6 +297,9 @@ export const draw = function (text, id, version, diagObj) {
       .attr('y', function (d, i) {
         // Ignore the incoming i value and use our order instead
         i = d.order;
+        if (d.vert) {
+          return 0;
+        }
         return i * theGap + theTopPad;
       })
       .attr('width', function (d) {
@@ -304,11 +307,17 @@ export const draw = function (text, id, version, diagObj) {
           return theBarHeight;
         }
         if (d.vert) {
-          return theBarHeight;
+          return 0.005 * theBarHeight;
         }
         return timeScale(d.renderEndTime || d.endTime) - timeScale(d.startTime);
       })
-      .attr('height', theBarHeight)
+      // .attr('height', theBarHeight)
+      .attr('height', function (d) {
+        if (d.vert) {
+          return 1000.5 * theBarHeight;
+        }
+        return theBarHeight;
+      })
       .attr('transform-origin', function (d, i) {
         // Ignore the incoming i value and use our order instead
         i = d.order;

From e8986eb54672e04d60778670dfbd01fb325e93bc Mon Sep 17 00:00:00 2001
From: megantriplett <megantriplett10@gmail.com>
Date: Wed, 26 Mar 2025 18:37:09 -0400
Subject: [PATCH 04/22] Removed previous x movement for vert and moved text
 down (not exactly at bottom yet)

---
 .../src/diagrams/gantt/ganttRenderer.js       | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index cb5590fd1..8fe77d36d 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -284,14 +284,14 @@ export const draw = function (text, id, version, diagObj) {
             0.5 * theBarHeight
           );
         }
-        if (d.vert) {
-          return (
-            timeScale(d.startTime) +
-            theSidePad +
-            0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) -
-            0.5 * theBarHeight
-          );
-        }
+        // if (d.vert) {
+        //   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) {
@@ -405,12 +405,6 @@ export const draw = function (text, id, version, diagObj) {
           endX = startX + theBarHeight;
         }
 
-        if (d.vert) {
-          startX += 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - 0.5 * theBarHeight;
-        }
-        if (d.vert) {
-          endX = startX + theBarHeight;
-        }
         const textWidth = this.getBBox().width;
 
         // Check id text width > width of rectangle
@@ -427,6 +421,9 @@ export const draw = function (text, id, version, diagObj) {
       .attr('y', function (d, i) {
         // Ignore the incoming i value and use our order instead
         i = d.order;
+        if (d.vert) {
+          return conf.barHeight * 8 + (conf.fontSize / 2 - 2) + theTopPad;
+        }
         return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;
       })
       .attr('text-height', theBarHeight)

From 350543a5e2aa1f0edb5911b919a9235f0311dac4 Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Thu, 27 Mar 2025 21:51:57 -0400
Subject: [PATCH 05/22] Created a new tag Special working similar as Milestone
 but draw a line

---
 .../mermaid/src/diagrams/gantt/ganttDb.js     |  8 ++--
 .../src/diagrams/gantt/ganttRenderer.js       | 46 +++++++++++++++++++
 packages/mermaid/src/diagrams/gantt/styles.js | 13 ++++++
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 3731dacbe..034a4d2b9 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/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);
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index a10eb100f..52af5cfa4 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/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
diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 5b53a1b07..ec4201562 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/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,

From c1db4f2ed088af4d680137bde550cbae9662ac91 Mon Sep 17 00:00:00 2001
From: megantriplett <megantriplett10@gmail.com>
Date: Fri, 28 Mar 2025 16:08:44 -0400
Subject: [PATCH 06/22] Moved text to bottom of graph, even when rows are
 added/deleted

---
 .../mermaid/src/diagrams/gantt/ganttRenderer.js    | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 8fe77d36d..bb30fed99 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -234,7 +234,7 @@ export const draw = function (text, id, version, diagObj) {
     // Get unique task orders. Required to draw the background rects when display mode is compact.
     const uniqueTaskOrderIds = [...new Set(theArray.map((item) => item.order))];
     const uniqueTasks = uniqueTaskOrderIds.map((id) => theArray.find((item) => item.order === id));
-
+    const numOccurrences = Object.keys(categoryHeights).map((d) => [d, categoryHeights[d]]);
     // Draw background rects covering the entire width of the graph, these form the section rows.
     svg
       .append('g')
@@ -243,6 +243,8 @@ export const draw = function (text, id, version, diagObj) {
       .enter()
       .append('rect')
       .attr('x', 0)
+      .data(numOccurrences)
+      .enter()
       .attr('y', function (d, i) {
         // Ignore the incoming i value and use our order instead
         i = d.order;
@@ -420,10 +422,16 @@ export const draw = function (text, id, version, diagObj) {
       })
       .attr('y', function (d, i) {
         // Ignore the incoming i value and use our order instead
-        i = d.order;
         if (d.vert) {
-          return conf.barHeight * 8 + (conf.fontSize / 2 - 2) + theTopPad;
+          // console.log(d);
+          // console.log(numOccurrences);
+          // console.log((numOccurrences.at(0)).at(1));
+          return (
+            conf.barHeight * numOccurrences.at(0).at(1) * 1.3 + (conf.fontSize / 2 - 2) + theTopPad
+          );
+          // return conf.gridLineStartPadding;
         }
+        i = d.order;
         return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;
       })
       .attr('text-height', theBarHeight)

From d0ee6079b38eda953bc527aaa899eca1252d7daa Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Thu, 3 Apr 2025 20:43:32 -0400
Subject: [PATCH 07/22] Positioned the label in the center of the vert line +
 Brough back the background

---
 .../src/diagrams/gantt/ganttRenderer.js       | 46 +++++++++++--------
 packages/mermaid/src/diagrams/gantt/styles.js |  5 +-
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 52af5cfa4..e4d552f5b 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -234,6 +234,7 @@ export const draw = function (text, id, version, diagObj) {
     // Get unique task orders. Required to draw the background rects when display mode is compact.
     const uniqueTaskOrderIds = [...new Set(theArray.map((item) => item.order))];
     const uniqueTasks = uniqueTaskOrderIds.map((id) => theArray.find((item) => item.order === id));
+    const numOccurrences = Object.keys(categoryHeights).map((d) => [d, categoryHeights[d]]);
 
     // Draw background rects covering the entire width of the graph, these form the section rows.
     svg
@@ -259,7 +260,8 @@ export const draw = function (text, id, version, diagObj) {
           }
         }
         return 'section section0';
-      });
+      })
+      .data(numOccurrences);
 
     // Draw the rects representing the tasks
     const rectangles = svg.append('g').selectAll('rect').data(theArray).enter();
@@ -284,19 +286,22 @@ 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
-          );
-        }
+        // 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) {
         // Ignore the incoming i value and use our order instead
         i = d.order;
+        if (d.special) {
+          return 0;
+        }
         return i * theGap + theTopPad;
       })
       .attr('width', function (d) {
@@ -304,7 +309,7 @@ export const draw = function (text, id, version, diagObj) {
           return theBarHeight;
         }
         if (d.special) {
-          return theBarHeight;
+          return 0.005 * theBarHeight;
         }
         return timeScale(d.renderEndTime || d.endTime) - timeScale(d.startTime);
       })
@@ -393,15 +398,12 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           startX += 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - 0.5 * theBarHeight;
         }
+        if (d.special) {
+          return startX + theSidePad - 5;
+        }
         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
@@ -417,6 +419,15 @@ export const draw = function (text, id, version, diagObj) {
       })
       .attr('y', function (d, i) {
         // Ignore the incoming i value and use our order instead
+        if (d.special) {
+          // console.log(d);
+          // console.log(numOccurrences);
+          // console.log((numOccurrences.at(0)).at(1));
+          return (
+            conf.barHeight * numOccurrences.at(0).at(1) * 1.8 + (conf.fontSize / 2 - 2) + theTopPad
+          );
+          // return conf.gridLineStartPadding;
+        }
         i = d.order;
         return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;
       })
@@ -427,9 +438,6 @@ 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 = '';
diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index ec4201562..5ddb139ab 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -238,11 +238,8 @@ const getStyles = (options) =>
   }
 
   .special {
-      transform: none;
-      border-radius: 0;
-      width: 3px;
+      width: 1px;
       height: 100%;
-      fill: red;
   }
 
   .specialText {

From ec2c76a703765cabe3652b9a86f334a093bc76c3 Mon Sep 17 00:00:00 2001
From: megantriplett <megantriplett10@gmail.com>
Date: Fri, 4 Apr 2025 15:02:54 -0400
Subject: [PATCH 08/22] deleted some old commented out code

---
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index bb30fed99..381e78a70 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -423,13 +423,9 @@ export const draw = function (text, id, version, diagObj) {
       .attr('y', function (d, i) {
         // Ignore the incoming i value and use our order instead
         if (d.vert) {
-          // console.log(d);
-          // console.log(numOccurrences);
-          // console.log((numOccurrences.at(0)).at(1));
           return (
             conf.barHeight * numOccurrences.at(0).at(1) * 1.3 + (conf.fontSize / 2 - 2) + theTopPad
           );
-          // return conf.gridLineStartPadding;
         }
         i = d.order;
         return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;

From 7e1cec95ef4d6cc720c7dc5bb4206a2f1d7593da Mon Sep 17 00:00:00 2001
From: megantriplett <megantriplett10@gmail.com>
Date: Fri, 4 Apr 2025 15:17:02 -0400
Subject: [PATCH 09/22] fixed bug where background is removed @monicanguyen25
 @udvale

---
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 381e78a70..e275f6f93 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -243,8 +243,6 @@ export const draw = function (text, id, version, diagObj) {
       .enter()
       .append('rect')
       .attr('x', 0)
-      .data(numOccurrences)
-      .enter()
       .attr('y', function (d, i) {
         // Ignore the incoming i value and use our order instead
         i = d.order;
@@ -261,7 +259,9 @@ export const draw = function (text, id, version, diagObj) {
           }
         }
         return 'section section0';
-      });
+      })
+      .data(numOccurrences)
+      .enter();
 
     // Draw the rects representing the tasks
     const rectangles = svg.append('g').selectAll('rect').data(theArray).enter();

From 8eb2000b988ba985ef2033ba11c1535a1a1d29e6 Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Fri, 4 Apr 2025 15:44:09 -0400
Subject: [PATCH 10/22] Adjusted label calculation for x and y values

---
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index e275f6f93..33b2a8020 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -406,6 +406,9 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           endX = startX + theBarHeight;
         }
+        if (d.vert) {
+          return startX + theSidePad + (endX - startX) / 2 - this.getBBox().width / 2;
+        }
 
         const textWidth = this.getBBox().width;
 
@@ -423,9 +426,7 @@ export const draw = function (text, id, version, diagObj) {
       .attr('y', function (d, i) {
         // Ignore the incoming i value and use our order instead
         if (d.vert) {
-          return (
-            conf.barHeight * numOccurrences.at(0).at(1) * 1.3 + (conf.fontSize / 2 - 2) + theTopPad
-          );
+          return conf.gridLineStartPadding + taskArray.length * (conf.barHeight + conf.barGap) + 50;
         }
         i = d.order;
         return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;

From a43965ac2c747c769820e6b4f3bf247fc36dd843 Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Fri, 4 Apr 2025 15:57:55 -0400
Subject: [PATCH 11/22] Put label right down the vert line

---
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 8 ++++++--
 packages/mermaid/src/diagrams/gantt/styles.js        | 4 ++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 33b2a8020..cdfe20916 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -316,7 +316,11 @@ export const draw = function (text, id, version, diagObj) {
       // .attr('height', theBarHeight)
       .attr('height', function (d) {
         if (d.vert) {
-          return 1000.5 * theBarHeight;
+          return (
+            conf.gridLineStartPadding +
+            taskArray.length * (conf.barHeight + conf.barGap) +
+            conf.barHeight * 2
+          );
         }
         return theBarHeight;
       })
@@ -426,7 +430,7 @@ export const draw = function (text, id, version, diagObj) {
       .attr('y', function (d, i) {
         // Ignore the incoming i value and use our order instead
         if (d.vert) {
-          return conf.gridLineStartPadding + taskArray.length * (conf.barHeight + conf.barGap) + 50;
+          return conf.gridLineStartPadding + taskArray.length * (conf.barHeight + conf.barGap) + 60;
         }
         i = d.order;
         return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;
diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 5b53a1b07..c8a9c1660 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -237,6 +237,10 @@ const getStyles = (options) =>
     fill: ${options.taskTextDarkColor} !important;
   }
 
+  .vertText {
+    font-size: 15px;
+  }
+
   .activeCritText0,
   .activeCritText1,
   .activeCritText2,

From 2203792164ac5f5a58dfcb1c89219189d0061e4f Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Wed, 9 Apr 2025 16:13:34 -0400
Subject: [PATCH 12/22] Added permananet color for the vertical line

---
 .../src/diagrams/gantt/ganttRenderer.js       | 22 +++----------------
 packages/mermaid/src/diagrams/gantt/styles.js |  5 +++++
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index aee05ffc3..820f4c805 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -286,21 +286,13 @@ export const draw = function (text, id, version, diagObj) {
             0.5 * theBarHeight
           );
         }
-        // if (d.vert) {
-        //   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) {
         // Ignore the incoming i value and use our order instead
         i = d.order;
         if (d.vert) {
-          return 0;
+          return conf.gridLineStartPadding;
         }
         return i * theGap + theTopPad;
       })
@@ -309,18 +301,13 @@ export const draw = function (text, id, version, diagObj) {
           return theBarHeight;
         }
         if (d.vert) {
-          return 0.005 * theBarHeight;
+          return 0.08 * theBarHeight;
         }
         return timeScale(d.renderEndTime || d.endTime) - timeScale(d.startTime);
       })
-      // .attr('height', theBarHeight)
       .attr('height', function (d) {
         if (d.vert) {
-          return (
-            conf.gridLineStartPadding +
-            taskArray.length * (conf.barHeight + conf.barGap) +
-            conf.barHeight * 2
-          );
+          return taskArray.length * (conf.barHeight + conf.barGap) + conf.barHeight * 2;
         }
         return theBarHeight;
       })
@@ -407,9 +394,6 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           startX += 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - 0.5 * theBarHeight;
         }
-        if (d.special) {
-          return startX + theSidePad - 5;
-        }
         if (d.milestone) {
           endX = startX + theBarHeight;
         }
diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index c8a9c1660..5b32615a0 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -237,8 +237,13 @@ const getStyles = (options) =>
     fill: ${options.taskTextDarkColor} !important;
   }
 
+  .vert {
+    stroke: navy;
+  }
+
   .vertText {
     font-size: 15px;
+    fill: navy;
   }
 
   .activeCritText0,

From 81fa2a675fc5a963ed0a7b7d66f11c6385e0342d Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Wed, 9 Apr 2025 18:15:26 -0400
Subject: [PATCH 13/22] Rendered vert task at last + Trying to reposition vert
 label

---
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 11 ++++++-----
 packages/mermaid/src/diagrams/gantt/styles.js        |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 820f4c805..8bbd00790 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -231,10 +231,11 @@ export const draw = function (text, id, version, diagObj) {
    * @param w
    */
   function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) {
+    // Sort theArray so that tasks with `vert` come last
+    theArray.sort((a, b) => (a.vert === b.vert ? 0 : a.vert ? 1 : -1));
     // Get unique task orders. Required to draw the background rects when display mode is compact.
     const uniqueTaskOrderIds = [...new Set(theArray.map((item) => item.order))];
     const uniqueTasks = uniqueTaskOrderIds.map((id) => theArray.find((item) => item.order === id));
-    const numOccurrences = Object.keys(categoryHeights).map((d) => [d, categoryHeights[d]]);
     // Draw background rects covering the entire width of the graph, these form the section rows.
     svg
       .append('g')
@@ -260,7 +261,6 @@ export const draw = function (text, id, version, diagObj) {
         }
         return 'section section0';
       })
-      .data(numOccurrences)
       .enter();
 
     // Draw the rects representing the tasks
@@ -429,9 +429,10 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           endX = startX + theBarHeight;
         }
-        if (d.vert) {
-          endX = startX + theBarHeight;
-        }
+        // if (d.vert) {
+        //   return startX + theSidePad + (endX - startX) / 2 - this.getBBox().width / 2;
+        // }
+
         const textWidth = this.getBBox().width;
 
         let classStr = '';
diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 5b32615a0..2e6dc2b50 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -242,8 +242,8 @@ const getStyles = (options) =>
   }
 
   .vertText {
-    font-size: 15px;
     fill: navy;
+    font-size: 15px;
   }
 
   .activeCritText0,

From 2009177375383277abc663c9b736afadbcdfcced Mon Sep 17 00:00:00 2001
From: udvale <enkhtaiu@dickinson.edu>
Date: Thu, 10 Apr 2025 16:35:41 -0400
Subject: [PATCH 14/22] the title is centered at vert line

---
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 8 ++------
 packages/mermaid/src/diagrams/gantt/styles.js        | 3 ++-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 8bbd00790..6c937a15d 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -393,12 +393,11 @@ export const draw = function (text, id, version, diagObj) {
         let endX = timeScale(d.renderEndTime || d.endTime);
         if (d.milestone) {
           startX += 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - 0.5 * theBarHeight;
-        }
-        if (d.milestone) {
           endX = startX + theBarHeight;
         }
+
         if (d.vert) {
-          return startX + theSidePad + (endX - startX) / 2 - this.getBBox().width / 2;
+          return timeScale(d.startTime) + theSidePad;
         }
 
         const textWidth = this.getBBox().width;
@@ -429,9 +428,6 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           endX = startX + theBarHeight;
         }
-        // if (d.vert) {
-        //   return startX + theSidePad + (endX - startX) / 2 - this.getBBox().width / 2;
-        // }
 
         const textWidth = this.getBBox().width;
 
diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 2e6dc2b50..796d8da0e 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -242,8 +242,9 @@ const getStyles = (options) =>
   }
 
   .vertText {
-    fill: navy;
     font-size: 15px;
+    text-anchor: middle;
+    fill: navy;
   }
 
   .activeCritText0,

From 296cb64fa5f91401f1bfbc9f6b84132d08e57b44 Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Fri, 11 Apr 2025 15:11:14 -0400
Subject: [PATCH 15/22] deleted repeated code

---
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 8bbd00790..301440a59 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -429,9 +429,6 @@ export const draw = function (text, id, version, diagObj) {
         if (d.milestone) {
           endX = startX + theBarHeight;
         }
-        // if (d.vert) {
-        //   return startX + theSidePad + (endX - startX) / 2 - this.getBBox().width / 2;
-        // }
 
         const textWidth = this.getBBox().width;
 

From f5c99a2a4f834b8fbdc01a06085ba949095f4315 Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Fri, 11 Apr 2025 16:04:14 -0400
Subject: [PATCH 16/22] Deleted "special" tag residue

---
 packages/mermaid/src/diagrams/gantt/ganttDb.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 034a4d2b9..3ae55fb25 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/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', 'special'];
+const tags = ['active', 'done', 'crit', 'milestone', 'vert'];
 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, milestone, and special
+  // Get tags like active, done, crit, milestone, and vert
   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, milestone, and special
+  // Get tags like active, done, crit, milestone, and vert
   getTaskTags(data, task, tags);
 
   for (let i = 0; i < data.length; i++) {
@@ -538,7 +538,6 @@ 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;
 
@@ -572,7 +571,6 @@ 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);

From d1772112865e6f1c698b70d326abc1c945b1b17c Mon Sep 17 00:00:00 2001
From: megantriplett <megantriplett10@gmail.com>
Date: Tue, 15 Apr 2025 15:55:57 -0400
Subject: [PATCH 17/22] added a snapshot test

---
 cypress/integration/rendering/gantt.spec.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index a0c2dbcb9..1ca17e480 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -358,6 +358,23 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should render a gantt diagram with a vert tag', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   ss
+        axisFormat   %Ss
+
+        section Section
+        A task           : a1, 00, 6s
+        Milestone     : vert, 01,
+        section Another
+        Task in sec      : 06, 3s
+        another task     : 3s
+      `
+    );
+  });
   it('should render a gantt diagram with tick is 2 milliseconds', () => {
     imgSnapshotTest(
       `

From c552dc755172e3a895c2cccc1b92c6314b427f04 Mon Sep 17 00:00:00 2001
From: udvale <enkhtaiu@dickinson.edu>
Date: Wed, 16 Apr 2025 14:52:24 -0400
Subject: [PATCH 18/22] Add documentation for vert feature in Gantt chart

Co-authored-by: Monica Nguyen <nghtlinh25@gmail.com>
Co-authored-by: Megan Triplett <megantriplett10@gmail.com>
---
 docs/syntax/gantt.md                          | 24 +++++++++++++++++++
 packages/mermaid/src/diagrams/gantt/styles.js |  4 ++--
 packages/mermaid/src/docs/syntax/gantt.md     | 14 +++++++++++
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index ff6be97aa..806fbd911 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -229,6 +229,30 @@ gantt
     Final milestone : milestone, m2, 18:08, 4m
 ```
 
+### Vertical Markers
+
+The `vert` keyword lets you add vertical lines to your Gantt chart, making it easy to highlight important dates like deadlines, events, or checkpoints. These markers extend across the entire chart and are positioned based on the date you provide. Unlike milestones, vertical markers don’t take up a row. They’re purely visual reference points that help break up the timeline and make important moments easier to spot.
+
+```mermaid-example
+gantt
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial vert : vert, v1, 17:30, 2m
+    Task A : 3m
+    Task B : 8m
+    Final vert : vert, v2, 17:58, 4m
+```
+
+```mermaid
+gantt
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial vert : vert, v1, 17:30, 2m
+    Task A : 3m
+    Task B : 8m
+    Final vert : vert, v2, 17:58, 4m
+```
+
 ## Setting dates
 
 `dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 796d8da0e..6eaf90f3d 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -238,13 +238,13 @@ const getStyles = (options) =>
   }
 
   .vert {
-    stroke: navy;
+    stroke: maroon;
   }
 
   .vertText {
     font-size: 15px;
     text-anchor: middle;
-    fill: navy;
+    fill: maroon;
   }
 
   .activeCritText0,
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index eab35d09f..06cf1c1cb 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -150,6 +150,20 @@ gantt
     Final milestone : milestone, m2, 18:08, 4m
 ```
 
+### Vertical Markers
+
+The `vert` keyword lets you add vertical lines to your Gantt chart, making it easy to highlight important dates like deadlines, events, or checkpoints. These markers extend across the entire chart and are positioned based on the date you provide. Unlike milestones, vertical markers don’t take up a row. They’re purely visual reference points that help break up the timeline and make important moments easier to spot.
+
+```mermaid-example
+gantt
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial vert : vert, v1, 17:30, 2m
+    Task A : 3m
+    Task B : 8m
+    Final vert : vert, v2, 17:58, 4m
+```
+
 ## Setting dates
 
 `dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.

From 62b4228df4e48593a8abb2b502c5f2f8ce536c51 Mon Sep 17 00:00:00 2001
From: udvale <enkhtaiu@dickinson.edu>
Date: Wed, 16 Apr 2025 15:44:21 -0400
Subject: [PATCH 19/22] changed some color aspects for vertline based on theme

---
 packages/mermaid/src/diagrams/gantt/styles.js | 6 ++++--
 packages/mermaid/src/themes/theme-base.js     | 1 +
 packages/mermaid/src/themes/theme-dark.js     | 1 +
 packages/mermaid/src/themes/theme-default.js  | 2 ++
 packages/mermaid/src/themes/theme-forest.js   | 1 +
 packages/mermaid/src/themes/theme-neutral.js  | 2 ++
 6 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 6eaf90f3d..197fa19e8 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -238,13 +238,15 @@ const getStyles = (options) =>
   }
 
   .vert {
-    stroke: maroon;
+    // stroke: #00FFFF;
+    stroke: ${options.vertLineColor};
   }
 
   .vertText {
     font-size: 15px;
     text-anchor: middle;
-    fill: maroon;
+    // fill: #00FFFF;
+    fill: ${options.vertLineColor} !important;
   }
 
   .activeCritText0,
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 73ffef070..0b90bd8d7 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -98,6 +98,7 @@ class Theme {
     this.critBorderColor = this.critBorderColor || '#ff8888';
     this.critBkgColor = this.critBkgColor || 'red';
     this.todayLineColor = this.todayLineColor || 'red';
+    this.vertLineColor = this.vertLineColor || 'navy';
     this.taskTextColor = this.taskTextColor || this.textColor;
     this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;
     this.taskTextLightColor = this.taskTextLightColor || this.textColor;
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index c452eea9f..23e0fa33d 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -79,6 +79,7 @@ class Theme {
     this.critBkgColor = '#E83737';
     this.taskTextDarkColor = 'calculated';
     this.todayLineColor = '#DB5757';
+    this.vertLineColor = '#00BFFF';
 
     /* C4 Context Diagram variables */
     this.personBorder = this.primaryBorderColor;
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index eba3ff101..6bdbc5f8c 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -88,6 +88,7 @@ class Theme {
     this.critBorderColor = 'calculated';
     this.critBkgColor = 'calculated';
     this.todayLineColor = 'calculated';
+    this.vertLineColor = 'calculated';
 
     this.sectionBkgColor = rgba(102, 102, 255, 0.49);
     this.altSectionBkgColor = 'white';
@@ -107,6 +108,7 @@ class Theme {
     this.critBorderColor = '#ff8888';
     this.critBkgColor = 'red';
     this.todayLineColor = 'red';
+    this.vertLineColor = 'navy';
 
     /* C4 Context Diagram variables */
     this.personBorder = this.primaryBorderColor;
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 853b4d032..f34478795 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -81,6 +81,7 @@ class Theme {
     this.critBorderColor = '#ff8888';
     this.critBkgColor = 'red';
     this.todayLineColor = 'red';
+    this.vertLineColor = '#00BFFF';
 
     /* C4 Context Diagram variables */
     this.personBorder = this.primaryBorderColor;
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 633a26849..c2a43d035 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -93,6 +93,7 @@ class Theme {
     this.critBkgColor = 'calculated';
     this.critBorderColor = 'calculated';
     this.todayLineColor = 'calculated';
+    this.vertLineColor = 'calculated';
 
     /* C4 Context Diagram variables */
     this.personBorder = this.primaryBorderColor;
@@ -209,6 +210,7 @@ class Theme {
     this.critBorderColor = darken(this.critBkgColor, 10);
 
     this.todayLineColor = this.critBkgColor;
+    this.vertLineColor = this.critBkgColor;
 
     /* Architecture Diagram variables */
     this.archEdgeColor = this.lineColor;

From d4e737e4512356f3edf1e9fc5449196615ea00ff Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Fri, 25 Apr 2025 15:43:00 -0400
Subject: [PATCH 20/22] Deleted unused method

---
 .../src/diagrams/gantt/ganttRenderer.js       | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 6c937a15d..eb8d3e676 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -798,25 +798,6 @@ 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

From 8d4c5d52785ab33a6bb8ad9011aa895d90be8e9d Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Sun, 27 Apr 2025 13:51:38 -0400
Subject: [PATCH 21/22] Deleted unused code

---
 packages/mermaid/src/diagrams/gantt/styles.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 197fa19e8..776083a9c 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -238,14 +238,12 @@ const getStyles = (options) =>
   }
 
   .vert {
-    // stroke: #00FFFF;
     stroke: ${options.vertLineColor};
   }
 
   .vertText {
     font-size: 15px;
     text-anchor: middle;
-    // fill: #00FFFF;
     fill: ${options.vertLineColor} !important;
   }
 

From 97b79c3578a2004c63fa32f6d5e17bd8a536e13a Mon Sep 17 00:00:00 2001
From: nghtlinh <nghtlinh25@gmail.com>
Date: Sun, 27 Apr 2025 14:09:39 -0400
Subject: [PATCH 22/22] Added the changeset

---
 .changeset/add-vert-tag-bar-chart.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/add-vert-tag-bar-chart.md

diff --git a/.changeset/add-vert-tag-bar-chart.md b/.changeset/add-vert-tag-bar-chart.md
new file mode 100644
index 000000000..4ab74059c
--- /dev/null
+++ b/.changeset/add-vert-tag-bar-chart.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add Vertical Line To Gantt Plot At Specified Time