From 0239e49d92bf65f5d5e2da4f47eb9d6554b5bcdb Mon Sep 17 00:00:00 2001
From: 0xflotus <0xflotus@gmail.com>
Date: Mon, 2 Oct 2023 11:16:51 +0200
Subject: [PATCH 01/20] docs: fixed typo

---
 packages/mermaid/src/docs/syntax/flowchart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index d06e75c22..9327bc4ac 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -293,7 +293,7 @@ flowchart TB
     A & B--> C & D
 ```
 
-If you describe the same diagram using the the basic syntax, it will take four lines. A
+If you describe the same diagram using the basic syntax, it will take four lines. A
 word of warning, one could go overboard with this making the flowchart harder to read in
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.

From 4559ba625c8041e149da0215fcb5dc0bf97330d9 Mon Sep 17 00:00:00 2001
From: Jakub Mikulas <jakub.mikulas@code-intelligence.com>
Date: Tue, 3 Oct 2023 15:34:31 +0200
Subject: [PATCH 02/20] docs(integrations): add Mermaid for Slack

---
 docs/ecosystem/integrations-community.md                      | 2 ++
 packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index 2c67cc361..db1649ff6 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -99,6 +99,8 @@ Communication tools and platforms
   - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [NodeBB](https://nodebb.org)
   - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
+- [Slack](https://slack.com)
+  - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
 
 ### Wikis
 
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index 3a3a20de8..556f64430 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -97,6 +97,8 @@ Communication tools and platforms
   - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [NodeBB](https://nodebb.org)
   - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
+- [Slack](https://slack.com)
+  - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
 
 ### Wikis
 

From 1fec55d5f7939ed6bc89c2d08dc15cf0015869cf Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Mon, 9 Oct 2023 11:25:09 +0800
Subject: [PATCH 03/20] feat(gantt): update styles

---
 packages/mermaid/src/diagrams/gantt/styles.js | 41 ++++++++-----------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 8193130bb..626ed4e0f 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -1,9 +1,9 @@
 const getStyles = (options) =>
   `
   .mermaid-main-font {
-    font-family: "trebuchet ms", verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
   }
+
   .exclude-range {
     fill: ${options.excludeBkgColor};
   }
@@ -45,11 +45,7 @@ const getStyles = (options) =>
 
   .sectionTitle {
     text-anchor: start;
-    // font-size: ${options.ganttFontSize};
-    // text-height: 14px;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
-
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
   }
 
 
@@ -59,10 +55,11 @@ const getStyles = (options) =>
     stroke: ${options.gridColor};
     opacity: 0.8;
     shape-rendering: crispEdges;
