From f02dfe60afb84cd7b3b482c8c37e4ff7c9080d43 Mon Sep 17 00:00:00 2001 From: futzmonitor Date: Sat, 2 Dec 2023 10:18:58 -0500 Subject: [PATCH 01/40] Changes to gnatt.jison 1. Removed the hash and semicolon symbols from the title regex to allow for their use. 2. Removed the hash and semicolon symbols from the section regex to allow for their use. 3. Removed the hash and semicolon symbols for the taskTxt regex to allow for their use. I did not remove the colon because the parser fails to recognize when the actual taskData begins if that distinctions isn't kept. 4. Removed the regex \#[^\n]* which skipped comments to fix some bugs with hash symbols in the taskTxt. I tested this changed by putting it back and using the comment to see if it was recognized as a comment, but I would receive a syntax error and the diagram would not be rendered. So, I think we can safely remove that line, BUT it would be best practice if someone else tested this change to ensure that this will not break anyone's Gantt diagrams. --- packages/mermaid/src/diagrams/gantt/parser/gantt.jison | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison index b4daab5dc..5479629ff 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison @@ -5,7 +5,7 @@ */ %lex -%options case-insensitive +%options case-insensitivegit %x click %x href @@ -31,7 +31,6 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili [\n]+ return 'NL'; \s+ /* skip whitespace */ -\#[^\n]* /* skip comments */ \%%[^\n]* /* skip comments */ /* @@ -86,10 +85,10 @@ weekday\s+friday return 'weekday_friday' weekday\s+saturday return 'weekday_saturday' weekday\s+sunday return 'weekday_sunday' \d\d\d\d"-"\d\d"-"\d\d return 'date'; -"title"\s[^#\n;]+ return 'title'; +"title"\s[^\n]+ return 'title'; "accDescription"\s[^#\n;]+ return 'accDescription' -"section"\s[^#:\n;]+ return 'section'; -[^#:\n;]+ return 'taskTxt'; +"section"\s[^\n]+ return 'section'; +[^:\n]+ return 'taskTxt'; ":"[^#\n;]+ return 'taskData'; ":" return ':'; <> return 'EOF'; From 68ff352f2db2a3d2b696ee494ee808b807817d34 Mon Sep 17 00:00:00 2001 From: futzmonitor Date: Sat, 2 Dec 2023 10:26:46 -0500 Subject: [PATCH 02/40] Changes to gantt.jison 1. Removed typo --- packages/mermaid/src/diagrams/gantt/parser/gantt.jison | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison index 5479629ff..9866e8ba0 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison @@ -5,7 +5,7 @@ */ %lex -%options case-insensitivegit +%options case-insensitive %x click %x href From 8e95cdb8832722c0b646b5db3455bb2555c37a0d Mon Sep 17 00:00:00 2001 From: futzmonitor Date: Sat, 2 Dec 2023 12:56:58 -0500 Subject: [PATCH 03/40] Changes to gantt.jison 1. Consistent spacing on line 30 --- packages/mermaid/src/diagrams/gantt/parser/gantt.jison | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison index 9866e8ba0..d6027fee9 100644 --- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison +++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison @@ -27,7 +27,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili \%\%(?!\{)*[^\n]* /* skip comments */ [^\}]\%\%*[^\n]* /* skip comments */ -\%\%*[^\n]*[\n]* /* do nothing */ +\%\%*[^\n]*[\n]* /* do nothing */ [\n]+ return 'NL'; \s+ /* skip whitespace */ From 8bff32adabfdc97022eb22a3bc4b4924d8e503fb Mon Sep 17 00:00:00 2001 From: Matheus B Date: Fri, 8 Dec 2023 13:08:13 -0300 Subject: [PATCH 04/40] Modify algorithm to re-check for external connections after defining anchor nodes --- .../mermaid/src/dagre-wrapper/mermaid-graphlib.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js index f42cc3463..81081e1b6 100644 --- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js +++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js @@ -254,6 +254,16 @@ export const adjustClustersAndEdges = (graph, depth) => { } }); + for (let id of Object.keys(clusterDb)) { + const nonClusterChild = clusterDb[id].id; + const parent = graph.parent(nonClusterChild); + + // Change replacement node of id to parent of current replacement node if valid + if (parent !== id && clusterDb[parent] && !clusterDb[parent].externalConnections) { + clusterDb[id].id = parent; + } + } + // For clusters with incoming and/or outgoing edges translate those edges to a real node // in the cluster in order to fake the edge graph.edges().forEach(function (e) { @@ -307,9 +317,13 @@ export const adjustClustersAndEdges = (graph, depth) => { w = getAnchorId(e.w); graph.removeEdge(e.v, e.w, e.name); if (v !== e.v) { + const parent = graph.parent(v); + clusterDb[parent].externalConnections = true; edge.fromCluster = e.v; } if (w !== e.w) { + const parent = graph.parent(w); + clusterDb[parent].externalConnections = true; edge.toCluster = e.w; } log.warn('Fix Replacing with XXX', v, w, e.name); From c8f0b390751838af8290419c38da2aecb336ba07 Mon Sep 17 00:00:00 2001 From: Matheus B Date: Fri, 8 Dec 2023 13:39:53 -0300 Subject: [PATCH 05/40] Add e2e test for edge case --- .../rendering/flowchart-v2.spec.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index e23820ffa..857d395be 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -741,6 +741,25 @@ A ~~~ B ); }); + it('5059: Should render when subgraph contains only subgraphs, has link to outside and itself is part of a link', () => { + imgSnapshotTest( + `flowchart + + subgraph Main + subgraph Child1 + Node1 + Node2 + end + subgraph Child2 + Node3 + Node4 + end + end + Main --> Out1 + Child2 --> Out2` + ); + }); + describe('Markdown strings flowchart (#4220)', () => { describe('html labels', () => { it('With styling and classes', () => { From 5e1f0c620a275db71a0a97357ee1ed89f0c0b681 Mon Sep 17 00:00:00 2001 From: Scott Blomquist Date: Tue, 12 Dec 2023 12:48:07 -0800 Subject: [PATCH 06/40] Fix typos in timeline syntax samples --- packages/mermaid/src/docs/syntax/timeline.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index eeff9b135..0d8f2ed91 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -112,11 +112,11 @@ timeline timeline title MermaidChart 2023 Timeline section 2023 Q1
Release Personal Tier - Buttet 1 : sub-point 1a : sub-point 1b + Bullet 1 : sub-point 1a : sub-point 1b : sub-point 1c Bullet 2 : sub-point 2a : sub-point 2b section 2023 Q2
Release XYZ Tier - Buttet 3 : sub-point
3a : sub-point 3b + Bullet 3 : sub-point
3a : sub-point 3b : sub-point 3c Bullet 4 : sub-point 4a : sub-point 4b ``` From 7e6fd1ebe227c8b534f361e478ccc4930b353518 Mon Sep 17 00:00:00 2001 From: William Jennings Date: Tue, 12 Dec 2023 13:53:25 -0800 Subject: [PATCH 07/40] Update pie.html demo --- demos/pie.html | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/demos/pie.html b/demos/pie.html index 3c315ab63..76b8fdf0f 100644 --- a/demos/pie.html +++ b/demos/pie.html @@ -15,7 +15,7 @@

Pie chart demos

-      pie title Pets adopted by volunteers
+      pie title Default text position: Animal adoption
         accTitle: simple pie char demo
         accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
         "Dogs": 386
@@ -27,7 +27,7 @@
     
       %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
       pie
-        title Key elements in Product X
+        title Offset labels close to border: Produxt X
         accTitle: Key elements in Product X
         accDescr: This is a pie chart showing the key elements in Product X.
         "Calcium": 42.96
@@ -36,6 +36,19 @@
         "Iron": 5
     

 
+    
+      %%{init: {"pie": {"textPosition": 0.45}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
+      pie
+        title Centralized labels: Languages
+        accTitle: Key elements in Product X
+        accDescr: This is a pie chart showing the key elements in Product X.
+        "JavaScript": 30
+        "Python": 25
+        "Java": 20
+        "C#": 15
+        "Others": 10
+    

+
     
+```
+
 ## Graph declarations with spaces between vertices and link and without semicolon
 
 - In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index e4be8d81a..6c6b0760b 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -778,6 +778,18 @@ flowchart TD
 
 Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
 
+You can use this method to add mermaid including the fontawesome icon to a web page:
+
+```html
+
+
+```
+
 ## Graph declarations with spaces between vertices and link and without semicolon
 
 - In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.

From be8faae68c043481fd834b59d1c359cdf0965e41 Mon Sep 17 00:00:00 2001
From: arukiidou 
Date: Fri, 19 Jan 2024 08:49:12 +0900
Subject: [PATCH 20/40] Update packages/mermaid/src/docs/syntax/flowchart.md

Co-authored-by: Sidharth Vinod 
---
 packages/mermaid/src/docs/syntax/flowchart.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 6c6b0760b..00242b407 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -776,18 +776,17 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+Mermaid supports Font Awesome if the CSS is included on the website. 
+Mermaid does not have any restriction on the version of Font Awesome that can be used. 
 
-You can use this method to add mermaid including the fontawesome icon to a web page:
+Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
 
+Adding this snippet in the `` would add support for Font Awesome v6.5.1
 ```html
 
-
 ```
 
 ## Graph declarations with spaces between vertices and link and without semicolon

From 7918f96f9400232db1f8c02d47b33f2f5abb572e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 19 Jan 2024 09:19:36 +0530
Subject: [PATCH 21/40] Update docs

---
 docs/syntax/flowchart.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 4fa0f6c4f..2f4a9aeb9 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -1134,18 +1134,18 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+Mermaid supports Font Awesome if the CSS is included on the website.
+Mermaid does not have any restriction on the version of Font Awesome that can be used.
 
-You can use this method to add mermaid including the fontawesome icon to a web page:
+Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
+
+Adding this snippet in the `` would add support for Font Awesome v6.5.1
 
 ```html
 
-
 ```
 
 ## Graph declarations with spaces between vertices and link and without semicolon

From e0ee9b1bc0470e08a32d0db03ece4dba839b8c07 Mon Sep 17 00:00:00 2001
From: "Soren L. Hansen" 
Date: Sat, 13 Jan 2024 14:17:12 +0100
Subject: [PATCH 22/40] Add more detailed docs for Gantt tasks

---
 docs/syntax/gantt.html                    | 179939 +++++++++++++++++++
 docs/syntax/gantt.md                      |     25 +-
 packages/mermaid/src/docs/syntax/gantt.md |     25 +-
 3 files changed, 179987 insertions(+), 2 deletions(-)
 create mode 100644 docs/syntax/gantt.html

diff --git a/docs/syntax/gantt.html b/docs/syntax/gantt.html
new file mode 100644
index 000000000..4a3156ac7
--- /dev/null
+++ b/docs/syntax/gantt.html
@@ -0,0 +1,179939 @@
+
+
+  
+    
+    Gantt diagrams
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    

+      

+        
+        
Gantt diagrams

+        

+          

+            A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and
+            independently by Henry Gantt in the 1910s, that illustrates a project schedule and the
+            amount of time it would take for any one project to finish. Gantt charts illustrate
+            number of days between the start and finish dates of the terminal elements and summary
+            elements of a project.
+          

+        

+        
A note to users

+        

+          Gantt Charts will record each scheduled task as one continuous bar that extends from the
+          left to the right. The x axis represents time and the y records the different tasks and
+          the order in which they are to be completed.
+        

+        

+          It is important to remember that when a date, day, or collection of dates specific to a
+          task are "excluded", the Gantt Chart will accommodate those changes by extending an equal
+          number of days, towards the right, not by creating a gap inside the task. As shown here
+          
+        

+        

+          However, if the excluded dates are between two tasks that are set to start consecutively,
+          the excluded dates will be skipped graphically and left blank, and the following task will
+          begin after the end of the excluded dates. As shown here
+          
+        

+        

+          A Gantt chart is useful for tracking the amount of time it would take before a project is
+          finished, but it can also be used to graphically represent "non-working days", with a few
+          tweaks.
+        

+        

+          Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into
+          docs.
+        

+        
gantt
+    title A Gantt Diagram
+    dateFormat YYYY-MM-DD
+    section Section
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
+    section Another
+        Task in Another :2014-01-12, 12d
+        another task    :24d

+        
Syntax

+        
gantt
+    dateFormat  YYYY-MM-DD
+    title       Adding GANTT diagram functionality to mermaid
+    excludes    weekends
+    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
+
+    section A section
+    Completed task            :done,    des1, 2014-01-06,2014-01-08
+    Active task               :active,  des2, 2014-01-09, 3d
+    Future task               :         des3, after des2, 5d
+    Future task2              :         des4, after des3, 5d
+
+    section Critical tasks
+    Completed task in the critical line :crit, done, 2014-01-06,24h
+    Implement parser and jison          :crit, done, after des1, 2d
+    Create tests for parser             :crit, active, 3d
+    Future task in critical line        :crit, 5d
+    Create tests for renderer           :2d
+    Add to mermaid                      :1d
+    Functionality added                 :milestone, 2014-01-25, 0d
+
+    section Documentation
+    Describe gantt syntax               :active, a1, after des1, 3d
+    Add gantt diagram to demo page      :after a1  , 20h
+    Add another diagram to demo page    :doc1, after a1  , 48h
+
+    section Last section
+    Describe gantt syntax               :after doc1, 3d
+    Add gantt diagram to demo page      :20h
+    Add another diagram to demo page    :48h

+        

+          Tasks are by default sequential. A task start date defaults to the end date of the
+          preceding task.
+        

+        

+          A colon, :, separates the task title from its metadata. Metadata items are
+          separated by a comma, ,. Valid tags are active,
+          done, crit, and milestone. Tags are optional, but
+          if used, they must be specified first. After processing the tags, the remaining metadata
+          items are interpreted as follows:
+        

+        
    
+          
  1. 
+            If a single item is specified, it determines when the task ends. It can either be a
+            specific date/time or a duration. If a duration is specified, it is added to the start
+            date of the task to determine the end date of the task, taking into account any
+            exclusions.
+          
    2. 
+          
  2. 
+            If two items are specified, the last item is interpreted as in the previous case. The
+            first item can either specify an explicit start date/time (in the format specified by
+            dateFormat) or reference another task using
+            after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. In the latter
+            case, the start date of the task will be set according to the latest end date of any
+            referenced task.
+          
    3. 