-    text {
-      font-family: ${options.fontFamily};
-      fill: ${options.textColor};
-    }
+  }
+
+  .grid .tick text {
+    font-family: ${options.fontFamily};
+    fill: ${options.textColor};
   }
 
   .grid path {
@@ -89,33 +86,27 @@ const getStyles = (options) =>
 
   .taskText {
     text-anchor: middle;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
   }
 
-  // .taskText:not([font-size]) {
-  //   font-size: ${options.ganttFontSize};
-  // }
-
   .taskTextOutsideRight {
     fill: ${options.taskTextDarkColor};
     text-anchor: start;
-    // font-size: ${options.ganttFontSize};
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
-
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
   }
 
   .taskTextOutsideLeft {
     fill: ${options.taskTextDarkColor};
     text-anchor: end;
-    // font-size: ${options.ganttFontSize};
   }
 
+
   /* Special case clickable */
+
   .task.clickable {
     cursor: pointer;
   }
+
   .taskText.clickable {
     cursor: pointer;
     fill: ${options.taskTextClickableColor} !important;
@@ -134,6 +125,7 @@ const getStyles = (options) =>
     font-weight: bold;
   }
 
+
   /* Specific task settings for the sections*/
 
   .taskText0,
@@ -255,9 +247,8 @@ const getStyles = (options) =>
   .titleText {
     text-anchor: middle;
     font-size: 18px;
-    fill: ${options.textColor}    ;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    fill: ${options.titleColor || options.textColor};
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
   }
 `;
 

From 2a9eb7f1238819d92ba3bd336a1916cbabc819b4 Mon Sep 17 00:00:00 2001
From: Harshit Anand <harshitanand283@gmail.com>
Date: Mon, 9 Oct 2023 21:13:53 +0530
Subject: [PATCH 04/20] fix: target blank removed from anchor tag

---
 packages/mermaid/src/diagrams/common/common.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index e0ca2929d..25c6250a9 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -28,6 +28,21 @@ export const removeScript = (txt: string): string => {
   return DOMPurify.sanitize(txt);
 };
 
+DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+  // set all elements owning target to target=_blank
+  if ('target' in node) {
+    node.setAttribute('target', '_blank');
+    node.setAttribute('rel', 'noopener noreferrer');
+  }
+  // set non-HTML/MathML links to xlink:show=new
+  if (
+    !node.hasAttribute('target') &&
+    (node.hasAttribute('xlink:href') || node.hasAttribute('href'))
+  ) {
+    node.setAttribute('xlink:show', 'new');
+  }
+});
+
 const sanitizeMore = (text: string, config: MermaidConfig) => {
   if (config.flowchart?.htmlLabels !== false) {
     const level = config.securityLevel;

From c279a9f9ed10ca7f0da62f2287363d69d92aa012 Mon Sep 17 00:00:00 2001
From: Harshit Anand <harshitanand283@gmail.com>
Date: Tue, 10 Oct 2023 01:05:55 +0530
Subject: [PATCH 05/20] fix: clean link unit test resolved

---
 packages/mermaid/src/diagrams/common/common.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 25c6250a9..e9d5ca42d 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -30,7 +30,7 @@ export const removeScript = (txt: string): string => {
 
 DOMPurify.addHook('afterSanitizeAttributes', function (node) {
   // set all elements owning target to target=_blank
-  if ('target' in node) {
+  if (node.tagName === 'A' && node.hasAttribute('href') && 'target' in node) {
     node.setAttribute('target', '_blank');
     node.setAttribute('rel', 'noopener noreferrer');
   }

From 345e82abeedb28b56884cc024af808911d7e49de Mon Sep 17 00:00:00 2001
From: Harshit Anand <harshitanand283@gmail.com>
Date: Sat, 14 Oct 2023 00:50:09 +0530
Subject: [PATCH 06/20] fix: removed static target=_blank instaed value will
 fetched from the target attribute

---
 .../mermaid/src/diagrams/common/common.ts     | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index e9d5ca42d..84db82843 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -28,18 +28,21 @@ export const removeScript = (txt: string): string => {
   return DOMPurify.sanitize(txt);
 };
 
-DOMPurify.addHook('afterSanitizeAttributes', function (node) {
-  // set all elements owning target to target=_blank
-  if (node.tagName === 'A' && node.hasAttribute('href') && 'target' in node) {
-    node.setAttribute('target', '_blank');
-    node.setAttribute('rel', 'noopener noreferrer');
+const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
+
+DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
+  if (node.tagName === 'A' && node.hasAttribute('target')) {
+    node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
   }
-  // set non-HTML/MathML links to xlink:show=new
-  if (
-    !node.hasAttribute('target') &&
-    (node.hasAttribute('xlink:href') || node.hasAttribute('href'))
-  ) {
-    node.setAttribute('xlink:show', 'new');
+});
+
+DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+  if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+    node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
+    node.removeAttribute(TEMPORARY_ATTRIBUTE);
+    if (node.getAttribute('target') === '_blank') {
+      node.setAttribute('rel', 'noopener');
+    }
   }
 });
 

From d97e31a38cc8522c9a5efac2af7403c986938133 Mon Sep 17 00:00:00 2001
From: Susheel Thapa <83917129+SusheelThapa@users.noreply.github.com>
Date: Mon, 16 Oct 2023 16:54:36 +0545
Subject: [PATCH 07/20] Chore: Typo fixed in multiple files

---
 docs/config/accessibility.md | 8 ++++----
 docs/syntax/c4.md            | 4 ++--
 docs/syntax/flowchart.md     | 6 +++---
 docs/syntax/quadrantChart.md | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/config/accessibility.md b/docs/config/accessibility.md
index bf8b3e591..836d6bcb2 100644
--- a/docs/config/accessibility.md
+++ b/docs/config/accessibility.md
@@ -97,7 +97,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
   graph LR
       accTitle: Big Decisions
       accDescr: Bob's Burgers process for making big decisions
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
@@ -105,7 +105,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
   graph LR
       accTitle: Big Decisions
       accDescr: Bob's Burgers process for making big decisions
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
@@ -137,7 +137,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
         for making very, very big decisions.
         This is actually a very simple flow: identify the big decision and then make the big decision.
          }
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
@@ -149,7 +149,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
         for making very, very big decisions.
         This is actually a very simple flow: identify the big decision and then make the big decision.
          }
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md
index 1676708f5..e6b7736c3 100644
--- a/docs/syntax/c4.md
+++ b/docs/syntax/c4.md
@@ -399,7 +399,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     title Component diagram for Internet Banking System - API Application
 
     Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
     ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
     System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 
@@ -439,7 +439,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     title Component diagram for Internet Banking System - API Application
 
     Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
     ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
     System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index acd7c2db5..1bdce6aa6 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -764,7 +764,7 @@ flowchart LR
     end
     %% ^ These subgraphs are identical, except for the links to them:
 
-    %% Link *to* subgraph1: subgraph1 direction is mantained
+    %% Link *to* subgraph1: subgraph1 direction is maintained
     outside --> subgraph1
     %% Link *within* subgraph2:
     %% subgraph2 inherits the direction of the top-level graph (LR)
@@ -783,7 +783,7 @@ flowchart LR
     end
     %% ^ These subgraphs are identical, except for the links to them:
 
-    %% Link *to* subgraph1: subgraph1 direction is mantained
+    %% Link *to* subgraph1: subgraph1 direction is maintained
     outside --> subgraph1
     %% Link *within* subgraph2:
     %% subgraph2 inherits the direction of the top-level graph (LR)
@@ -1112,7 +1112,7 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid is compatible with Font Awesome up to verion 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 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).
 
 ## Graph declarations with spaces between vertices and link and without semicolon
 
diff --git a/docs/syntax/quadrantChart.md b/docs/syntax/quadrantChart.md
index 39b57fd13..97bc94e36 100644
--- a/docs/syntax/quadrantChart.md
+++ b/docs/syntax/quadrantChart.md
@@ -115,7 +115,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
 | quadrantExternalBorderStrokeWidth | Quadrant external border stroke width                                                             |       2       |
 | xAxisLabelPadding                 | Top and bottom padding of x-axis text                                                             |       5       |
 | xAxisLabelFontSize                | X-axis texts font size                                                                            |      16       |
-| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom |     'top'     |
+| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom |     'top'     |
 | yAxisLabelPadding                 | Left and Right padding of y-axis text                                                             |       5       |
 | yAxisLabelFontSize                | Y-axis texts font size                                                                            |      16       |
 | yAxisPosition                     | Position of y-axis (left , right)                                                                 |    'left'     |

From f31cddee0c76a7f16a22df7a66dc8d7d5926bbde Mon Sep 17 00:00:00 2001
From: Sahil Nagpure <76729141+SahilNagpure07@users.noreply.github.com>
Date: Sun, 22 Oct 2023 12:27:55 +0530
Subject: [PATCH 08/20] Update classDiagram.md

Fixed typo.
---
 packages/mermaid/src/docs/syntax/classDiagram.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index 4b0cd49de..f02ae67be 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -281,8 +281,6 @@ And `Link` can be one of:
 
 A namespace groups classes.
 
-Code:
-
 ```mermaid-example
 classDiagram
 namespace BaseShapes {

From 111e067df50e8a6d38a25b16448c6656faf98dae Mon Sep 17 00:00:00 2001
From: Harshit Anand <harshitanand283@gmail.com>
Date: Mon, 23 Oct 2023 12:03:57 +0530
Subject: [PATCH 09/20] fix: added type Element to the node used in callback in
 the addhook function

---
 .../mermaid/src/diagrams/common/common.ts     | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 84db82843..28f243845 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -30,21 +30,21 @@ export const removeScript = (txt: string): string => {
 
 const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
 
-DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
-  if (node.tagName === 'A' && node.hasAttribute('target')) {
-    node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
-  }
-});
+// DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
+//   if (node.tagName === 'A' && node.hasAttribute('target')) {
+//     node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
+//   }
+// });
 
-DOMPurify.addHook('afterSanitizeAttributes', function (node) {
-  if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-    node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
-    node.removeAttribute(TEMPORARY_ATTRIBUTE);
-    if (node.getAttribute('target') === '_blank') {
-      node.setAttribute('rel', 'noopener');
-    }
-  }
-});
+// DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
+//   if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+//     node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
+//     node.removeAttribute(TEMPORARY_ATTRIBUTE);
+//     if (node.getAttribute('target') === '_blank') {
+//       node.setAttribute('rel', 'noopener');
+//     }
+//   }
+// });
 
 const sanitizeMore = (text: string, config: MermaidConfig) => {
   if (config.flowchart?.htmlLabels !== false) {

From 3b8c48dd26bfa16172f3c2c5410bdbaf0b71647f Mon Sep 17 00:00:00 2001
From: Harshit Anand <harshitanand283@gmail.com>
Date: Mon, 23 Oct 2023 12:23:08 +0530
Subject: [PATCH 10/20] fix: added type Element to the node used in callback in
 the dompurify.addhook

---
 packages/mermaid/src/diagrams/common/common.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 84db82843..744c34252 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -30,13 +30,13 @@ export const removeScript = (txt: string): string => {
 
 const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
 
-DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
+DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
   if (node.tagName === 'A' && node.hasAttribute('target')) {
     node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
   }
 });
 
-DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
   if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
     node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
     node.removeAttribute(TEMPORARY_ATTRIBUTE);

From 7960f94eba2112e3ce54443cce5301991a63f178 Mon Sep 17 00:00:00 2001
From: Harshit Anand <harshitanand283@gmail.com>
Date: Mon, 23 Oct 2023 16:09:51 +0530
Subject: [PATCH 11/20] fix: shifted dompurify.addhook functions inside
 removescript

---
 .../mermaid/src/diagrams/common/common.ts     | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 744c34252..caf43bc68 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -25,26 +25,28 @@ export const getRows = (s?: string): string[] => {
  * @returns The safer text
  */
 export const removeScript = (txt: string): string => {
-  return DOMPurify.sanitize(txt);
-};
+  const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
 
-const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
-
-DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
-  if (node.tagName === 'A' && node.hasAttribute('target')) {
-    node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
-  }
-});
-
-DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
-  if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-    node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
-    node.removeAttribute(TEMPORARY_ATTRIBUTE);
-    if (node.getAttribute('target') === '_blank') {
-      node.setAttribute('rel', 'noopener');
+  DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
+    if (node.tagName === 'A' && node.hasAttribute('target')) {
+      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
     }
-  }
-});
+  });
+
+  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) || '');
+      node.removeAttribute(TEMPORARY_ATTRIBUTE);
+      if (node.getAttribute('target') === '_blank') {
+        node.setAttribute('rel', 'noopener');
+      }
+    }
+  });
+
+  return sanitizedText;
+};
 
 const sanitizeMore = (text: string, config: MermaidConfig) => {
   if (config.flowchart?.htmlLabels !== false) {

From 06d2ba8398ec79598a7d6333c1527402c0e7a5de Mon Sep 17 00:00:00 2001
From: Harshit Anand <harshitanand283@gmail.com>
Date: Wed, 25 Oct 2023 21:17:53 +0530
Subject: [PATCH 12/20] fix: added two unit tests to check for the secured
 anchor tag

---
 .../mermaid/src/diagrams/common/common.spec.ts     | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/mermaid/src/diagrams/common/common.spec.ts b/packages/mermaid/src/diagrams/common/common.spec.ts
index 4dac5b33c..9af244406 100644
--- a/packages/mermaid/src/diagrams/common/common.spec.ts
+++ b/packages/mermaid/src/diagrams/common/common.spec.ts
@@ -38,6 +38,20 @@ describe('when securityLevel is antiscript, all script must be removed', () => {
     compareRemoveScript(`<img onerror="alert('hello');">`, `<img>`);
   });
 
+  it('should detect unsecured target attribute, if value is _blank then generate a secured link', () => {
+    compareRemoveScript(
+      `<a href="https://mermaid.js.org/" target="_blank">note about mermaid</a>`,
+      `<a href="https://mermaid.js.org/" target="_blank" rel="noopener">note about mermaid</a>`
+    );
+  });
+
+  it('should detect unsecured target attribute from links', () => {
+    compareRemoveScript(
+      `<a href="https://mermaid.js.org/" target="_self">note about mermaid</a>`,
+      `<a href="https://mermaid.js.org/" target="_self">note about mermaid</a>`
+    );
+  });
+
   it('should detect iframes', () => {
     compareRemoveScript(
       `<iframe src="http://abc.com/script1.js"></iframe>

From 54ab3fc3b2dc7f4be13c6f18592ec61662f9c171 Mon Sep 17 00:00:00 2001
From: Harshit Anand <harshitanand283@gmail.com>
Date: Thu, 26 Oct 2023 14:55:04 +0530
Subject: [PATCH 13/20] fix: added an e2e test case for classdiagram with
 anchor tag

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

diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index a23430b08..cab3649df 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -501,4 +501,16 @@ describe('Class diagram', () => {
         B : -methods()
       `);
   });
+
+  it('should handle notes with anchor tag having target attribute', () => {
+    renderGraph(
+      `classDiagram
+        class test { }
+        note for test "<a href='https://mermaid.js.org/' target="_blank"><code>note about mermaid</code></a>"`
+    );
+
+    cy.get('svg').then((svg) => {
+      cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
+    });
+  });
 });

From 8f2a5064cb66b304eb36254b89b0ddd6ae4ba271 Mon Sep 17 00:00:00 2001
From: Sebastian Holmqvist <1297882+csholmq@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:01:43 +0200
Subject: [PATCH 14/20] fix(tooltip): remove redundant scroll offset

window.scrollY is already account for which means document.body.scrollTop incorrectly offsets the tooltip vertically.
The same is not true for horizontal position.
---
 packages/mermaid/src/diagrams/flowchart/flowDb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 9a9394e54..501479239 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -425,7 +425,7 @@ const setupToolTips = function (element) {
       tooltipElem
         .text(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
-        .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
+        .style('top', window.scrollY + rect.top - 14 + 'px');
       tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
       el.classed('hover', true);
     })

From a3ee21d7fc16c47315d2fa071344eaa6be2f1223 Mon Sep 17 00:00:00 2001
From: Sebastian Holmqvist <1297882+csholmq@users.noreply.github.com>
Date: Fri, 20 Oct 2023 08:39:42 +0200
Subject: [PATCH 15/20] fix(tooltip): change position of tooltip to not cover
 node

Position the tooltip centered, just below the node being hovered.

Update packages/mermaid/src/diagrams/flowchart/flowDb.js

Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>
---
 packages/mermaid/src/diagrams/flowchart/flowDb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 501479239..f224c9bac 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -425,7 +425,7 @@ const setupToolTips = function (element) {
       tooltipElem
         .text(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
-        .style('top', window.scrollY + rect.top - 14 + 'px');
+        .style('top', window.scrollY + rect.bottom  + 'px');
       tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
       el.classed('hover', true);
     })