+          
  3. 
+            If three items are specified, the last two will be interpreted as in the previous case.
+            The first item will denote the ID of the task, which can be referenced using the
+            later <taskID> syntax.
+          
    4. 
+        

+        
+          
+            
+              
+              
+              
+              
+            
+          
+          
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+            
+              
+              
+              
+              
+            
+          
+        
Metadata syntaxStart dateEnd dateID
<taskID>, <startDate>, <endDate>startdate as interpreted using dateformatendDate as interpreted using dateformattaskID
<taskID>, <startDate>, <length>startdate as interpreted using dateformatStart date + lengthtaskID
<taskID>, after <otherTaskId>, <endDate>End date of previously specified task otherTaskIDendDate as interpreted using dateformattaskID
<taskID>, after <otherTaskId>, <length>End date of previously specified task otherTaskIDStart date + lengthtaskID
<startDate>, <endDate>startdate as interpreted using dateformatenddate as interpreted using dateformatn/a
<startDate>, <length>startdate as interpreted using dateformatStart date + lengthn/a
after <otherTaskID>, <endDate>End date of previously specified task otherTaskIDenddate as interpreted using dateformatn/a
after <otherTaskID>, <length>End date of previously specified task otherTaskIDStart date + lengthn/a
<endDate>End date of preceding taskenddate as interpreted using dateformatn/a
<length>End date of preceding taskStart date + lengthn/a

+        

+          For simplicity, the table does not show the use of multiple tasks listed with the
+          after keyword. Here is an example of how to use it and how it's interpreted:
+        

+        
gantt
+    apple :a, 2017-07-20, 1w
+    banana :crit, b, 2017-07-23, 1d
+    cherry :active, c, after b a, 1d

+        
Title

+        

+          The title is an optional string to be displayed at the top of the
+          Gantt chart to describe the chart as a whole.
+        

+        
Section statements

+        

+          You can divide the chart into various sections, for example to separate different parts of
+          a project like development and documentation.
+        

+        