From 4ba3e2cff3fba0763d35429a345f1cffbbdb4bd3 Mon Sep 17 00:00:00 2001
From: StefonSimmons <57869435+StefonSimmons@users.noreply.github.com>
Date: Fri, 3 Nov 2023 15:51:33 -0400
Subject: [PATCH 16/20] Update index.md

fix typo
---
 packages/mermaid/src/docs/intro/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index bd45ffaf1..535ee3a3d 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -97,7 +97,7 @@ To Deploy Mermaid:
 </script>
 ```
 
-**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
 
 **Examples can be found in** [Other examples](../syntax/examples.md)
 

From c9ace33cf15a984a139176a3e2419b1c354d1923 Mon Sep 17 00:00:00 2001
From: dev1 <dev1@gmail.com>
Date: Wed, 8 Nov 2023 14:39:06 +0700
Subject: [PATCH 17/20] Add new Atlassian integrations

---
 .../mermaid/src/docs/ecosystem/integrations-community.md    | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index da53f363f..92491519b 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -40,6 +40,12 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
 - [LiveBook](https://livebook.dev) ✅
 - [Atlassian Products](https://www.atlassian.com)
+  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview) 
+  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
+  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
   - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
   - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
   - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)

From adfb60e045edf50ca04073b9da20e0effc9ccf52 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 9 Nov 2023 14:03:38 +0530
Subject: [PATCH 18/20] fix typo

---
 docs/ecosystem/integrations-community.md | 6 ++++++
 docs/intro/index.md                      | 2 +-
 docs/syntax/classDiagram.md              | 2 --
 packages/mermaid/src/docs/syntax/c4.md   | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index a14d615b2..e979544cf 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -42,6 +42,12 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
 - [LiveBook](https://livebook.dev) ✅
 - [Atlassian Products](https://www.atlassian.com)
+  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
+  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
   - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
   - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
   - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
diff --git a/docs/intro/index.md b/docs/intro/index.md
index 808465ff1..5a77fa587 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -340,7 +340,7 @@ To Deploy Mermaid:
 </script>
 ```
 