+          To do so, start a line with the section keyword and give it a name. (Note
+          that unlike with the title for the entire chart, this name is
+          required.
+        

+        
Milestones

+        

+          You can add milestones to the diagrams. Milestones differ from tasks as they represent a
+          single instant in time and are identified by the keyword milestone. Below is
+          an example on how to use milestones. As you may notice, the exact location of the
+          milestone is determined by the initial date for the milestone and the "duration" of the
+          task this way: initial date+duration/2.
+        

+        
gantt
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 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.
+        

+        
Input date format

+        

+          The default input date format is YYYY-MM-DD. You can define your custom
+          dateFormat.
+        

+        
dateFormat YYYY-MM-DD
+

+        
The following formatting options are supported:

+        
+          
+            
+              
+              
+              
+            
+          
+          
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+          
+        
InputExampleDescription
YYYY20144 digit year
YY142 digit year
Q1..4Quarter of year. Sets month to first month in quarter.
M MM1..12Month number
MMM MMMMJanuary..DecMonth name in locale set by dayjs.locale()
D DD1..31Day of month
Do1st..31stDay of month with ordinal
DDD DDDD1..365Day of year
X1410715640.579Unix timestamp
x1410715640579Unix ms timestamp
H HH0..2324 hour time
h hh1..1212 hour time used with a A.
a Aam pmPost or ante meridiem
m mm0..59Minutes
s ss0..59Seconds
S0..9Tenths of a second
SS0..99Hundreds of a second
SSS0..999Thousandths of a second
Z ZZ+12:00Offset from UTC as +-HH:mm, +-HHmm, or Z

+        

+          More info in:
+          https://day.js.org/docs/en/parse/string-format/
+        

+        
Output date format on the axis

+        

+          The default output date format is YYYY-MM-DD. You can define your custom
+          axisFormat, like 2020-Q1 for the first quarter of the year 2020.
+        

+        
axisFormat %Y-%m-%d
+

+        
The following formatting strings are supported:

+        
+          
+            
+              
+              
+            
+          
+          
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+          
+        
FormatDefinition
%aabbreviated weekday name
%Afull weekday name
%babbreviated month name
%Bfull month name
%cdate and time, as "%a %b %e %H:%M:%S %Y"
%dzero-padded day of the month as a decimal number [01,31]
%espace-padded day of the month as a decimal number [ 1,31]; equivalent to %_d
%Hhour (24-hour clock) as a decimal number [00,23]
%Ihour (12-hour clock) as a decimal number [01,12]
%jday of the year as a decimal number [001,366]
%mmonth as a decimal number [01,12]
%Mminute as a decimal number [00,59]
%Lmilliseconds as a decimal number [000, 999]
%peither AM or PM
%Ssecond as a decimal number [00,61]
%U
+                week number of the year (Sunday as the first day of the week) as a decimal number
+                [00,53]
+              
%wweekday as a decimal number [0(Sunday),6]
%W
+                week number of the year (Monday as the first day of the week) as a decimal number
+                [00,53]
+              
%xdate, as "%m/%d/%Y"
%Xtime, as "%H:%M:%S"
%yyear without century as a decimal number [00,99]
%Yyear with century as a decimal number
%Ztime zone offset, such as "-0700"
%%a literal "%" character

+        

+          More info in:
+          https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format
+        

+        
Axis ticks (v10.3.0+)

+        

+          The default output ticks are auto. You can custom your tickInterval, like
+          1day or 1week.
+        

+        
tickInterval 1day
+

+        
The pattern is:

+        
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
+

+        

+          More info in:
+          https://github.com/d3/d3-time#interval_every
+        

+        

+          Week-based tickIntervals start the week on sunday by default. If you wish to
+          specify another weekday on which the tickInterval should start, use the
+          weekday option:
+        

+        
gantt
+  tickInterval 1week
+  weekday monday

+        
`millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
+

+        
Output in compact mode

+        

+          The compact mode allows you to display multiple tasks in the same row. Compact mode can be
+          enabled for a gantt chart by setting the display mode of the graph via preceeding YAML
+          settings.
+        

+        
---
+displayMode: compact
+---
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d

+        
Comments

+        

+          Comments can be entered within a gantt chart, which will be ignored by the parser.
+          Comments need to be on their own line and must be prefaced with %% (double
+          percent signs). Any text after the start of the comment to the next newline will be
+          treated as a comment, including any diagram syntax.
+        

+        
gantt
+    title A Gantt Diagram
+    %% This is a comment
+    dateFormat YYYY-MM-DD
+    section Section
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
+    section Another
+        Task in Another :2014-01-12, 12d
+        another task    :24d

+        
Styling

+        

+          Styling of the Gantt diagram is done by defining a number of CSS classes. During
+          rendering, these classes are extracted from the file located at
+          src/diagrams/gantt/styles.js
+        

+        
Classes used

+        
+          
+            
+              
+              
+            
+          
+          
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+          
+        
ClassDescription
grid.tickStyling for the Grid Lines
grid.pathStyling for the Grid's borders
.taskTextTask Text Styling
.taskTextOutsideRightStyling for Task Text that exceeds the activity bar towards the right.
.taskTextOutsideLeftStyling for Task Text that exceeds the activity bar, towards the left.
todayMarkerToggle and Styling for the "Today Marker"

+        
Sample stylesheet

+        
.grid .tick {
+  stroke: lightgrey;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+.grid path {
+  stroke-width: 0;
+}
+
+#tag {
+  color: white;
+  background: #fa283d;
+  width: 150px;
+  position: absolute;
+  display: none;
+  padding: 3px 6px;
+  margin-left: -80px;
+  font-size: 11px;
+}
+
+#tag:before {
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  left: 50%;
+  margin-left: -5px;
+  position: absolute;
+  width: 0;
+  border-width: 10px;
+  border-bottom-color: #fa283d;
+  top: -20px;
+}
+.taskText {
+  fill: white;
+  text-anchor: middle;
+}
+.taskTextOutsideRight {
+  fill: black;
+  text-anchor: start;
+}
+.taskTextOutsideLeft {
+  fill: black;
+  text-anchor: end;
+}
+

+        
Today marker

+        

+          You can style or hide the marker for the current date. To style it, add a value for the
+          todayMarker key.
+        

+        
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
+

+        
To hide the marker, set todayMarker to off.

+        
todayMarker off
+

+        
Configuration

+        
It is possible to adjust the margins for rendering the gantt diagram.

+        

+          This is done by defining the ganttConfig part of the configuration object.
+          How to use the CLI is described in the
+          mermaidCLI page.
+        

+        

+          mermaid.ganttConfig can be set to a JSON string with config parameters or the
+          corresponding object.
+        

+        
mermaid.ganttConfig = {
+  titleTopMargin: 25,
+  barHeight: 20,
+  barGap: 4,
+  topPadding: 75,
+  sidePadding: 75,
+};
+

+        
Possible configuration params:

+        
+          
+            
+              
+              
+              
+            
+          
+          
+            
+              
+              
+              
+            
+            
+              
+              
+              
+            
+          
+        
ParamDescriptionDefault value
mirrorActorTurns on/off the rendering of actors below the diagram as well as above itfalse
bottomMarginAdj
+                Adjusts how far down the graph ended. Wide borders styles with css could generate
+                unwanted clipping which is why this config param exists.
+              1

+        
Interaction

+        

+          It is possible to bind a click event to a task. The click can lead to either a javascript
+          callback or to a link which will be opened in the current browser tab.
+          Note: This functionality is disabled when using
+          securityLevel='strict' and enabled when using
+          securityLevel='loose'.
+        

+        
click taskId call callback(arguments)
+click taskId href URL
+

+        
    
+          
  • taskId is the id of the task
    • 
+          
  • 
+            callback is the name of a javascript function defined on the page displaying the graph,
+            the function will be called with the taskId as the parameter if no other arguments are
+            specified.
+          
    • 
+        

+        
Beginner's tip—a full example using interactive links in an html context:

+        
<body>
+  <pre class="mermaid">
+    gantt
+      dateFormat  YYYY-MM-DD
+
+      section Clickable
+      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
+      Print arguments         :cl2, after cl1, 3d
+      Print task              :cl3, after cl2, 3d
+
+      click cl1 href "https://mermaidjs.github.io/"
+      click cl2 call printArguments("test1", "test2", test3)
+      click cl3 call printTask()
+  </pre>
+
+  <script>
+    const printArguments = function (arg1, arg2, arg3) {
+      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
+    };
+    const printTask = function (taskId) {
+      alert('taskId: ' + taskId);
+    };
+    const config = {
+      startOnLoad: true,
+      securityLevel: 'loose',
+    };
+    mermaid.initialize(config);
+  </script>
+</body>
+

+        
Examples

+        
Bar chart (using gantt chart)

+        
gantt
+    title Git Issues - days since last update
+    dateFormat X
+    axisFormat %s
+    section Issue19062
+    71   : 0, 71
+    section Issue19401
+    36   : 0, 36
+    section Issue193
+    34   : 0, 34
+    section Issue7441
+    9    : 0, 9
+    section Issue1300
+    5    : 0, 5

+      

+    

+    
+    
+    
+  
+
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 33c2740e5..071cb0ec0 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -114,7 +114,30 @@ gantt
     Add another diagram to demo page    :48h
 ```
 
-It is possible to set multiple dependencies separated by space:
+Tasks are by default sequential. A task start date defaults to the end date of the preceding task.
+
+A colon, `:`, separates the task title from its metadata.
+Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.
+After processing the tags, the remaining metadata items are interpreted as follows:
+
+1.  If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
+2.  If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after  [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
+3.  If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later ` syntax.
+
+| Metadata syntax                            | Start date                                          | End date                                    | ID       |
+| ------------------------------------------ | --------------------------------------------------- | ------------------------------------------- | -------- |
+| `, , `         | `startdate` as interpreted using `dateformat`       | `endDate` as interpreted using `dateformat` | `taskID` |
+| `, , `          | `startdate` as interpreted using `dateformat`       | Start date + `length`                       | `taskID` |
+| `, after , ` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
+| `, after , `  | End date of previously specified task `otherTaskID` | Start date + `length`                       | `taskID` |
+| `, `                   | `startdate` as interpreted using `dateformat`       | `enddate` as interpreted using `dateformat` | n/a      |
+| `, `                    | `startdate` as interpreted using `dateformat`       | Start date + `length`                       | n/a      |
+| `after , `           | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a      |
+| `after , `            | End date of previously specified task `otherTaskID` | Start date + `length`                       | n/a      |
+| ``                                | End date of preceding task                          | `enddate` as interpreted using `dateformat` | n/a      |
+| ``                                 | End date of preceding task                          | Start date + `length`                       | n/a      |
+
+For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:
 
 ```mermaid-example
 gantt
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index a0cebc560..56fdc75a7 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -63,7 +63,30 @@ gantt
     Add another diagram to demo page    :48h
 ```
 
-It is possible to set multiple dependencies separated by space:
+Tasks are by default sequential. A task start date defaults to the end date of the preceding task.
+
+A colon, `:`, separates the task title from its metadata.
+Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.
+After processing the tags, the remaining metadata items are interpreted as follows:
+
+1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
+2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after  [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
+3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later ` syntax.
+
+| Metadata syntax                            | Start date                                          | End date                                    | ID       |
+| ------------------------------------------ | --------------------------------------------------- | ------------------------------------------- | -------- |
+| `, , `         | `startdate` as interpreted using `dateformat`       | `endDate` as interpreted using `dateformat` | `taskID` |
+| `, , `          | `startdate` as interpreted using `dateformat`       | Start date + `length`                       | `taskID` |
+| `, after , ` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
+| `, after , `  | End date of previously specified task `otherTaskID` | Start date + `length`                       | `taskID` |
+| `, `                   | `startdate` as interpreted using `dateformat`       | `enddate` as interpreted using `dateformat` | n/a      |
+| `, `                    | `startdate` as interpreted using `dateformat`       | Start date + `length`                       | n/a      |
+| `after , `           | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a      |
+| `after , `            | End date of previously specified task `otherTaskID` | Start date + `length`                       | n/a      |
+| ``                                | End date of preceding task                          | `enddate` as interpreted using `dateformat` | n/a      |
+| ``                                 | End date of preceding task                          | Start date + `length`                       | n/a      |
+
+For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:
 
 ```mermaid-example
 gantt

From bf55d940b68b8aacbcb352be1a7834d0c731b751 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 18 Jan 2024 22:34:20 +0530
Subject: [PATCH 23/40] Delete docs/syntax/gantt.html

---
 docs/syntax/gantt.html | 179939 --------------------------------------
 1 file changed, 179939 deletions(-)
 delete mode 100644 docs/syntax/gantt.html

diff --git a/docs/syntax/gantt.html b/docs/syntax/gantt.html
deleted file mode 100644
index 4a3156ac7..000000000
--- a/docs/syntax/gantt.html
+++ /dev/null
@@ -1,179939 +0,0 @@
-
-
-  
-    
-    Gantt diagrams
-    
-    
-    
-    
-    
-    
-    
-  
-  
-    

-      

-        
-        
Gantt diagrams

-        

-          

-            A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and
-            independently by Henry Gantt in the 1910s, that illustrates a project schedule and the
-            amount of time it would take for any one project to finish. Gantt charts illustrate
-            number of days between the start and finish dates of the terminal elements and summary
-            elements of a project.
-          

-        

-        
A note to users

-        

-          Gantt Charts will record each scheduled task as one continuous bar that extends from the
-          left to the right. The x axis represents time and the y records the different tasks and
-          the order in which they are to be completed.
-        

-        

-          It is important to remember that when a date, day, or collection of dates specific to a
-          task are "excluded", the Gantt Chart will accommodate those changes by extending an equal
-          number of days, towards the right, not by creating a gap inside the task. As shown here
-          
-        

-        

-          However, if the excluded dates are between two tasks that are set to start consecutively,
-          the excluded dates will be skipped graphically and left blank, and the following task will
-          begin after the end of the excluded dates. As shown here
-          
-        

-        

-          A Gantt chart is useful for tracking the amount of time it would take before a project is
-          finished, but it can also be used to graphically represent "non-working days", with a few
-          tweaks.
-        

-        

-          Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into
-          docs.
-        

-        
gantt
-    title A Gantt Diagram
-    dateFormat YYYY-MM-DD
-    section Section
-        A task          :a1, 2014-01-01, 30d
-        Another task    :after a1, 20d
-    section Another
-        Task in Another :2014-01-12, 12d
-        another task    :24d

-        
Syntax

-        
gantt
-    dateFormat  YYYY-MM-DD
-    title       Adding GANTT diagram functionality to mermaid
-    excludes    weekends
-    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
-
-    section A section
-    Completed task            :done,    des1, 2014-01-06,2014-01-08
-    Active task               :active,  des2, 2014-01-09, 3d
-    Future task               :         des3, after des2, 5d
-    Future task2              :         des4, after des3, 5d
-
-    section Critical tasks
-    Completed task in the critical line :crit, done, 2014-01-06,24h
-    Implement parser and jison          :crit, done, after des1, 2d
-    Create tests for parser             :crit, active, 3d
-    Future task in critical line        :crit, 5d
-    Create tests for renderer           :2d
-    Add to mermaid                      :1d
-    Functionality added                 :milestone, 2014-01-25, 0d
-
-    section Documentation
-    Describe gantt syntax               :active, a1, after des1, 3d
-    Add gantt diagram to demo page      :after a1  , 20h
-    Add another diagram to demo page    :doc1, after a1  , 48h
-
-    section Last section
-    Describe gantt syntax               :after doc1, 3d
-    Add gantt diagram to demo page      :20h
-    Add another diagram to demo page    :48h

-        

-          Tasks are by default sequential. A task start date defaults to the end date of the
-          preceding task.
-        

-        

-          A colon, :, separates the task title from its metadata. Metadata items are
-          separated by a comma, ,. Valid tags are active,
-          done, crit, and milestone. Tags are optional, but
-          if used, they must be specified first. After processing the tags, the remaining metadata
-          items are interpreted as follows:
-        

-        
    
-          
  1. 
-            If a single item is specified, it determines when the task ends. It can either be a
-            specific date/time or a duration. If a duration is specified, it is added to the start
-            date of the task to determine the end date of the task, taking into account any
-            exclusions.
-          
    2. 
-          
  2. 
-            If two items are specified, the last item is interpreted as in the previous case. The
-            first item can either specify an explicit start date/time (in the format specified by
-            dateFormat) or reference another task using
-            after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. In the latter
-            case, the start date of the task will be set according to the latest end date of any
-            referenced task.
-          
    3. 
-          
  3. 
-            If three items are specified, the last two will be interpreted as in the previous case.
-            The first item will denote the ID of the task, which can be referenced using the
-            later <taskID> syntax.
-          
    4. 
-        

-        
-          
-            
-              
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-            
-          
-        
Metadata syntaxStart dateEnd dateID
<taskID>, <startDate>, <endDate>startdate as interpreted using dateformatendDate as interpreted using dateformattaskID
<taskID>, <startDate>, <length>startdate as interpreted using dateformatStart date + lengthtaskID
<taskID>, after <otherTaskId>, <endDate>End date of previously specified task otherTaskIDendDate as interpreted using dateformattaskID
<taskID>, after <otherTaskId>, <length>End date of previously specified task otherTaskIDStart date + lengthtaskID
<startDate>, <endDate>startdate as interpreted using dateformatenddate as interpreted using dateformatn/a
<startDate>, <length>startdate as interpreted using dateformatStart date + lengthn/a
after <otherTaskID>, <endDate>End date of previously specified task otherTaskIDenddate as interpreted using dateformatn/a
after <otherTaskID>, <length>End date of previously specified task otherTaskIDStart date + lengthn/a
<endDate>End date of preceding taskenddate as interpreted using dateformatn/a
<length>End date of preceding taskStart date + lengthn/a

-        

-          For simplicity, the table does not show the use of multiple tasks listed with the
-          after keyword. Here is an example of how to use it and how it's interpreted:
-        

-        
gantt
-    apple :a, 2017-07-20, 1w
-    banana :crit, b, 2017-07-23, 1d
-    cherry :active, c, after b a, 1d

-        
Title

-        

-          The title is an optional string to be displayed at the top of the
-          Gantt chart to describe the chart as a whole.
-        

-        
Section statements

-        

-          You can divide the chart into various sections, for example to separate different parts of
-          a project like development and documentation.
-        

-        

-          To do so, start a line with the section keyword and give it a name. (Note
-          that unlike with the title for the entire chart, this name is
-          required.
-        

-        
Milestones

-        

-          You can add milestones to the diagrams. Milestones differ from tasks as they represent a
-          single instant in time and are identified by the keyword milestone. Below is
-          an example on how to use milestones. As you may notice, the exact location of the
-          milestone is determined by the initial date for the milestone and the "duration" of the
-          task this way: initial date+duration/2.
-        

-        
gantt
-    dateFormat HH:mm
-    axisFormat %H:%M
-    Initial milestone : milestone, m1, 17:49, 2m
-    Task A : 10m
-    Task B : 5m
-    Final milestone : milestone, m2, 18:08, 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.
-        

-        
Input date format

-        

-          The default input date format is YYYY-MM-DD. You can define your custom
-          dateFormat.
-        

-        
dateFormat YYYY-MM-DD
-

-        
The following formatting options are supported:

-        
-          
-            
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-          
-        
InputExampleDescription
YYYY20144 digit year
YY142 digit year
Q1..4Quarter of year. Sets month to first month in quarter.
M MM1..12Month number
MMM MMMMJanuary..DecMonth name in locale set by dayjs.locale()
D DD1..31Day of month
Do1st..31stDay of month with ordinal
DDD DDDD1..365Day of year
X1410715640.579Unix timestamp
x1410715640579Unix ms timestamp
H HH0..2324 hour time
h hh1..1212 hour time used with a A.
a Aam pmPost or ante meridiem
m mm0..59Minutes
s ss0..59Seconds
S0..9Tenths of a second
SS0..99Hundreds of a second
SSS0..999Thousandths of a second
Z ZZ+12:00Offset from UTC as +-HH:mm, +-HHmm, or Z

-        

-          More info in:
-          https://day.js.org/docs/en/parse/string-format/
-        

-        
Output date format on the axis

-        

-          The default output date format is YYYY-MM-DD. You can define your custom
-          axisFormat, like 2020-Q1 for the first quarter of the year 2020.
-        

-        
axisFormat %Y-%m-%d
-

-        
The following formatting strings are supported:

-        
-          
-            
-              
-              
-            
-          
-          
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-          
-        
FormatDefinition
%aabbreviated weekday name
%Afull weekday name
%babbreviated month name
%Bfull month name
%cdate and time, as "%a %b %e %H:%M:%S %Y"
%dzero-padded day of the month as a decimal number [01,31]
%espace-padded day of the month as a decimal number [ 1,31]; equivalent to %_d
%Hhour (24-hour clock) as a decimal number [00,23]
%Ihour (12-hour clock) as a decimal number [01,12]
%jday of the year as a decimal number [001,366]
%mmonth as a decimal number [01,12]
%Mminute as a decimal number [00,59]
%Lmilliseconds as a decimal number [000, 999]
%peither AM or PM
%Ssecond as a decimal number [00,61]
%U
-                week number of the year (Sunday as the first day of the week) as a decimal number
-                [00,53]
-              
%wweekday as a decimal number [0(Sunday),6]
%W
-                week number of the year (Monday as the first day of the week) as a decimal number
-                [00,53]
-              
%xdate, as "%m/%d/%Y"
%Xtime, as "%H:%M:%S"
%yyear without century as a decimal number [00,99]
%Yyear with century as a decimal number
%Ztime zone offset, such as "-0700"
%%a literal "%" character

-        

-          More info in:
-          https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format
-        

-        
Axis ticks (v10.3.0+)

-        

-          The default output ticks are auto. You can custom your tickInterval, like
-          1day or 1week.
-        

-        
tickInterval 1day
-

-        
The pattern is:

-        
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
-

-        

-          More info in:
-          https://github.com/d3/d3-time#interval_every
-        

-        

-          Week-based tickIntervals start the week on sunday by default. If you wish to
-          specify another weekday on which the tickInterval should start, use the
-          weekday option:
-        

-        
gantt
-  tickInterval 1week
-  weekday monday

-        
`millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
-

-        
Output in compact mode

-        

-          The compact mode allows you to display multiple tasks in the same row. Compact mode can be
-          enabled for a gantt chart by setting the display mode of the graph via preceeding YAML
-          settings.
-        

-        
---
-displayMode: compact
----
-gantt
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :a2, 2014-01-20, 25d
-    Another one      :a3, 2014-02-10, 20d

-        
Comments

-        

-          Comments can be entered within a gantt chart, which will be ignored by the parser.
-          Comments need to be on their own line and must be prefaced with %% (double
-          percent signs). Any text after the start of the comment to the next newline will be
-          treated as a comment, including any diagram syntax.
-        

-        
gantt
-    title A Gantt Diagram
-    %% This is a comment
-    dateFormat YYYY-MM-DD
-    section Section
-        A task          :a1, 2014-01-01, 30d
-        Another task    :after a1, 20d
-    section Another
-        Task in Another :2014-01-12, 12d
-        another task    :24d

-        
Styling

-        

-          Styling of the Gantt diagram is done by defining a number of CSS classes. During
-          rendering, these classes are extracted from the file located at
-          src/diagrams/gantt/styles.js
-        

-        
Classes used

-        
-          
-            
-              
-              
-            
-          
-          
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-          
-        
ClassDescription
grid.tickStyling for the Grid Lines
grid.pathStyling for the Grid's borders
.taskTextTask Text Styling
.taskTextOutsideRightStyling for Task Text that exceeds the activity bar towards the right.
.taskTextOutsideLeftStyling for Task Text that exceeds the activity bar, towards the left.
todayMarkerToggle and Styling for the "Today Marker"

-        
Sample stylesheet

-        
.grid .tick {
-  stroke: lightgrey;
-  opacity: 0.3;
-  shape-rendering: crispEdges;
-}
-.grid path {
-  stroke-width: 0;
-}
-
-#tag {
-  color: white;
-  background: #fa283d;
-  width: 150px;
-  position: absolute;
-  display: none;
-  padding: 3px 6px;
-  margin-left: -80px;
-  font-size: 11px;
-}
-
-#tag:before {
-  border: solid transparent;
-  content: ' ';
-  height: 0;
-  left: 50%;
-  margin-left: -5px;
-  position: absolute;
-  width: 0;
-  border-width: 10px;
-  border-bottom-color: #fa283d;
-  top: -20px;
-}
-.taskText {
-  fill: white;
-  text-anchor: middle;
-}
-.taskTextOutsideRight {
-  fill: black;
-  text-anchor: start;
-}
-.taskTextOutsideLeft {
-  fill: black;
-  text-anchor: end;
-}
-

-        
Today marker

-        

-          You can style or hide the marker for the current date. To style it, add a value for the
-          todayMarker key.
-        

-        
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
-

-        
To hide the marker, set todayMarker to off.

-        
todayMarker off
-

-        
Configuration

-        
It is possible to adjust the margins for rendering the gantt diagram.

-        

-          This is done by defining the ganttConfig part of the configuration object.
-          How to use the CLI is described in the
-          mermaidCLI page.
-        

-        

-          mermaid.ganttConfig can be set to a JSON string with config parameters or the
-          corresponding object.
-        

-        
mermaid.ganttConfig = {
-  titleTopMargin: 25,
-  barHeight: 20,
-  barGap: 4,
-  topPadding: 75,
-  sidePadding: 75,
-};
-

-        
Possible configuration params:

-        
-          
-            
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-          
-        
ParamDescriptionDefault value
mirrorActorTurns on/off the rendering of actors below the diagram as well as above itfalse
bottomMarginAdj
-                Adjusts how far down the graph ended. Wide borders styles with css could generate
-                unwanted clipping which is why this config param exists.
-              1

-        
Interaction

-        

-          It is possible to bind a click event to a task. The click can lead to either a javascript
-          callback or to a link which will be opened in the current browser tab.
-          Note: This functionality is disabled when using
-          securityLevel='strict' and enabled when using
-          securityLevel='loose'.
-        

-        
click taskId call callback(arguments)
-click taskId href URL
-

-        
    
-          
  • taskId is the id of the task
    • 
-          
  • 
-            callback is the name of a javascript function defined on the page displaying the graph,
-            the function will be called with the taskId as the parameter if no other arguments are
-            specified.
-          
    • 
-        

-        
Beginner's tip—a full example using interactive links in an html context:

-        
<body>
-  <pre class="mermaid">
-    gantt
-      dateFormat  YYYY-MM-DD
-
-      section Clickable
-      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
-      Print arguments         :cl2, after cl1, 3d
-      Print task              :cl3, after cl2, 3d
-
-      click cl1 href "https://mermaidjs.github.io/"
-      click cl2 call printArguments("test1", "test2", test3)
-      click cl3 call printTask()
-  </pre>
-
-  <script>
-    const printArguments = function (arg1, arg2, arg3) {
-      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
-    };
-    const printTask = function (taskId) {
-      alert('taskId: ' + taskId);
-    };
-    const config = {
-      startOnLoad: true,
-      securityLevel: 'loose',
-    };
-    mermaid.initialize(config);
-  </script>
-</body>
-

-        
Examples

-        
Bar chart (using gantt chart)

-        
gantt
-    title Git Issues - days since last update
-    dateFormat X
-    axisFormat %s
-    section Issue19062
-    71   : 0, 71
-    section Issue19401
-    36   : 0, 36
-    section Issue193
-    34   : 0, 34
-    section Issue7441
-    9    : 0, 9
-    section Issue1300
-    5    : 0, 5

-      

-    

-    
-    
-    
-  
-

From 8fd268d59be6c0bc7d4d25eb5fae6abe6bc9320b Mon Sep 17 00:00:00 2001
From: Vitor Soares Silva 
Date: Fri, 19 Jan 2024 16:10:23 -0300
Subject: [PATCH 24/40] add sequenceDiagram link e2e test