-**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
 
 **Examples can be found in** [Other examples](../syntax/examples.md)
 
diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index a6109149a..2f2c3da88 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -425,8 +425,6 @@ And `Link` can be one of:
 
 A namespace groups classes.
 
-Code:
-
 ```mermaid-example
 classDiagram
 namespace BaseShapes {
diff --git a/packages/mermaid/src/docs/syntax/c4.md b/packages/mermaid/src/docs/syntax/c4.md
index be13323ea..b6ee5fb79 100644
--- a/packages/mermaid/src/docs/syntax/c4.md
+++ b/packages/mermaid/src/docs/syntax/c4.md
@@ -257,7 +257,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     title Component diagram for Internet Banking System - API Application
 
     Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
     ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
     System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 

From 72038a68a9ed300a14fbb5fee8d91c938abb54b9 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 9 Nov 2023 14:06:58 +0530
Subject: [PATCH 19/20] Fix typo

---
 docs/syntax/flowchart.md                                      | 2 +-
 packages/mermaid/src/docs/ecosystem/integrations-community.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 1bdce6aa6..d9ddf0cbe 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -467,7 +467,7 @@ flowchart TB
     A & B--> C & D
 ```
 
-If you describe the same diagram using the the basic syntax, it will take four lines. A
+If you describe the same diagram using the basic syntax, it will take four lines. A
 word of warning, one could go overboard with this making the flowchart harder to read in
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
index 6a27f102f..f6ffd908f 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -41,7 +41,7 @@ Below are a list of community plugins and integrations created with Mermaid.
 - [LiveBook](https://livebook.dev) ✅
 - [Atlassian Products](https://www.atlassian.com)
   - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
-  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview) 
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
   - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
   - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)

From 4a92fc5c921e6c0df350705ee46407a090d3daea Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 9 Nov 2023 14:20:06 +0530
Subject: [PATCH 20/20] Fix lint

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

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index f224c9bac..da67248f1 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -425,7 +425,7 @@ const setupToolTips = function (element) {
       tooltipElem
         .text(el.attr('title'))
         .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
-        .style('top', window.scrollY + rect.bottom  + 'px');
+        .style('top', window.scrollY + rect.bottom + 'px');
       tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
       el.classed('hover', true);
     })