---
 .../rendering/sequencediagram.spec.js         | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 27e03da9c..10432f057 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -792,6 +792,34 @@ context('Sequence diagram', () => {
     });
   });
   context('links', () => {
+    it('should support actor links', () => {
+      renderGraph(
+        `
+      sequenceDiagram
+        link Alice: Dashboard @ https://dashboard.contoso.com/alice
+        link Alice: Wiki @ https://wiki.contoso.com/alice
+        link John: Dashboard @ https://dashboard.contoso.com/john
+        link John: Wiki @ https://wiki.contoso.com/john
+        Alice->>John: Hello John

+        John-->>Alice: Great

day!
+      `,
+        { securityLevel: 'loose' }
+      );
+      cy.get('#actor0_popup').should((popupMenu) => {
+        const style = popupMenu.attr('style');
+        expect(style).to.undefined;
+      });
+      cy.get('#root-0').click();
+      cy.get('#actor0_popup').should((popupMenu) => {
+        const style = popupMenu.attr('style');
+        expect(style).to.match(/^display: block;$/);
+      });
+      cy.get('#root-0').click();
+      cy.get('#actor0_popup').should((popupMenu) => {
+        const style = popupMenu.attr('style');
+        expect(style).to.match(/^display: none;$/);
+      });
+    });
     it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => {
       //Be aware that the syntax for "properties" is likely to be changed.
       imgSnapshotTest(

From 4f60a2747256f11902b5dc3bf19d55654205c772 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Sat, 20 Jan 2024 20:57:58 -0300
Subject: [PATCH 25/40] Change repetitive values into consts

---
 .../src/diagrams/git/gitGraphRenderer.js      | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 4790949b5..6124d72c6 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -112,8 +112,11 @@ const drawCommits = (svg, commits, modifyGraph) => {
   });
 
   const isParallelCommits = gitGraphConfig.parallelCommits;
+  const layoutOffset = 10;
+  const commitStep = 40;
   sortedKeys.forEach((key) => {
     const commit = commits[key];
+    const posWithOffset = pos + layoutOffset;
 
     if (isParallelCommits) {
       if (!commit.parents.length) {
@@ -123,12 +126,15 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
       } else {
         const closestParent = findClosestParent(commit.parents);
-        pos = dir === 'TB' ? commitPos[closestParent].y + 40 : commitPos[closestParent].x + 40;
+        pos =
+          dir === 'TB'
+            ? commitPos[closestParent].y + commitStep
+            : commitPos[closestParent].x + commitStep;
       }
     }
 
-    const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
-    const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10;
+    const y = dir === 'TB' ? posWithOffset : branchPos[commit.branch].pos;
+    const x = dir === 'TB' ? branchPos[commit.branch].pos : posWithOffset;
 
     // Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
     if (modifyGraph) {
@@ -253,9 +259,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
       }
     }
     if (dir === 'TB') {
-      commitPos[commit.id] = { x: x, y: pos + 10 };
+      commitPos[commit.id] = { x: x, y: posWithOffset };
     } else {
-      commitPos[commit.id] = { x: pos + 10, y: y };
+      commitPos[commit.id] = { x: posWithOffset, y: y };
     }
 
     // The first iteration over the commits are for positioning purposes, this
@@ -284,7 +290,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
 
         // Now we have the label, lets position the background
         labelBkg
-          .attr('x', pos + 10 - bbox.width / 2 - py)
+          .attr('x', posWithOffset - bbox.width / 2 - py)
           .attr('y', y + 13.5)
           .attr('width', bbox.width + 2 * py)
           .attr('height', bbox.height + 2 * py);
@@ -295,7 +301,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
 
         if (dir !== 'TB') {
-          text.attr('x', pos + 10 - bbox.width / 2);
+          text.attr('x', posWithOffset - bbox.width / 2);
         }
         if (gitGraphConfig.rotateCommitLabel) {
           if (dir === 'TB') {
@@ -321,7 +327,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('class', 'tag-label')
           .text(commit.tag);
         let tagBbox = tag.node().getBBox();
-        tag.attr('x', pos + 10 - tagBbox.width / 2);
+        tag.attr('x', posWithOffset - tagBbox.width / 2);
 
         const h2 = tagBbox.height / 2;
         const ly = y - 19.2;
@@ -330,10 +336,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
           `
           ${pos - tagBbox.width / 2 - px / 2},${ly + py}
           ${pos - tagBbox.width / 2 - px / 2},${ly - py}
-          ${pos + 10 - tagBbox.width / 2 - px},${ly - h2 - py}
-          ${pos + 10 + tagBbox.width / 2 + px},${ly - h2 - py}
-          ${pos + 10 + tagBbox.width / 2 + px},${ly + h2 + py}
-          ${pos + 10 - tagBbox.width / 2 - px},${ly + h2 + py}`
+          ${posWithOffset - tagBbox.width / 2 - px},${ly - h2 - py}
+          ${posWithOffset + tagBbox.width / 2 + px},${ly - h2 - py}
+          ${posWithOffset + tagBbox.width / 2 + px},${ly + h2 + py}
+          ${posWithOffset - tagBbox.width / 2 - px},${ly + h2 + py}`
         );
 
         hole
@@ -350,10 +356,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
               `
             ${x},${pos + py}
             ${x},${pos - py}
-            ${x + 10},${pos - h2 - py}
-            ${x + 10 + tagBbox.width + px},${pos - h2 - py}
-            ${x + 10 + tagBbox.width + px},${pos + h2 + py}
-            ${x + 10},${pos + h2 + py}`
+            ${x + layoutOffset},${pos - h2 - py}
+            ${x + layoutOffset + tagBbox.width + px},${pos - h2 - py}
+            ${x + layoutOffset + tagBbox.width + px},${pos + h2 + py}
+            ${x + layoutOffset},${pos + h2 + py}`
             )
             .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')');
           hole
@@ -367,7 +373,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
       }
     }
-    pos += 50;
+    pos += commitStep + layoutOffset;
     if (pos > maxPos) {
       maxPos = pos;
     }

From e668698b5c5510c2f1ff9a6cc875d0dbdf413de2 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Mon, 22 Jan 2024 19:56:25 -0300
Subject: [PATCH 26/40] Reposition const declaration to ideal place

---
 packages/mermaid/src/diagrams/git/gitGraphRenderer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 6124d72c6..cefbe89c1 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -116,7 +116,6 @@ const drawCommits = (svg, commits, modifyGraph) => {
   const commitStep = 40;
   sortedKeys.forEach((key) => {
     const commit = commits[key];
-    const posWithOffset = pos + layoutOffset;
 
     if (isParallelCommits) {
       if (!commit.parents.length) {
@@ -133,6 +132,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
       }
     }
 
+    const posWithOffset = pos + layoutOffset;
     const y = dir === 'TB' ? posWithOffset : branchPos[commit.branch].pos;
     const x = dir === 'TB' ? branchPos[commit.branch].pos : posWithOffset;
 

From 81825f22f508eee53a9ab809361935d52bc3caf0 Mon Sep 17 00:00:00 2001
From: Matheus B 
Date: Mon, 22 Jan 2024 20:09:20 -0300
Subject: [PATCH 27/40] Swap condition blocks to avoid using negation

---
 .../mermaid/src/diagrams/git/gitGraphRenderer.js     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index cefbe89c1..84b8f41a1 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -118,17 +118,17 @@ const drawCommits = (svg, commits, modifyGraph) => {
     const commit = commits[key];
 
     if (isParallelCommits) {
-      if (!commit.parents.length) {
-        pos = 0;
-        if (dir === 'TB') {
-          pos = 30;
-        }
-      } else {
+      if (commit.parents.length) {
         const closestParent = findClosestParent(commit.parents);
         pos =
           dir === 'TB'
             ? commitPos[closestParent].y + commitStep
             : commitPos[closestParent].x + commitStep;
+      } else {
+        pos = 0;
+        if (dir === 'TB') {
+          pos = 30;
+        }
       }
     }
 

From 8fad1f55e25cf4e8ce1d893a268a6ea2fcf0b778 Mon Sep 17 00:00:00 2001
From: Oleg A 
Date: Tue, 23 Jan 2024 10:56:44 +0300
Subject: [PATCH 28/40] docs: move community to Discord

---
 .github/ISSUE_TEMPLATE/config.yml                           | 6 +++---
 .github/lychee.toml                                         | 4 ++--
 README.md                                                   | 4 ++--
 README.zh-CN.md                                             | 4 ++--
 docs/community/security.md                                  | 2 +-
 docs/ecosystem/integrations-create.md                       | 4 ++--
 docs/intro/index.md                                         | 2 +-
 .../mermaid/src/docs/.vitepress/components/HomePage.vue     | 2 +-
 packages/mermaid/src/docs/.vitepress/config.ts              | 4 ++--
 packages/mermaid/src/docs/community/security.md             | 2 +-
 packages/mermaid/src/docs/ecosystem/integrations-create.md  | 4 ++--
 packages/mermaid/src/docs/intro/index.md                    | 2 +-
 12 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 7e0c78ff1..fa15f39e1 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -3,9 +3,9 @@ contact_links:
   - name: GitHub Discussions
     url: https://github.com/mermaid-js/mermaid/discussions
     about: Ask the Community questions or share your own graphs in our discussions.
-  - name: Slack
-    url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
-    about: Join our Community on Slack for Help and a casual chat.
+  - name: Discord
+    url: https://discord.gg/wwtabKgp8y
+    about: Join our Community on Discord for Help and a casual chat.
   - name: Documentation
     url: https://mermaid.js.org
     about: Read our documentation for all that Mermaid.js can offer.
diff --git a/.github/lychee.toml b/.github/lychee.toml
index b13e53616..4af304a99 100644
--- a/.github/lychee.toml
+++ b/.github/lychee.toml
@@ -34,8 +34,8 @@ exclude = [
 # Don't check files that are generated during the build via `pnpm docs:code`
 'packages/mermaid/src/docs/config/setup/*',
 
-# Ignore slack invite
-"https://join.slack.com/"
+# Ignore Discord invite
+"https://discord.gg"
 ]
 
 # Exclude all private IPs from checking.
diff --git a/README.md b/README.md
index cf21fdb8e..f1661e27f 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ Generate diagrams from markdown-like text.
 Live Editor!
 

 

- 📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us
+ 📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us
 

 

 简体中文
@@ -33,7 +33,7 @@ Try Live Editor previews of future releases: 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 98975ea33..c9d558393 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -15,7 +15,7 @@ Mermaid
 实时编辑器!
 

 

- 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们
+ 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们
 

 

 English
@@ -34,7 +34,7 @@ Mermaid
 [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 
diff --git a/docs/community/security.md b/docs/community/security.md
index 07adbfbf8..e456adcd7 100644
--- a/docs/community/security.md
+++ b/docs/community/security.md
@@ -16,7 +16,7 @@ We aim to reply within three working days, probably much sooner.
 
 You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to  again if you do not receive prompt attention and regular updates.
 
-You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail  when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
+You may also reach out to the team via our public Discord chat channels; however, please make sure to e-mail  when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
 
 ## Best practices
 
diff --git a/docs/ecosystem/integrations-create.md b/docs/ecosystem/integrations-create.md
index 3dba1dafb..7643c8898 100644
--- a/docs/ecosystem/integrations-create.md
+++ b/docs/ecosystem/integrations-create.md
@@ -22,9 +22,9 @@ Currently pending [IANA](https://www.iana.org/) recognition.
 
 ## Showcase
 
-### Mermaid Slack workspace
+### Mermaid Discord workspace
 
-We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel.
+We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/wwtabKgp8y) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
 
 ### Add to Mermaid Ecosystem
 
diff --git a/docs/intro/index.md b/docs/intro/index.md
index 5a77fa587..d038cde53 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -22,7 +22,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
 [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
 
diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index b6998f249..9bc47ba0c 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -17,7 +17,7 @@ import { teamMembers } from '../contributors';
             
             

             Join the community
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index f5647e3c3..7ce9124a8 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -52,8 +52,8 @@ export default defineConfig({
     socialLinks: [
       { icon: 'github', link: 'https://github.com/mermaid-js/mermaid' },
       {
-        icon: 'slack',
-        link: 'https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE',
+        icon: 'discord',
+        link: 'https://discord.gg/wwtabKgp8y',
       },
       {
         icon: {
diff --git a/packages/mermaid/src/docs/community/security.md b/packages/mermaid/src/docs/community/security.md
index e7a0db6ed..a84a106ab 100644
--- a/packages/mermaid/src/docs/community/security.md
+++ b/packages/mermaid/src/docs/community/security.md
@@ -10,7 +10,7 @@ We aim to reply within three working days, probably much sooner.
 
 You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to  again if you do not receive prompt attention and regular updates.
 
-You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail  when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
+You may also reach out to the team via our public Discord chat channels; however, please make sure to e-mail  when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
 
 ## Best practices
 
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-create.md b/packages/mermaid/src/docs/ecosystem/integrations-create.md
index 421240729..c47ba30da 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-create.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-create.md
@@ -20,9 +20,9 @@ Currently pending [IANA](https://www.iana.org/) recognition.
 
 ## Showcase
 
-### Mermaid Slack workspace
+### Mermaid Discord workspace
 
-We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel.
+We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/wwtabKgp8y) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
 
 ### Add to Mermaid Ecosystem
 
diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index 535ee3a3d..bf5866755 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -16,7 +16,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
 [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y)
 [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
 
 

From 427bcaa3f6d517d476cc1a22e3de950a25e3d1a2 Mon Sep 17 00:00:00 2001
From: Oleg A 
Date: Tue, 23 Jan 2024 12:20:56 +0300
Subject: [PATCH 29/40] docs: fix lint

---
 .../mermaid/src/docs/.vitepress/components/HomePage.vue     | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index 9bc47ba0c..c493ee30a 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -16,11 +16,7 @@ import { teamMembers } from '../contributors';
           

             
             

-            Join the community
+            Join the community
             and get involved!
           

         

From 493f238319ffcebc10570a390d2bbacc121eb715 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 20:28:11 +0530
Subject: [PATCH 30/40] Fix applitools

---
 applitools.config.js | 19 -------------------
 cypress.config.cjs   | 32 --------------------------------
 cypress.config.ts    | 30 ++++++++++++++++++++++++++++++
 3 files changed, 30 insertions(+), 51 deletions(-)
 delete mode 100644 applitools.config.js
 delete mode 100644 cypress.config.cjs
 create mode 100644 cypress.config.ts

diff --git a/applitools.config.js b/applitools.config.js
deleted file mode 100644
index 4cf02220a..000000000
--- a/applitools.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
-  testConcurrency: 1,
-  browser: [
-    // Add browsers with different viewports
-    //   { width: 800, height: 600, name: 'chrome' },
-    //   { width: 700, height: 500, name: 'firefox' },
-    //   { width: 1600, height: 1200, name: 'ie11' },
-    //   { width: 1024, height: 768, name: 'edgechromium' },
-    //   { width: 800, height: 600, name: 'safari' },
-    //   // Add mobile emulation devices in Portrait mode
-    //   { deviceName: 'iPhone X', screenOrientation: 'portrait' },
-    //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
-  ],
-  // set batch name to the configuration
-  // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
-});
diff --git a/cypress.config.cjs b/cypress.config.cjs
deleted file mode 100644
index 33633920a..000000000
--- a/cypress.config.cjs
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const { defineConfig } = require('cypress');
-const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
-const coverage = require('@cypress/code-coverage/task');
-
-module.exports = defineConfig({
-  projectId: 'n2sma2',
-  viewportWidth: 1440,
-  viewportHeight: 1024,
-  e2e: {
-    specPattern: 'cypress/integration/**/*.{js,ts}',
-    setupNodeEvents(on, config) {
-      coverage(on, config);
-      on('before:browser:launch', (browser = {}, launchOptions) => {
-        if (browser.name === 'chrome' && browser.isHeadless) {
-          launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
-        }
-        return launchOptions;
-      });
-      addMatchImageSnapshotPlugin(on, config);
-      // copy any needed variables from process.env to config.env
-      config.env.useAppli = process.env.USE_APPLI ? true : false;
-
-      // do not forget to return the changed config object!
-      return config;
-    },
-  },
-  video: false,
-});
-
-require('@applitools/eyes-cypress')(module);
diff --git a/cypress.config.ts b/cypress.config.ts
new file mode 100644
index 000000000..4182d92a8
--- /dev/null
+++ b/cypress.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import coverage from '@cypress/code-coverage/task';
+import eyesPlugin from '@applitools/eyes-cypress';
+export default eyesPlugin(
+  defineConfig({
+    projectId: 'n2sma2',
+    viewportWidth: 1440,
+    viewportHeight: 1024,
+    e2e: {
+      specPattern: 'cypress/integration/**/*.{js,ts}',
+      setupNodeEvents(on, config) {
+        coverage(on, config);
+        on('before:browser:launch', (browser, launchOptions) => {
+          if (browser.name === 'chrome' && browser.isHeadless) {
+            launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+          }
+          return launchOptions;
+        });
+        addMatchImageSnapshotPlugin(on, config);
+        // copy any needed variables from process.env to config.env
+        config.env.useAppli = process.env.USE_APPLI ? true : false;
+
+        // do not forget to return the changed config object!
+        return config;
+      },
+    },
+    video: false,
+  })
+);

From 5c6c8d113562ea99e3d8445310a42fc3134610c7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 20:36:29 +0530
Subject: [PATCH 31/40] Update cypress

---
 package.json   |   6 +-
 pnpm-lock.yaml | 501 +++++++++++++++++--------------------------------
 2 files changed, 170 insertions(+), 337 deletions(-)

diff --git a/package.json b/package.json
index a60f6f67f..441484218 100644
--- a/package.json
+++ b/package.json
@@ -61,11 +61,11 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.33.1",
+    "@applitools/eyes-cypress": "^3.40.6",
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^17.6.1",
     "@cspell/eslint-plugin": "^6.31.1",
-    "@cypress/code-coverage": "^3.10.7",
+    "@cypress/code-coverage": "^3.12.18",
     "@rollup/plugin-typescript": "^11.1.1",
     "@types/cors": "^2.8.13",
     "@types/eslint": "^8.37.0",
@@ -85,7 +85,7 @@
     "ajv": "^8.12.0",
     "concurrently": "^8.0.1",
     "cors": "^2.8.5",
-    "cypress": "^12.10.0",
+    "cypress": "^12.17.4",
     "cypress-image-snapshot": "^4.0.1",
     "esbuild": "^0.19.0",
     "eslint": "^8.47.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2484f6312..5d950edef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     devDependencies:
       '@applitools/eyes-cypress':
-        specifier: ^3.33.1
-        version: 3.36.2(typescript@5.1.6)
+        specifier: ^3.40.6
+        version: 3.40.6(typescript@5.1.6)
       '@commitlint/cli':
         specifier: ^17.6.1
         version: 17.7.1
@@ -21,8 +21,8 @@ importers:
         specifier: ^6.31.1
         version: 6.31.3
       '@cypress/code-coverage':
-        specifier: ^3.10.7
-        version: 3.11.0(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.3)(webpack@5.88.2)
+        specifier: ^3.12.18
+        version: 3.12.18(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.4)(webpack@5.88.2)
       '@rollup/plugin-typescript':
         specifier: ^11.1.1
         version: 11.1.2(typescript@5.1.6)
@@ -81,11 +81,11 @@ importers:
         specifier: ^2.8.5
         version: 2.8.5
       cypress:
-        specifier: ^12.10.0
-        version: 12.17.3
+        specifier: ^12.17.4
+        version: 12.17.4
       cypress-image-snapshot:
         specifier: ^4.0.1
-        version: 4.0.1(cypress@12.17.3)(jest@29.6.2)
+        version: 4.0.1(cypress@12.17.4)(jest@29.6.2)
       esbuild:
         specifier: ^0.19.0
         version: 0.19.0
@@ -714,110 +714,105 @@ packages:
       leven: 3.1.0
     dev: true
 
-  /@applitools/core-base@1.5.0:
-    resolution: {integrity: sha512-fYK8a4GH0oTmdYYGx8rYCWjl6VH6Mt4iAukhOU6l502rBYAF8mChmwyTxXu8t6oh6ejX3YQ2I+WcAf2q9XIYvg==}
+  /@applitools/core-base@1.9.0:
+    resolution: {integrity: sha512-vicerOYUzDycn0Bf41FmLvGPBwuiTHP5EW7LqQowa38DAgXZLljoLo0IS68HV22HlMHHbzoRglMK3CPAGuNaqA==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/image': 1.1.2
-      '@applitools/logger': 2.0.7
-      '@applitools/req': 1.5.2
-      '@applitools/utils': 1.5.0
+      '@applitools/image': 1.1.9
+      '@applitools/logger': 2.0.14
+      '@applitools/req': 1.6.4
+      '@applitools/utils': 1.7.0
       abort-controller: 3.0.0
       throat: 6.0.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/core@3.9.0(typescript@5.1.6):
-    resolution: {integrity: sha512-fKea8ew6iyLhZskUtngcyCdlJ59Nrb+8R9fU6Y6fXT0xMBQESkU1r9Z+Dt3XUL/CzRE9NW4DWenhd52EFApxYg==}
+  /@applitools/core@4.6.0(typescript@5.1.6):
+    resolution: {integrity: sha512-YLxg4TnIEdYPTOQpeqCbjUKfJBDfjKqwieMVnLKp7Loxwvfh16C4SvsCzLSLHyqfPgsE+zRdt6uoIK0uVWM94g==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
-      '@applitools/core-base': 1.5.0
-      '@applitools/dom-capture': 11.2.2
-      '@applitools/dom-snapshot': 4.7.10
-      '@applitools/driver': 1.13.4
-      '@applitools/ec-client': 1.7.4(typescript@5.1.6)
-      '@applitools/logger': 2.0.7
-      '@applitools/nml-client': 1.5.7
-      '@applitools/req': 1.5.2
-      '@applitools/screenshoter': 3.8.7
-      '@applitools/snippets': 2.4.22
-      '@applitools/socket': 1.1.7
-      '@applitools/spec-driver-webdriver': 1.0.41(webdriver@7.30.0)
-      '@applitools/ufg-client': 1.7.0
-      '@applitools/utils': 1.5.0
+      '@applitools/core-base': 1.9.0
+      '@applitools/dom-capture': 11.2.5
+      '@applitools/dom-snapshot': 4.7.16
+      '@applitools/driver': 1.16.1
+      '@applitools/ec-client': 1.7.22(typescript@5.1.6)
+      '@applitools/logger': 2.0.14
+      '@applitools/nml-client': 1.6.4
+      '@applitools/req': 1.6.4
+      '@applitools/screenshoter': 3.8.20
+      '@applitools/snippets': 2.4.24
+      '@applitools/socket': 1.1.14
+      '@applitools/spec-driver-webdriver': 1.0.54(webdriver@7.31.1)
+      '@applitools/ufg-client': 1.9.9
+      '@applitools/utils': 1.7.0
       '@types/ws': 8.5.5
       abort-controller: 3.0.0
       chalk: 4.1.2
       node-fetch: 2.6.7
-      webdriver: 7.30.0(typescript@5.1.6)
+      semver: 7.5.4
+      webdriver: 7.31.1(typescript@5.1.6)
       ws: 8.13.0
       yargs: 17.7.2
     transitivePeerDependencies:
       - bufferutil
-      - canvas
       - encoding
       - supports-color
       - typescript
       - utf-8-validate
     dev: true
 
-  /@applitools/dom-capture@11.2.2:
-    resolution: {integrity: sha512-omSH+c8+ij/mUPKVwRp7ulCOz33EHMnG8Q3s7XuwaB9m04onEAg82/25otOrntqMKmO2doGWN3E97qUstZJiPQ==}
-    engines: {node: '>=8.9.0'}
+  /@applitools/dom-capture@11.2.5:
+    resolution: {integrity: sha512-bjVduGCBOdDyGSkXs8sH47wRpuwBt6f1FvzbATumIFp0V6xGAB1ehpO+j3Ss1SajwlDl8WQkyS6/85nTFyW3eA==}
+    engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/dom-shared': 1.0.5
+      '@applitools/dom-shared': 1.0.12
       '@applitools/functional-commons': 1.6.0
     dev: true
 
-  /@applitools/dom-shared@1.0.10:
-    resolution: {integrity: sha512-1k0CUQRm+38n6aTg/8IIppndYPDJLc/dU8Regbi/miP3xZmOG4Wwd5fBiu/MI5lgQm6RZU+at18lpCLFwU+Nng==}
-    engines: {node: '>=8.9.0'}
+  /@applitools/dom-shared@1.0.12:
+    resolution: {integrity: sha512-GFyVHOUFjaS2WhUPjaELn1yBAK9hmRqv031RRQjYkf+3aD9GfzKHj/ZUVcSsZydid+0VAtHVQFwZGH79bGhd7w==}
+    engines: {node: '>=12.13.0'}
     dev: true
 
-  /@applitools/dom-shared@1.0.5:
-    resolution: {integrity: sha512-O2zgnnqVi3/Atq7EQjURLa73XNaDFJCj8wHht6WQtxIv1EWYnPutNTmnJSKwK7FnbJAg65OVjZylcz4EezyYZA==}
-    engines: {node: '>=8.9.0'}
-    dev: true
-
-  /@applitools/dom-snapshot@4.7.10:
-    resolution: {integrity: sha512-QhX0p6irvQE48eeauNHIfEm76L8QY8mDO8Tk4YOzzBRKcGpKphQUR/5GRCR9S3jx5wwJAwjF/aMW/W7Cwdaztw==}
-    engines: {node: '>=8.9.0'}
+  /@applitools/dom-snapshot@4.7.16:
+    resolution: {integrity: sha512-GXWrMOkpHlnpo0tonhxfmDFOiCaT//ZDexB9vGKLgBBF0QDFpdy9BgvasLvy8I0PuVegXsgJbZS3gS053N7SHQ==}
+    engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/dom-shared': 1.0.10
+      '@applitools/dom-shared': 1.0.12
       '@applitools/functional-commons': 1.6.0
       css-tree: 2.3.1
       pako: 1.0.11
     dev: true
 
-  /@applitools/driver@1.13.4:
-    resolution: {integrity: sha512-LdATkjMoTZKUDHmuIfV0uh0ZiRe+yNNIehTqmjV6LnQrNvm73ddzF2Tn+LM8Vg/CflwFhw+TVKPaywTmi35wUg==}
+  /@applitools/driver@1.16.1:
+    resolution: {integrity: sha512-DfSbcKopOIPl1Wfet3Uib2bDSl64Wh51772MPM7A/xrwJrLOY5NvfT71PqMIQd4eZAd6k5hRg5gbGL5zTzktLQ==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/logger': 2.0.7
-      '@applitools/snippets': 2.4.22
-      '@applitools/utils': 1.5.0
+      '@applitools/logger': 2.0.14
+      '@applitools/snippets': 2.4.24
+      '@applitools/utils': 1.7.0
       semver: 7.5.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/ec-client@1.7.4(typescript@5.1.6):
-    resolution: {integrity: sha512-vFY5O9WXQ905hUcw4ot1BuKAAFq6F+hyQfX/obsQsUPUvJXqHhiFjMiI/x3cyrPr40EVLQM8edZCa71m4k2WyQ==}
+  /@applitools/ec-client@1.7.22(typescript@5.1.6):
+    resolution: {integrity: sha512-zhkYIW8bUpwc+TmvQyxL12kIt2TnAwB30XHke1ApmcPxGk9P8lfjm/AzwnKHqDBJxN2V/TSUfuRvseZq5b4TRA==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
-      '@applitools/core-base': 1.5.0
-      '@applitools/driver': 1.13.4
-      '@applitools/logger': 2.0.7
-      '@applitools/req': 1.5.2
-      '@applitools/socket': 1.1.7
-      '@applitools/spec-driver-webdriver': 1.0.41(webdriver@7.30.0)
-      '@applitools/tunnel-client': 1.1.3
-      '@applitools/utils': 1.5.0
+      '@applitools/core-base': 1.9.0
+      '@applitools/driver': 1.16.1
+      '@applitools/logger': 2.0.14
+      '@applitools/req': 1.6.4
+      '@applitools/socket': 1.1.14
+      '@applitools/spec-driver-webdriver': 1.0.54(webdriver@7.31.1)
+      '@applitools/tunnel-client': 1.4.0
+      '@applitools/utils': 1.7.0
       abort-controller: 3.0.0
-      webdriver: 7.30.0(typescript@5.1.6)
+      webdriver: 7.31.1(typescript@5.1.6)
       yargs: 17.7.2
     transitivePeerDependencies:
       - supports-color
@@ -859,40 +854,38 @@ packages:
       - supports-color
     dev: true
 
-  /@applitools/eyes-cypress@3.36.2(typescript@5.1.6):
-    resolution: {integrity: sha512-GA1KP7i3Zr7sbc8yscw7fay1XbQ46LxEAH4dLqjJhOmvvpZuDlmgRyVMuvTmobDXKKHtdVpfoXtJQURrxs7fvA==}
+  /@applitools/eyes-cypress@3.40.6(typescript@5.1.6):
+    resolution: {integrity: sha512-Klqt3y2U9pl+btLKQJB6e6UtzOv4wdAKxD9V6VCjLF8DqQeBukinAG3kBgpDRQVEVCYMeQXdQZrRTRJvZOkpIg==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
-      '@applitools/core': 3.9.0(typescript@5.1.6)
-      '@applitools/eyes': 1.7.2(typescript@5.1.6)
+      '@applitools/core': 4.6.0(typescript@5.1.6)
+      '@applitools/eyes': 1.13.5(typescript@5.1.6)
       '@applitools/functional-commons': 1.6.0
-      '@applitools/logger': 2.0.7
-      '@applitools/utils': 1.5.0
+      '@applitools/logger': 2.0.14
+      '@applitools/utils': 1.7.0
       boxen: 5.1.2
       chalk: 3.0.0
-      semver: 7.3.8
+      semver: 7.5.4
       uuid: 8.3.2
       ws: 8.5.0
     transitivePeerDependencies:
       - bufferutil
-      - canvas
       - encoding
       - supports-color
       - typescript
       - utf-8-validate
     dev: true
 
-  /@applitools/eyes@1.7.2(typescript@5.1.6):
-    resolution: {integrity: sha512-RNwPMp19xmQ+oEEZH66wGbnBbOqsrHaLBwnCZ9qJ9294aN4DuYHJNXdzHtLFSwjHNc8UmyDRU2Enn4825hqV6w==}
+  /@applitools/eyes@1.13.5(typescript@5.1.6):
+    resolution: {integrity: sha512-FXFH5D78UMcqG0No5FgvISlfGM9DrXTCnRsEXhEw+dbQneG7siKRY6BQci3QDgrh0sI0yfVaZbZrpXIKuDF1ug==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/core': 3.9.0(typescript@5.1.6)
-      '@applitools/logger': 2.0.7
-      '@applitools/utils': 1.5.0
+      '@applitools/core': 4.6.0(typescript@5.1.6)
+      '@applitools/logger': 2.0.14
+      '@applitools/utils': 1.7.0
     transitivePeerDependencies:
       - bufferutil
-      - canvas
       - encoding
       - supports-color
       - typescript
@@ -904,11 +897,11 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
-  /@applitools/image@1.1.2:
-    resolution: {integrity: sha512-Cy1oKCB2vIpHT47Y1tictsRS2RLBVI4XzxYWvKnXx+ZsbL364IiDzwWxYKgvA7/6t1Ako648n4+BWKoUi5Ewbg==}
+  /@applitools/image@1.1.9:
+    resolution: {integrity: sha512-R86re+yofXSBamTuzSLwFB57fzaf7aiKvyx675uw8e/XfqQy3vhGbp8Bh23lUZX9y7ngf2ldrpnQ7nQrvmtJuA==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/utils': 1.5.0
+      '@applitools/utils': 1.7.0
       bmpimagejs: 1.0.4
       jpeg-js: 0.4.4
       omggif: 1.0.10
@@ -926,33 +919,33 @@ packages:
       - supports-color
     dev: true
 
-  /@applitools/logger@2.0.7:
-    resolution: {integrity: sha512-dmX2nWWixMYsOdhl1MANv7wr8cKzYUOaHxQp9CdokVbJy+NGwWAzK6qVeKjogn7D6eXHzgn3R3OzplYSq/fK/g==}
+  /@applitools/logger@2.0.14:
+    resolution: {integrity: sha512-oq/RPjs/3BjR3EdLohHhzzVufBYEMMhOUmZlCnvgmCJIhUsa3ceq8Ta2E99TUzSny9xkl962JoRDfLQg/vS+Ww==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/utils': 1.5.0
+      '@applitools/utils': 1.7.0
       chalk: 4.1.2
       debug: 4.3.4(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/nml-client@1.5.7:
-    resolution: {integrity: sha512-jAG2/4JSqX7FSrdyIyjdXcPy2l2/t8KRlw554nL1ABgtqTV8yCI3DxVUk7RCNi39f1uY5pA2pfiZVGFImnSFKg==}
+  /@applitools/nml-client@1.6.4:
+    resolution: {integrity: sha512-mbLnwpXbM2MkB+bP9+Hluywi4OAFWDr+FvjHkk/9TcvcM9EYbmD8deGuTC5kFt5WDDS568WQDRj+G2tT1JfLEA==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/logger': 2.0.7
-      '@applitools/req': 1.5.2
-      '@applitools/utils': 1.5.0
+      '@applitools/logger': 2.0.14
+      '@applitools/req': 1.6.4
+      '@applitools/utils': 1.7.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/req@1.5.2:
-    resolution: {integrity: sha512-evuikeiCYudhxSQ2kisO7DdywPqshaaN+BiDu4P3eTz5R9VmqhXwWP9bS88G8bzzz0FeNQMY9a7TjQ7d5jMRrA==}
-    engines: {node: '>=12.13.0'}
+  /@applitools/req@1.6.4:
+    resolution: {integrity: sha512-yKTga1QHzIk7ECHgC8JEgYxV91PdIHWRa02ZpsK2FAk6GjTefPK6WZsj1vGKeVi/dGxHuZT8sjvtJHc275osug==}
+    engines: {node: '>=16.13.0'}
     dependencies:
-      '@applitools/utils': 1.5.0
+      '@applitools/utils': 1.7.0
       abort-controller: 3.0.0
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
@@ -961,81 +954,78 @@ packages:
       - supports-color
     dev: true
 
-  /@applitools/screenshoter@3.8.7:
-    resolution: {integrity: sha512-G576fLyTTAJEnhFZBeD57+1JDXGTDcTlrg0n32ujtYTFswUAf5XnXmeO6s2WqeHKQl74e2xwhBmdtU/CrVOkig==}
+  /@applitools/screenshoter@3.8.20:
+    resolution: {integrity: sha512-k7t4cdJ5vpgYvsLLrenSvPNkUZ25uUs7Q54X0tGtkgQ/C+pQ8GLaIXQQwyVaEYbnF6WuAnrjTXMpdPJ2uUvpAg==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/image': 1.1.2
-      '@applitools/logger': 2.0.7
-      '@applitools/snippets': 2.4.22
-      '@applitools/utils': 1.5.0
+      '@applitools/image': 1.1.9
+      '@applitools/logger': 2.0.14
+      '@applitools/snippets': 2.4.24
+      '@applitools/utils': 1.7.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/snippets@2.4.22:
-    resolution: {integrity: sha512-bv4GzMf6k4mAyMxo3PVR3HKEPkf4h0O6+xNo6UO78cw+MpkT4Sr7JDk3mLq8H/WRDKk7x4VKpJeoDHd5dBxT3g==}
+  /@applitools/snippets@2.4.24:
+    resolution: {integrity: sha512-T/cfYA15K+gR2Xc/cEnn2hR7XBJ9vCcH/Jcp7Hoor14j7nzldR+u69HaQe/sa4ChDU4eZyTiTggek52+MqX7FQ==}
     engines: {node: '>=12.13.0'}
     dev: true
 
-  /@applitools/socket@1.1.7:
-    resolution: {integrity: sha512-SpP+Zw5B9VJ3K+xW+wSYDwfrOQ1U9/95h5G3rszKaVleX2FTUW0JgmASuSlwgr7veU3qlcNzt3vas/tQM3/z/g==}
+  /@applitools/socket@1.1.14:
+    resolution: {integrity: sha512-o43hNnD/PN5T5MFR3cZ5OC+b5PpkV/PeTk8z844sNtGyziS9GEpO0vYfG2XLq/mZg0YQurrXtYupUMndV+0wDg==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/logger': 2.0.7
-      '@applitools/utils': 1.5.0
+      '@applitools/logger': 2.0.14
+      '@applitools/utils': 1.7.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/spec-driver-webdriver@1.0.41(webdriver@7.30.0):
-    resolution: {integrity: sha512-0kUHiFmr3FiOlfTnfS1k8pvJXgnEM8bP36teiDJvmAJnk8aJG5nmqaQj1KkeLUVVZ1wfYlg/+iDtGUdP4a4Zxw==}
+  /@applitools/spec-driver-webdriver@1.0.54(webdriver@7.31.1):
+    resolution: {integrity: sha512-ZpwUBWu5kUil5E+r+NdhdB8SzWwGv56+sZSGyPlgN0w2krmIudeyBKuJKYMfqdXSu0lATSgKJSCJXmkb/q4DNQ==}
     engines: {node: '>=12.13.0'}
     peerDependencies:
-      webdriver: '>=7.27.0'
+      webdriver: '>=6.0.0'
     dependencies:
-      '@applitools/driver': 1.13.4
-      '@applitools/utils': 1.5.0
+      '@applitools/driver': 1.16.1
+      '@applitools/utils': 1.7.0
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
-      webdriver: 7.30.0(typescript@5.1.6)
+      webdriver: 7.31.1(typescript@5.1.6)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/tunnel-client@1.1.3:
-    resolution: {integrity: sha512-xe0HqznqnuhsZYIY//NnjszEkIcYgdZkwVR4GOwzVCOCcxIGoi+kMpDUuC2Xcd8+UiVbfZfZTeo7rXITlzzqAw==}
+  /@applitools/tunnel-client@1.4.0:
+    resolution: {integrity: sha512-vgQoEN81Mhqjf74+9JAUvGK8t8Dzm0p8nNrqsqeHekuTva6Jh92sNK40j96z7jrMoSo+JHOeb/7mIOicU9o/0A==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
       '@applitools/execution-grid-tunnel': 2.1.8
-      '@applitools/logger': 2.0.7
-      '@applitools/req': 1.5.2
-      '@applitools/socket': 1.1.7
-      '@applitools/utils': 1.5.0
+      '@applitools/logger': 2.0.14
+      '@applitools/req': 1.6.4
+      '@applitools/socket': 1.1.14
+      '@applitools/utils': 1.7.0
       abort-controller: 3.0.0
       yargs: 17.7.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@applitools/ufg-client@1.7.0:
-    resolution: {integrity: sha512-BMFLuWGq8YVs0/z5VBl8CAKzOMXbagHFxyR4oGdg31nDsuKgKfhlnbGji5qek243ex8vEbEqFwsH2K0ZXYGIeQ==}
+  /@applitools/ufg-client@1.9.9:
+    resolution: {integrity: sha512-J/k6C1JYPr4ohcE64AvVHIeTMZ83bXnhuIryxvOWJDSyr6Yh4hvtrbCviUyYMaKj7WCMYeDEESt6auiyBMxVGw==}
     engines: {node: '>=12.13.0'}
     dependencies:
-      '@applitools/image': 1.1.2
-      '@applitools/logger': 2.0.7
-      '@applitools/req': 1.5.2
-      '@applitools/utils': 1.5.0
+      '@applitools/image': 1.1.9
+      '@applitools/logger': 2.0.14
+      '@applitools/req': 1.6.4
+      '@applitools/utils': 1.7.0
+      '@xmldom/xmldom': 0.8.10
       abort-controller: 3.0.0
       css-tree: 2.3.1
-      jsdom: 19.0.0
       throat: 6.0.2
     transitivePeerDependencies:
-      - bufferutil
-      - canvas
       - supports-color
-      - utf-8-validate
     dev: true
 
   /@applitools/utils@1.3.36:
@@ -1043,8 +1033,8 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
-  /@applitools/utils@1.5.0:
-    resolution: {integrity: sha512-BZk8YolP0G+/Srjkhf+pFp4zY7bU41L63hDN9gtwrD1xZOfWXJbOCD3gFQAGRB2qsozHMkPNTt+xw7RJjIjGQg==}
+  /@applitools/utils@1.7.0:
+    resolution: {integrity: sha512-CvBxdfPZ3ss1hOD8Yr9y2SzVfqLKBA/0N3gfQd5qafMrBhI0wuCycQmiclpAQNEVNkbhqn8/t6dOeeYgapjyDw==}
     engines: {node: '>=12.13.0'}
     dev: true
 
@@ -3104,27 +3094,31 @@ packages:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
-  /@cypress/code-coverage@3.11.0(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.3)(webpack@5.88.2):
-    resolution: {integrity: sha512-ihSO1s03gmLRE224oIjrbdG1ey63vw/UY+VSqQ5m/TKkAvyz6GIiniq6juk3AV/+0vQC1Eb4UWFu8ndtji4M1g==}
+  /@cypress/code-coverage@3.12.18(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-RTOyCVr5CWaJ7cW1gOvlXSLDr0HNXZ7xSVfLSZEGsTODbaxeUV01Z1k93spnbVT7ri9UkxCEffPcsZsZi1oDng==}
     peerDependencies:
+      '@babel/core': ^7.0.1
+      '@babel/preset-env': ^7.0.0
+      babel-loader: ^8.3 || ^9
       cypress: '*'
+      webpack: ^4 || ^5
     dependencies:
-      '@cypress/webpack-preprocessor': 5.17.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2)
+      '@babel/core': 7.23.5
+      '@babel/preset-env': 7.22.10(@babel/core@7.23.5)
+      '@cypress/webpack-preprocessor': 6.0.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2)
+      babel-loader: 9.1.3(@babel/core@7.23.5)(webpack@5.88.2)
       chalk: 4.1.2
-      cypress: 12.17.3
-      dayjs: 1.11.9
+      cypress: 12.17.4
+      dayjs: 1.11.10
       debug: 4.3.4(supports-color@8.1.1)
       execa: 4.1.0
-      globby: 11.0.4
-      istanbul-lib-coverage: 3.0.0
+      globby: 11.1.0
+      istanbul-lib-coverage: 3.2.0
       js-yaml: 4.1.0
       nyc: 15.1.0
+      webpack: 5.88.2(esbuild@0.19.0)(webpack-cli@4.10.0)
     transitivePeerDependencies:
-      - '@babel/core'
-      - '@babel/preset-env'
-      - babel-loader
       - supports-color
-      - webpack
     dev: true
 
   /@cypress/request@2.88.12:
@@ -3151,12 +3145,12 @@ packages:
       uuid: 8.3.2
     dev: true
 
-  /@cypress/webpack-preprocessor@5.17.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2):
-    resolution: {integrity: sha512-FE/e8ikPc8z4EVopJCaior3RGy0jd2q9Xcp5NtiwNG4XnLfEnUFTZlAGwXe75sEh4fNMPrBJW1KIz77PX5vGAw==}
+  /@cypress/webpack-preprocessor@6.0.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2):
+    resolution: {integrity: sha512-WVNeFVSnFKxE3WZNRIriduTgqJRpevaiJIPlfqYTTzfXRD7X1Pv4woDE+G4caPV9bJqVKmVFiwzrXMRNeJxpxA==}
     peerDependencies:
       '@babel/core': ^7.0.1
       '@babel/preset-env': ^7.0.0
-      babel-loader: ^8.0.2 || ^9
+      babel-loader: ^8.3 || ^9
       webpack: ^4 || ^5
     dependencies:
       '@babel/core': 7.23.5
@@ -4931,6 +4925,13 @@ packages:
       '@types/node': 18.17.5
     dev: true
 
+  /@types/glob@8.1.0:
+    resolution: {integrity: sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==}
+    dependencies:
+      '@types/minimatch': 5.1.2
+      '@types/node': 18.17.5
+    dev: true
+
   /@types/graceful-fs@4.1.6:
     resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
     dependencies:
@@ -6146,13 +6147,14 @@ packages:
       - vue
     dev: true
 
-  /@wdio/config@7.30.0(typescript@5.1.6):
-    resolution: {integrity: sha512-/38rol9WCfFTMtXyd/C856/aexxIZnfVvXg7Fw2WXpqZ9qadLA+R4N35S2703n/RByjK/5XAYtHoljtvh3727w==}
+  /@wdio/config@7.31.1(typescript@5.1.6):
+    resolution: {integrity: sha512-WAfswbCatwiaDVqy6kfF/5T8/WS/US/SRhBGUFrfBuGMIe+RRoHgy7jURFWSvUIE7CNHj8yvs46fLUcxhXjzcQ==}
     engines: {node: '>=12.0.0'}
     dependencies:
+      '@types/glob': 8.1.0
       '@wdio/logger': 7.26.0
-      '@wdio/types': 7.26.0(typescript@5.1.6)
-      '@wdio/utils': 7.26.0(typescript@5.1.6)
+      '@wdio/types': 7.30.2(typescript@5.1.6)
+      '@wdio/utils': 7.30.2(typescript@5.1.6)
       deepmerge: 4.3.1
       glob: 8.1.0
     transitivePeerDependencies:
@@ -6174,8 +6176,8 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: true
 
-  /@wdio/types@7.26.0(typescript@5.1.6):
-    resolution: {integrity: sha512-mOTfWAGQ+iT58iaZhJMwlUkdEn3XEWE4jthysMLXFnSuZ2eaODVAiK31SmlS/eUqgSIaupeGqYUrtCuSNbLefg==}
+  /@wdio/types@7.30.2(typescript@5.1.6):
+    resolution: {integrity: sha512-uZ8o7FX8RyBsaXiOWa59UKTCHTtADNvOArYTcHNEIzt+rh4JdB/uwqfc8y4TCNA2kYm7PWaQpUFwpStLeg0H1Q==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       typescript: ^4.6.2
@@ -6188,12 +6190,12 @@ packages:
       typescript: 5.1.6
     dev: true
 
-  /@wdio/utils@7.26.0(typescript@5.1.6):
-    resolution: {integrity: sha512-pVq2MPXZAYLkKGKIIHktHejnHqg4TYKoNYSi2EDv+I3GlT8VZKXHazKhci82ov0tD+GdF27+s4DWNDCfGYfBdQ==}
+  /@wdio/utils@7.30.2(typescript@5.1.6):
+    resolution: {integrity: sha512-np7I+smszFUennbQKdzbMN/zUL3s3EZq9pCCUcTRjjs9TE4tnn0wfmGdoz2o7REYu6kn9NfFFJyVIM2VtBbKEA==}
     engines: {node: '>=12.0.0'}
     dependencies:
       '@wdio/logger': 7.26.0
-      '@wdio/types': 7.26.0(typescript@5.1.6)
+      '@wdio/types': 7.30.2(typescript@5.1.6)
       p-iteration: 1.1.8
     transitivePeerDependencies:
       - typescript
@@ -6414,13 +6416,6 @@ packages:
       negotiator: 0.6.3
     dev: true
 
-  /acorn-globals@6.0.0:
-    resolution: {integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==}
-    dependencies:
-      acorn: 7.4.1
-      acorn-walk: 7.2.0
-    dev: true
-
   /acorn-import-assertions@1.9.0(acorn@8.10.0):
     resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
     peerDependencies:
@@ -6437,21 +6432,10 @@ packages:
       acorn: 8.10.0
     dev: true
 
-  /acorn-walk@7.2.0:
-    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
-    engines: {node: '>=0.4.0'}
-    dev: true
-
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
 
-  /acorn@7.4.1:
-    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-    dev: true
-
   /acorn@8.10.0:
     resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
     engines: {node: '>=0.4.0'}
@@ -7070,10 +7054,6 @@ packages:
     dependencies:
       fill-range: 7.0.1
 
-  /browser-process-hrtime@1.0.0:
-    resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
-    dev: true
-
   /browserslist@4.21.10:
     resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -8059,21 +8039,6 @@ packages:
     hasBin: true
     dev: false
 
-  /cssom@0.3.8:
-    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
-    dev: true
-
-  /cssom@0.5.0:
-    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
-    dev: true
-
-  /cssstyle@2.3.0:
-    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
-    engines: {node: '>=8'}
-    dependencies:
-      cssom: 0.3.8
-    dev: true
-
   /cssstyle@3.0.0:
     resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
     engines: {node: '>=14'}
@@ -8102,14 +8067,14 @@ packages:
     resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==}
     dev: true
 
-  /cypress-image-snapshot@4.0.1(cypress@12.17.3)(jest@29.6.2):
+  /cypress-image-snapshot@4.0.1(cypress@12.17.4)(jest@29.6.2):
     resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==}
     engines: {node: '>=8'}
     peerDependencies:
       cypress: ^4.5.0
     dependencies:
       chalk: 2.4.2
-      cypress: 12.17.3
+      cypress: 12.17.4
       fs-extra: 7.0.1
       glob: 7.2.3
       jest-image-snapshot: 4.2.0(jest@29.6.2)
@@ -8119,8 +8084,8 @@ packages:
       - jest
     dev: true
 
-  /cypress@12.17.3:
-    resolution: {integrity: sha512-/R4+xdIDjUSLYkiQfwJd630S81KIgicmQOLXotFxVXkl+eTeVO+3bHXxdi5KBh/OgC33HWN33kHX+0tQR/ZWpg==}
+  /cypress@12.17.4:
+    resolution: {integrity: sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==}
     engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
     hasBin: true
     requiresBuild: true
@@ -8160,6 +8125,7 @@ packages:
       minimist: 1.2.8
       ospath: 1.2.2
       pretty-bytes: 5.6.0
+      process: 0.11.10
       proxy-from-env: 1.0.0
       request-progress: 3.0.0
       semver: 7.5.4
@@ -8576,15 +8542,6 @@ packages:
     engines: {node: '>= 12'}
     dev: true
 
-  /data-urls@3.0.2:
-    resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      abab: 2.0.6
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 11.0.0
-    dev: true
-
   /data-urls@4.0.0:
     resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
     engines: {node: '>=14'}
@@ -8601,6 +8558,10 @@ packages:
       '@babel/runtime': 7.22.10
     dev: true
 
+  /dayjs@1.11.10:
+    resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
+    dev: true
+
   /dayjs@1.11.7:
     resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
     dev: false
@@ -9265,18 +9226,6 @@ packages:
       source-map: 0.1.43
     dev: true
 
-  /escodegen@2.1.0:
-    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
-    engines: {node: '>=6.0'}
-    hasBin: true
-    dependencies:
-      esprima: 4.0.1
-      estraverse: 5.3.0
-      esutils: 2.0.3
-    optionalDependencies:
-      source-map: 0.6.1
-    dev: true
-
   /eslint-config-prettier@8.10.0(eslint@8.47.0):
     resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
     hasBin: true
@@ -10416,18 +10365,6 @@ packages:
       define-properties: 1.2.0
     dev: true
 
-  /globby@11.0.4:
-    resolution: {integrity: sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==}
-    engines: {node: '>=10'}
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.2
-      ignore: 5.2.4
-      merge2: 1.4.1
-      slash: 3.0.0
-    dev: true
-
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -11229,11 +11166,6 @@ packages:
     resolution: {integrity: sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==}
     dev: true
 
-  /istanbul-lib-coverage@3.0.0:
-    resolution: {integrity: sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==}
-    engines: {node: '>=8'}
-    dev: true
-
   /istanbul-lib-coverage@3.2.0:
     resolution: {integrity: sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==}
     engines: {node: '>=8'}
@@ -11869,48 +11801,6 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: true
 
-  /jsdom@19.0.0:
-    resolution: {integrity: sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      canvas: ^2.5.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-    dependencies:
-      abab: 2.0.6
-      acorn: 8.10.0
-      acorn-globals: 6.0.0
-      cssom: 0.5.0
-      cssstyle: 2.3.0
-      data-urls: 3.0.2
-      decimal.js: 10.4.3
-      domexception: 4.0.0
-      escodegen: 2.1.0
-      form-data: 4.0.0
-      html-encoding-sniffer: 3.0.0
-      http-proxy-agent: 5.0.0
-      https-proxy-agent: 5.0.1
-      is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.7
-      parse5: 6.0.1
-      saxes: 5.0.1
-      symbol-tree: 3.2.4
-      tough-cookie: 4.1.3
-      w3c-hr-time: 1.0.2
-      w3c-xmlserializer: 3.0.0
-      webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 10.0.0
-      ws: 8.13.0
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-    dev: true
-
   /jsdom@22.0.0:
     resolution: {integrity: sha512-p5ZTEb5h+O+iU02t0GfEjAnkdYPrQSkfuTSMkMYyIoMvUNEHsbG0bHHbfXIcfTqD2UfvjQX7mmgiFsyRwGscVw==}
     engines: {node: '>=16'}
@@ -13615,10 +13505,6 @@ packages:
       lines-and-columns: 1.2.4
     dev: true
 
-  /parse5@6.0.1:
-    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
-    dev: true
-
   /parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
     dependencies:
@@ -14026,7 +13912,6 @@ packages:
   /process@0.11.10:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
-    dev: false
 
   /prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
@@ -14665,13 +14550,6 @@ packages:
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  /saxes@5.0.1:
-    resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
-    engines: {node: '>=10'}
-    dependencies:
-      xmlchars: 2.2.0
-    dev: true
-
   /saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -14732,14 +14610,6 @@ packages:
     hasBin: true
     dev: true
 
-  /semver@7.3.8:
-    resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
-    dev: true
-
   /semver@7.5.4:
     resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
     engines: {node: '>=10'}
@@ -15657,13 +15527,6 @@ packages:
       punycode: 2.3.0
     dev: true
 
-  /tr46@3.0.0:
-    resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
-    engines: {node: '>=12'}
-    dependencies:
-      punycode: 2.3.0
-    dev: true
-
   /tr46@4.1.1:
     resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
     engines: {node: '>=14'}
@@ -16746,20 +16609,6 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /w3c-hr-time@1.0.2:
-    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
-    deprecated: Use your platform's native performance.now() and performance.timeOrigin.
-    dependencies:
-      browser-process-hrtime: 1.0.0
-    dev: true
-
-  /w3c-xmlserializer@3.0.0:
-    resolution: {integrity: sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==}
-    engines: {node: '>=12'}
-    dependencies:
-      xml-name-validator: 4.0.0
-    dev: true
-
   /w3c-xmlserializer@4.0.0:
     resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
     engines: {node: '>=14'}
@@ -16810,16 +16659,16 @@ packages:
     resolution: {integrity: sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==}
     dev: false
 
-  /webdriver@7.30.0(typescript@5.1.6):
-    resolution: {integrity: sha512-bQE4oVgjjg5sb3VkCD+Eb8mscEvf3TioP0mnEZK0f5OJUNI045gMCJgpX8X4J8ScGyEhzlhn1KvlAn3yzxjxog==}
+  /webdriver@7.31.1(typescript@5.1.6):
+    resolution: {integrity: sha512-nCdJLxRnYvOMFqTEX7sqQtF/hV/Jgov0Y6ICeOm1DMTlZSRRDaUsBMlEAPkEwif9uBJYdM0znv8qzfX358AGqQ==}
     engines: {node: '>=12.0.0'}
     dependencies:
       '@types/node': 18.17.5
-      '@wdio/config': 7.30.0(typescript@5.1.6)
+      '@wdio/config': 7.31.1(typescript@5.1.6)
       '@wdio/logger': 7.26.0
       '@wdio/protocols': 7.27.0
-      '@wdio/types': 7.26.0(typescript@5.1.6)
-      '@wdio/utils': 7.26.0(typescript@5.1.6)
+      '@wdio/types': 7.30.2(typescript@5.1.6)
+      '@wdio/utils': 7.30.2(typescript@5.1.6)
       got: 11.8.6
       ky: 0.30.0
       lodash.merge: 4.6.2
@@ -17023,22 +16872,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /whatwg-url@10.0.0:
-    resolution: {integrity: sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==}
-    engines: {node: '>=12'}
-    dependencies:
-      tr46: 3.0.0
-      webidl-conversions: 7.0.0
-    dev: true
-
-  /whatwg-url@11.0.0:
-    resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      tr46: 3.0.0
-      webidl-conversions: 7.0.0
-    dev: true
-
   /whatwg-url@12.0.1:
     resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==}
     engines: {node: '>=14'}

From a01be16d27ffd38e50a2c55f9dfef3f43c18e7da Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 23:38:21 +0530
Subject: [PATCH 32/40] Echo event

---
 .github/workflows/e2e.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index c23dc88ba..a4087cd19 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -30,7 +30,8 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 18.x
-
+      - run: |
+          echo '${{ toJson(github.event) }}'
       - name: Cache snapshots
         id: cache-snapshot
         uses: actions/cache@v4

From 42ad1f4fe458c8ac79daf1c98bb5b9ae7760316f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 23:49:52 +0530
Subject: [PATCH 33/40] RefTest

---
 .github/workflows/e2e.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index a4087cd19..3b3b849bc 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -18,7 +18,7 @@ permissions:
 
 env:
   # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
-  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }}
+  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || (github.event.before == '0000000000000000000000000000000000000000' && 'develop' || github.event.before)  }}
 
 jobs:
   cache:
@@ -31,6 +31,7 @@ jobs:
         with:
           node-version: 18.x
       - run: |
+          echo '${{ env.targetHash }}'
           echo '${{ toJson(github.event) }}'
       - name: Cache snapshots
         id: cache-snapshot

From de03a017db5895679e2a781781ce58592524b7bf Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 23:51:48 +0530
Subject: [PATCH 34/40] Remove echo

---
 .github/workflows/e2e.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 3b3b849bc..b8232b8c0 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -30,9 +30,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 18.x
-      - run: |
-          echo '${{ env.targetHash }}'
-          echo '${{ toJson(github.event) }}'
       - name: Cache snapshots
         id: cache-snapshot
         uses: actions/cache@v4

From ec79ac200c7714276a374988741dc58375c47f04 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Tue, 23 Jan 2024 23:53:48 +0530
Subject: [PATCH 35/40] Lint

---
 packages/mermaid/src/docs/syntax/flowchart.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 95cc962c7..540f820f7 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -775,12 +775,13 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid supports Font Awesome if the CSS is included on the website. 
-Mermaid does not have any restriction on the version of Font Awesome that can be used. 
+Mermaid supports Font Awesome if the CSS is included on the website.
+Mermaid does not have any restriction on the version of Font Awesome that can be used.
 
 Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website.
 
 Adding this snippet in the `` would add support for Font Awesome v6.5.1
+
 ```html
 
Date: Thu, 25 Jan 2024 23:28:42 +0530
Subject: [PATCH 36/40]  perf: prevent adding multiple DOMPurify hooks

Currently, everytime `removeScript()` is called, the same DOMPurify
hooks are getting added again and again.

Co-authored-by: Alois Klink 
---
 .../mermaid/src/diagrams/common/common.ts     | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index caf43bc68..8609a175a 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -18,13 +18,18 @@ export const getRows = (s?: string): string[] => {
   return str.split('#br#');
 };
 
-/**
- * Removes script tags from a text
- *
- * @param txt - The text to sanitize
- * @returns The safer text
- */
-export const removeScript = (txt: string): string => {
+const setupDompurifyHooksIfNotSetup = (() => {
+  let setup = false;
+
+  return () => {
+    if (!setup) {
+      setupDompurifyHooks();
+      setup = true;
+    }
+  };
+})();
+
+function setupDompurifyHooks() {
   const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
 
   DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
@@ -33,8 +38,6 @@ export const removeScript = (txt: string): string => {
     }
   });
 
-  const sanitizedText = DOMPurify.sanitize(txt);
-
   DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
     if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
       node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
@@ -44,6 +47,18 @@ export const removeScript = (txt: string): string => {
       }
     }
   });
+}
+
+/**
+ * Removes script tags from a text
+ *
+ * @param txt - The text to sanitize
+ * @returns The safer text
+ */
+export const removeScript = (txt: string): string => {
+  setupDompurifyHooksIfNotSetup();
+
+  const sanitizedText = DOMPurify.sanitize(txt);
 
   return sanitizedText;
 };

From 59264a33d7306441193cd6c68ceb4ff4ab3d7fd1 Mon Sep 17 00:00:00 2001
From: FutzMonitor 
Date: Fri, 26 Jan 2024 11:48:48 -0500
Subject: [PATCH 37/40] Changes to gantt.html 1. Added a Gantt diagram that
 demonstrates to users that hashtages and semicolons can be added to titles,
 sections, and task data. Changes to gantt.spec.js 1. Added unit tests to
 ensure that semicolons and hashtags didn't break the functionality of the
 gantt diagram when used in titles, sections or task data. Changes to
 /parser/gantt.spec.js 1. Added rendering tests to ensure that semicolons and
 hashtags in titles, sections, and task data didn't break the rendering of
 Gantt diagrams.

---
 cypress/integration/rendering/gantt.spec.js   | 102 ++++++++++++++++++
 demos/gantt.html                              |  15 +++
 .../src/diagrams/gantt/parser/gantt.spec.js   |  36 +++++++
 3 files changed, 153 insertions(+)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 73ff4ee00..4abde9d44 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -583,4 +583,106 @@ describe('Gantt diagram', () => {
       {}
     );
   });
+
+  it("should render when there's a semicolon in the title", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title ;Gantt With a Semicolon in the Title
+      dateFormat  YYYY-MM-DD
+      section Section
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a semicolon in a section is true", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section ;Section With a Semicolon
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a semicolon in the task data", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section Section
+      ;A task with a semiclon           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a hashtag in the title", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title #Gantt With a Hashtag in the Title
+      dateFormat  YYYY-MM-DD
+      section Section
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a hashtag in a section is true", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section #Section With a Hashtag
+      A task           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
+
+  it("should render when there's a hashtag in the task data", () => {
+    imgSnapshotTest(
+      `
+      gantt
+      title Gantt Digram
+      dateFormat  YYYY-MM-DD
+      section Section
+      #A task with a hashtag           :a1, 2014-01-01, 30d
+      Another task     :after a1  , 20d
+      section Another
+      Task in sec      :2014-01-12  , 12d
+      another task      : 24d
+    `,
+      {}
+    );
+  });
 });
diff --git a/demos/gantt.html b/demos/gantt.html
index 88f52ef5c..9c82371ab 100644
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -30,6 +30,21 @@
+ 
+      gantt
+        title #; Gantt Diagrams Allow Semicolons and Hashtags #;!
+        accTitle: A simple sample gantt diagram
+        accDescr: 2 sections with 2 tasks each, from 2014
+        dateFormat  YYYY-MM-DD
+        section #;Section
+        #;A task           :a1, 2014-01-01, 30d
+        #;Another task     :after a1  , 20d
+        section #;Another
+        Task in sec      :2014-01-12  , 12d
+        another task      : 24d
+
+
+ 
     gantt
       title Airworks roadmap
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index e7ce1ffa4..ae5f74249 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
@@ -28,8 +28,12 @@ describe('when parsing a gantt diagram it', function () {
   });
   it('should handle a title definition', function () {
     const str = 'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid';
+    const semi = 'gantt\ndateFormat yyyy-mm-dd\ntitle ;Gantt diagram titles support semicolons';
+    const hash = 'gantt\ndateFormat yyyy-mm-dd\ntitle #Gantt diagram titles support hashtags';
 
     expect(parserFnConstructor(str)).not.toThrow();
+    expect(parserFnConstructor(semi)).not.toThrow();
+    expect(parserFnConstructor(hash)).not.toThrow();
   });
   it('should handle an excludes definition', function () {
     const str =
@@ -53,7 +57,23 @@ describe('when parsing a gantt diagram it', function () {
       'excludes weekdays 2019-02-01\n' +
       'section Documentation';
 
+    const semi =
+      'gantt\n' +
+      'dateFormat yyyy-mm-dd\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'excludes weekdays 2019-02-01\n' +
+      'section ;Documentation';
+
+    const hash =
+      'gantt\n' +
+      'dateFormat yyyy-mm-dd\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'excludes weekdays 2019-02-01\n' +
+      'section #Documentation';
+
     expect(parserFnConstructor(str)).not.toThrow();
+    expect(parserFnConstructor(semi)).not.toThrow();
+    expect(parserFnConstructor(hash)).not.toThrow();
   });
   it('should handle multiline section titles with different line breaks', function () {
     const str =
@@ -73,7 +93,23 @@ describe('when parsing a gantt diagram it', function () {
       'section Documentation\n' +
       'Design jison grammar:des1, 2014-01-01, 2014-01-04';
 
+    const semi =
+      'gantt\n' +
+      'dateFormat YYYY-MM-DD\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'section Documentation\n' +
+      ';Design jison grammar:des1, 2014-01-01, 2014-01-04';
+
+    const hash =
+      'gantt\n' +
+      'dateFormat YYYY-MM-DD\n' +
+      'title Adding gantt diagram functionality to mermaid\n' +
+      'section Documentation\n' +
+      '#Design jison grammar:des1, 2014-01-01, 2014-01-04';
+
     expect(parserFnConstructor(str)).not.toThrow();
+    expect(parserFnConstructor(semi)).not.toThrow();
+    expect(parserFnConstructor(hash)).not.toThrow();
 
     const tasks = parser.yy.getTasks();
 

From 8619a53a9cab35fd552d1663d33e327c70b28889 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 26 Jan 2024 22:48:12 +0530
Subject: [PATCH 38/40] Update demos/pie.html

---
 demos/pie.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demos/pie.html b/demos/pie.html
index 76b8fdf0f..823f61716 100644
--- a/demos/pie.html
+++ b/demos/pie.html
@@ -27,7 +27,7 @@
     
       %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
       pie
-        title Offset labels close to border: Produxt X
+        title Offset labels close to border: Product X
         accTitle: Key elements in Product X
         accDescr: This is a pie chart showing the key elements in Product X.
         "Calcium": 42.96

From 6bf5571f962f07404adeb09d0bf68887e32b80ca Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Fri, 26 Jan 2024 22:50:17 +0530
Subject: [PATCH 39/40] chore: Update docs

---
 docs/syntax/timeline.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index 610ad98c7..3e984eac6 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -163,11 +163,11 @@ timeline
 timeline
         title MermaidChart 2023 Timeline
         section 2023 Q1 
 Release Personal Tier
-          Buttet 1 : sub-point 1a : sub-point 1b
+          Bullet 1 : sub-point 1a : sub-point 1b
                : sub-point 1c
           Bullet 2 : sub-point 2a : sub-point 2b
         section 2023 Q2 
 Release XYZ Tier
-          Buttet 3 : sub-point 
 3a : sub-point 3b
+          Bullet 3 : sub-point 
 3a : sub-point 3b
                : sub-point 3c
           Bullet 4 : sub-point 4a : sub-point 4b
 ```
@@ -176,11 +176,11 @@ timeline
 timeline
         title MermaidChart 2023 Timeline
         section 2023 Q1 
 Release Personal Tier
-          Buttet 1 : sub-point 1a : sub-point 1b
+          Bullet 1 : sub-point 1a : sub-point 1b
                : sub-point 1c
           Bullet 2 : sub-point 2a : sub-point 2b
         section 2023 Q2 
 Release XYZ Tier
-          Buttet 3 : sub-point 
 3a : sub-point 3b
+          Bullet 3 : sub-point 
 3a : sub-point 3b
                : sub-point 3c
           Bullet 4 : sub-point 4a : sub-point 4b
 ```

From c84c7f52f9c5d49c0b1960b4b207295ef96c24bc Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Mon, 29 Jan 2024 16:46:48 +0530
Subject: [PATCH 40/40] Remove node version from matrix

---
 .github/workflows/build.yml | 10 +++++-----
 .github/workflows/e2e.yml   |  6 +++---
 .github/workflows/lint.yml  | 10 +++++-----
 .github/workflows/test.yml  | 10 +++++-----
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 605dea9ab..8901ec345 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -12,23 +12,23 @@ on:
 permissions:
   contents: read
 
+env:
+  node-version: 18.x
+
 jobs:
   build-mermaid:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
     steps:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ env.node-version }}
 
       - name: Install Packages
         run: |
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index b8232b8c0..cdd2e27a2 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -17,6 +17,7 @@ permissions:
   contents: read
 
 env:
+  node-version: 18.x
   # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
   targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || (github.event.before == '0000000000000000000000000000000000000000' && 'develop' || github.event.before)  }}
 
@@ -60,7 +61,6 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [18.x]
         containers: [1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v4
@@ -68,10 +68,10 @@ jobs:
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ env.node-version }}
 
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index f0c5560a1..babae3fda 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -13,23 +13,23 @@ on:
 permissions:
   contents: write
 
+env:
+  node-version: 18.x
+
 jobs:
   lint:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
     steps:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ env.node-version }}
 
       - name: Install Packages
         run: |
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index a18b31c9c..5ca235b0d 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -5,23 +5,23 @@ on: [push, pull_request, merge_group]
 permissions:
   contents: read
 
+env:
+  node-version: 18.x
+
 jobs:
   unit-test:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
     steps:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
-      - name: Setup Node.js ${{ matrix.node-version }}
+      - name: Setup Node.js ${{ env.node-version }}
         uses: actions/setup-node@v4
         with:
           cache: pnpm
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ env.node-version }}
 
       - name: Install Packages
         run: |