From 2a9e56439ea07419d59ffe3fe9e7a57921bb063d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 4 Oct 2022 16:37:37 +0800
Subject: [PATCH 01/11] fix(tests): Interaction test - Security loose.

---
 cypress/integration/other/interaction.spec.js | 206 ++++++------------
 cypress/platform/click_security_loose.html    |  26 +--
 2 files changed, 77 insertions(+), 155 deletions(-)

diff --git a/cypress/integration/other/interaction.spec.js b/cypress/integration/other/interaction.spec.js
index b253d0389b..76c63c4ad3 100644
--- a/cypress/integration/other/interaction.spec.js
+++ b/cypress/integration/other/interaction.spec.js
@@ -1,266 +1,188 @@
 describe('Interaction', () => {
-  describe('Interaction - security level loose', () => {
-    it('Graph: should handle a click on a node with a bound function', () => {
+  describe('Security level loose', () => {
+    beforeEach(() => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-4').click();
+    });
 
+    it('Graph: should handle a click on a node with a bound function', () => {
+      cy.contains('FunctionTest1').parents('.node').click();
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
-    it('Graph: should handle a click on a node with a bound function with args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-FunctionArg-28').click();
 
+    it('Graph: should handle a click on a node with a bound function with args', () => {
+      cy.contains('FunctionArgTest2').parents('.node').click();
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
-    it('Flowchart: should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click();
 
+    it('Flowchart: should handle a click on a node with a bound function where the node starts with a number', () => {
+      cy.contains('2FunctionArg').parents('.node').click();
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
-    it('Graph: should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('#flowchart-URL-5').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Graph: should handle a click on a node with a bound url', () => {
+      // When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
+      cy.contains('URLTest1').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
-    it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
+      cy.contains('2URL').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('Flowchart-v2: should handle a click on a node with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-16').click();
-
+      cy.contains('FunctionTest2').parents('.node').click();
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
-    it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-22"]').click();
 
+    it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
+      cy.contains('10Function').parents('.node').click();
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
-    it('Flowchart-v2: should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('#flowchart-URL-17').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Flowchart-v2: should handle a click on a node with a bound url', () => {
+      cy.contains('URLTest2').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
-    it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-23"]').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
+      // cy.contains('').click();
+      cy.contains('20URL').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the rect', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('rect#cl1').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
+
     it('should handle a click on a task with a bound URL clicking on the text', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('text#cl1-text').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
+
     it('should handle a click on a task with a bound function without args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('rect#cl2').click({ force: true });
-
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
+
     it('should handle a click on a task with a bound function with args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('rect#cl3').click({ force: true });
-
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
     });
 
     it('should handle a click on a task with a bound function without args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('text#cl2-text').click({ force: true });
-
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
+
     it('should handle a click on a task with a bound function with args ', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('text#cl3-text').click({ force: true });
-
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
     });
   });
 
   describe('Interaction - security level tight', () => {
-    it('should handle a click on a node without a bound function', () => {
+    beforeEach(() => {
       const url = 'http://localhost:9000/click_security_strict.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
+    });
+    it('should handle a click on a node without a bound function', () => {
       cy.get('body').find('g#flowchart-Function-4').click();
-
       cy.get('.created-by-click').should('not.exist');
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
     });
+
     it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('g[id="flowchart-1Function-10"]').click();
-
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
       cy.get('.created-by-click').should('not.exist');
     });
+
     it('should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('g#flowchart-URL-5').click();
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
+
     it('should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('g[id="flowchart-2URL-11"]').click();
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the rect', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('rect#cl1').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
+
     it('should handle a click on a task with a bound URL clicking on the text', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('text#cl1-text').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
+
     it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('rect#cl2').click({ force: true });
-
-      // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
       cy.get('.created-by-gant-click').should('not.exist');
     });
+
     it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('text#cl2-text').click({ force: true });
-
-      // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
       cy.get('.created-by-gant-click').should('not.exist');
     });
   });
 
   describe('Interaction - security level other, missspelling', () => {
-    it('should handle a click on a node with a bound function', () => {
+    beforeEach(() => {
       const url = 'http://localhost:9000/click_security_other.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-4').click();
+    });
 
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
+    it('should handle a click on a node with a bound function', () => {
+      cy.get('body').find('g#flowchart-Function-4').click();
       cy.get('.created-by-click').should('not.exist');
     });
+
     it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('g[id="flowchart-1Function-10"]').click();
-
       cy.get('.created-by-click').should('not.exist');
       cy.get('.created-by-click').should('not.exist');
     });
+
     it('should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('g#flowchart-URL-5').click();
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('rect#cl2').click({ force: true });
-
       cy.get('.created-by-gant-click').should('not.exist');
     });
+
     it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('text#cl2-text').click({ force: true });
-
       cy.get('.created-by-gant-click').should('not.exist');
     });
   });
diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html
index 6c77e90af0..ed9fcaaa80 100644
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@@ -15,9 +15,9 @@
     <div style="display: flex">
       <pre id="FirstLine" class="mermaid">
     graph TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      FunctionTest1-->URLTest1
+      click FunctionTest1 clickByFlow "Add a div"
+      click URLTest1 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre id="FirstLine" class="mermaid">
   graph TB
@@ -27,15 +27,15 @@
       </pre>
       <pre id="FirstLine" class="mermaid">
     flowchart TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+      FunctionTest2-->URLTest2
+      click FunctionTest2 clickByFlow "Add a div"
+      click URLTest2 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
       <pre id="FirstLine" class="mermaid">
   flowchart TB
-    1Function--->2URL
-    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+    10Function--->20URL
+    click 10Function clickByFlow "Add a div"
+    click 20URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
 
       <pre id="FirstLine" class="mermaid">
@@ -97,14 +97,14 @@
     <div style="display: flex">
       <pre id="FirstLine" class="mermaid">
       graph TB
-        FunctionArg-->URL
-        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
+        FunctionArgTest2-->URL
+        click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre id="FirstLine" class="mermaid">
       flowchart TB
-        FunctionArg-->URL
-        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
+        2FunctionArg-->URL
+        click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>
 

From 750f647b0d535826ebadd1e216a035c1e112e97e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 4 Oct 2022 16:55:46 +0800
Subject: [PATCH 02/11] fix(tests): Interaction - Security strict, other

---
 cypress/integration/other/interaction.spec.js | 15 +++++++--------
 cypress/platform/click_security_other.html    |  6 +++---
 cypress/platform/click_security_strict.html   |  6 +++---
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/cypress/integration/other/interaction.spec.js b/cypress/integration/other/interaction.spec.js
index 76c63c4ad3..f4f80f82a9 100644
--- a/cypress/integration/other/interaction.spec.js
+++ b/cypress/integration/other/interaction.spec.js
@@ -103,24 +103,24 @@ describe('Interaction', () => {
       cy.visit(url);
     });
     it('should handle a click on a node without a bound function', () => {
-      cy.get('body').find('g#flowchart-Function-4').click();
+      cy.contains('Function1').parents('.node').click();
       cy.get('.created-by-click').should('not.exist');
     });
 
     it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      cy.get('body').find('g[id="flowchart-1Function-10"]').click();
+      cy.contains('1Function').parents('.node').click();
       cy.get('.created-by-click').should('not.exist');
     });
 
     it('should handle a click on a node with a bound url', () => {
-      cy.get('body').find('g#flowchart-URL-5').click();
+      cy.contains('URL1').find('.node').click();
       cy.location().should(({ href }) => {
         expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a node with a bound url where the node starts with a number', () => {
-      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
+      cy.contains('2URL').find('.node').click();
       cy.location().should(({ href }) => {
         expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
@@ -159,18 +159,17 @@ describe('Interaction', () => {
     });
 
     it('should handle a click on a node with a bound function', () => {
-      cy.get('body').find('g#flowchart-Function-4').click();
+      cy.contains('Function1').parents('.node').click();
       cy.get('.created-by-click').should('not.exist');
     });
 
     it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      cy.get('body').find('g[id="flowchart-1Function-10"]').click();
-      cy.get('.created-by-click').should('not.exist');
+      cy.contains('1Function').parents('.node').click();
       cy.get('.created-by-click').should('not.exist');
     });
 
     it('should handle a click on a node with a bound url', () => {
-      cy.get('body').find('g#flowchart-URL-5').click();
+      cy.contains('URL1').find('.node').click();
       cy.location().should(({ href }) => {
         expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
diff --git a/cypress/platform/click_security_other.html b/cypress/platform/click_security_other.html
index 20bfd52933..348c8b9aa5 100644
--- a/cypress/platform/click_security_other.html
+++ b/cypress/platform/click_security_other.html
@@ -9,9 +9,9 @@
   <body>
     <pre id="FirstLine" class="mermaid">
     graph TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      Function1-->URL1
+      click Function1 clickByFlow "Add a div"
+      click URL1 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
     </pre>
     <pre id="FirstLine" class="mermaid">
   graph TB
diff --git a/cypress/platform/click_security_strict.html b/cypress/platform/click_security_strict.html
index 00c6d9c6a6..64fb2e9c67 100644
--- a/cypress/platform/click_security_strict.html
+++ b/cypress/platform/click_security_strict.html
@@ -9,9 +9,9 @@
   <body>
     <pre id="FirstLine" class="mermaid">
     graph TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      Function1-->URL1
+      click Function1 clickByFlow "Add a div"
+      click URL1 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
     </pre>
     <pre id="FirstLine" class="mermaid">
   graph TB

From d3a81f025a038cdf5e6565e34514d06ec482fe5a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 4 Oct 2022 16:59:05 +0800
Subject: [PATCH 03/11] chore(tests): Interaction - cleanup

---
 cypress/integration/other/interaction.spec.js | 37 ++++++++-----------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/cypress/integration/other/interaction.spec.js b/cypress/integration/other/interaction.spec.js
index f4f80f82a9..63234d1473 100644
--- a/cypress/integration/other/interaction.spec.js
+++ b/cypress/integration/other/interaction.spec.js
@@ -1,9 +1,7 @@
 describe('Interaction', () => {
   describe('Security level loose', () => {
     beforeEach(() => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
+      cy.visit('http://localhost:9000/click_security_loose.html');
     });
 
     it('Graph: should handle a click on a node with a bound function', () => {
@@ -54,7 +52,6 @@ describe('Interaction', () => {
     });
 
     it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
-      // cy.contains('').click();
       cy.contains('20URL').find('.node').click();
       cy.location().should(({ href }) => {
         expect(href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -62,45 +59,43 @@ describe('Interaction', () => {
     });
 
     it('should handle a click on a task with a bound URL clicking on the rect', () => {
-      cy.get('body').find('rect#cl1').click({ force: true });
+      cy.get('rect#cl1').click({ force: true });
       cy.location().should(({ href }) => {
         expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the text', () => {
-      cy.get('body').find('text#cl1-text').click({ force: true });
+      cy.get('text#cl1-text').click({ force: true });
       cy.location().should(({ href }) => {
         expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a task with a bound function without args', () => {
-      cy.get('body').find('rect#cl2').click({ force: true });
+      cy.get('rect#cl2').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
 
     it('should handle a click on a task with a bound function with args', () => {
-      cy.get('body').find('rect#cl3').click({ force: true });
+      cy.get('rect#cl3').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
     });
 
     it('should handle a click on a task with a bound function without args', () => {
-      cy.get('body').find('text#cl2-text').click({ force: true });
+      cy.get('text#cl2-text').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
 
     it('should handle a click on a task with a bound function with args ', () => {
-      cy.get('body').find('text#cl3-text').click({ force: true });
+      cy.get('text#cl3-text').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
     });
   });
 
   describe('Interaction - security level tight', () => {
     beforeEach(() => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
+      cy.visit('http://localhost:9000/click_security_strict.html');
     });
     it('should handle a click on a node without a bound function', () => {
       cy.contains('Function1').parents('.node').click();
@@ -127,35 +122,33 @@ describe('Interaction', () => {
     });
 
     it('should handle a click on a task with a bound URL clicking on the rect', () => {
-      cy.get('body').find('rect#cl1').click({ force: true });
+      cy.get('rect#cl1').click({ force: true });
       cy.location().should(({ href }) => {
         expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the text', () => {
-      cy.get('body').find('text#cl1-text').click({ force: true });
+      cy.get('text#cl1-text').click({ force: true });
       cy.location().should(({ href }) => {
         expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a task with a bound function', () => {
-      cy.get('body').find('rect#cl2').click({ force: true });
+      cy.get('rect#cl2').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
 
     it('should handle a click on a task with a bound function', () => {
-      cy.get('body').find('text#cl2-text').click({ force: true });
+      cy.get('text#cl2-text').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
   });
 
   describe('Interaction - security level other, missspelling', () => {
     beforeEach(() => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
+      cy.visit('http://localhost:9000/click_security_other.html');
     });
 
     it('should handle a click on a node with a bound function', () => {
@@ -176,12 +169,12 @@ describe('Interaction', () => {
     });
 
     it('should handle a click on a task with a bound function', () => {
-      cy.get('body').find('rect#cl2').click({ force: true });
+      cy.get('rect#cl2').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
 
     it('should handle a click on a task with a bound function', () => {
-      cy.get('body').find('text#cl2-text').click({ force: true });
+      cy.get('text#cl2-text').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
   });

From a017ffc3c947084d2977a12aa75c831574ed19b9 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 5 Oct 2022 14:08:53 +0800
Subject: [PATCH 04/11] fix(test): Rerender

---
 cypress/platform/rerender.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/cypress/platform/rerender.html b/cypress/platform/rerender.html
index 9b6cb130eb..61c6891f76 100644
--- a/cypress/platform/rerender.html
+++ b/cypress/platform/rerender.html
@@ -17,11 +17,12 @@
       rerender('XMas');
 
       function rerender(text) {
-        var graphText = `graph TD
+        const graphText = `graph TD
         A[${text}] -->|Get money| B(Go shopping)`;
-        var graph = mermaid.mermaidAPI.render('id', graphText);
-        console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
-        document.getElementById('graph').innerHTML = graph;
+        mermaid.mermaidAPI.render('id', graphText).then((svg) => {
+          console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
+          document.getElementById('graph').innerHTML = svg;
+        });
       }
     </script>
     <button id="rerender" onclick="rerender('Saturday')">Rerender</button>

From 74bd576ebc02a3c7c6a4d436458464f42d9186ca Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 5 Oct 2022 14:52:04 +0800
Subject: [PATCH 05/11] fix(mermaid): Add await to render in init.

---
 cypress/platform/click_security_loose.html | 20 ++++++++++----------
 packages/mermaid/src/mermaid.ts            |  8 ++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html
index ed9fcaaa80..625d340529 100644
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@@ -13,39 +13,39 @@
   </head>
   <body>
     <div style="display: flex">
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
     graph TB
       FunctionTest1-->URLTest1
       click FunctionTest1 clickByFlow "Add a div"
       click URLTest1 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
   graph TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
     click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
     flowchart TB
       FunctionTest2-->URLTest2
       click FunctionTest2 clickByFlow "Add a div"
       click URLTest2 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
   flowchart TB
     10Function--->20URL
     click 10Function clickByFlow "Add a div"
     click 20URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
 
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
   classDiagram
     class ShapeLink
     link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback
     callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
       </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
   classDiagram-v2
     class ShapeLink2
     link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
@@ -95,20 +95,20 @@
     Add another diagram to demo page    : 48h
     </pre>
     <div style="display: flex">
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
       graph TB
         FunctionArgTest2-->URL
         click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
       flowchart TB
         2FunctionArg-->URL
         click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>
 
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
       classDiagram
       class ShapeLink
       link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
@@ -116,7 +116,7 @@
       click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
       </pre>
 
-      <pre id="FirstLine" class="mermaid">
+      <pre class="mermaid">
       classDiagram-v2
         class ShapeLink2
         link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 6a709dd32c..391af32835 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -45,7 +45,7 @@ import { isDetailedError } from './utils';
  * @param nodes
  * @param callback
  */
-const init = function (
+const init = async function (
   config?: MermaidConfig,
   // eslint-disable-next-line no-undef
   nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
@@ -69,7 +69,7 @@ const init = function (
   }
 };
 
-const initThrowsErrors = function (
+const initThrowsErrors = async function (
   config?: MermaidConfig,
   // eslint-disable-next-line no-undef
   nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
@@ -108,7 +108,7 @@ const initThrowsErrors = function (
   // generate the id of the diagram
   const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
 
-  let txt;
+  let txt: string;
   const errors = [];
 
   // element is the current div with mermaid class
@@ -136,7 +136,7 @@ const initThrowsErrors = function (
       log.debug('Detected early reinit: ', init);
     }
     try {
-      mermaidAPI.render(
+      await mermaidAPI.render(
         id,
         txt,
         (svgCode: string, bindFunctions?: (el: Element) => void) => {

From f9753fc62171e4bf73963e824f0c265962bb3baa Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 5 Oct 2022 16:04:26 +0800
Subject: [PATCH 06/11] chore: Update test URL

---
 cypress/integration/other/interaction.spec.js | 22 +++++++++----------
 cypress/platform/click_security_loose.html    | 22 +++++++++----------
 cypress/platform/click_security_other.html    |  6 ++---
 cypress/platform/click_security_sandbox.html  | 22 +++++++++----------
 cypress/platform/click_security_strict.html   |  6 ++---
 cypress/platform/empty.html                   | 10 +++++++++
 6 files changed, 49 insertions(+), 39 deletions(-)
 create mode 100644 cypress/platform/empty.html

diff --git a/cypress/integration/other/interaction.spec.js b/cypress/integration/other/interaction.spec.js
index 63234d1473..857141b5bf 100644
--- a/cypress/integration/other/interaction.spec.js
+++ b/cypress/integration/other/interaction.spec.js
@@ -23,14 +23,14 @@ describe('Interaction', () => {
       // When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
       cy.contains('URLTest1').find('.node').click();
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
       cy.contains('2URL').find('.node').click();
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
@@ -47,28 +47,28 @@ describe('Interaction', () => {
     it('Flowchart-v2: should handle a click on a node with a bound url', () => {
       cy.contains('URLTest2').find('.node').click();
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
       cy.contains('20URL').find('.node').click();
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the rect', () => {
       cy.get('rect#cl1').click({ force: true });
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the text', () => {
       cy.get('text#cl1-text').click({ force: true });
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
@@ -110,28 +110,28 @@ describe('Interaction', () => {
     it('should handle a click on a node with a bound url', () => {
       cy.contains('URL1').find('.node').click();
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('should handle a click on a node with a bound url where the node starts with a number', () => {
       cy.contains('2URL').find('.node').click();
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the rect', () => {
       cy.get('rect#cl1').click({ force: true });
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the text', () => {
       cy.get('text#cl1-text').click({ force: true });
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
@@ -164,7 +164,7 @@ describe('Interaction', () => {
     it('should handle a click on a node with a bound url', () => {
       cy.contains('URL1').find('.node').click();
       cy.location().should(({ href }) => {
-        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
+        expect(href).to.eq('http://localhost:9000/empty.html');
       });
     });
 
diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html
index 625d340529..459c14e851 100644
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@@ -17,38 +17,38 @@
     graph TB
       FunctionTest1-->URLTest1
       click FunctionTest1 clickByFlow "Add a div"
-      click URLTest1 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URLTest1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre class="mermaid">
   graph TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre class="mermaid">
     flowchart TB
       FunctionTest2-->URLTest2
       click FunctionTest2 clickByFlow "Add a div"
-      click URLTest2 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+      click URLTest2 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
       <pre class="mermaid">
   flowchart TB
     10Function--->20URL
     click 10Function clickByFlow "Add a div"
-    click 20URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+    click 20URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
 
       <pre class="mermaid">
   classDiagram
     class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
     class ShapeCallback
     callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
       </pre>
       <pre class="mermaid">
   classDiagram-v2
     class ShapeLink2
-    link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
     class ShapeCallback2
     callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
       </pre>
@@ -85,7 +85,7 @@
     Calling a Callback (look at the console log) :cl2, after cl1, 3d
     Calling a Callback with args :cl3, after cl1, 3d
 
-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
     click cl2 call clickByGantt()
     click cl3 call clickByGantt("test1", test2, test3)
 
@@ -99,19 +99,19 @@
       graph TB
         FunctionArgTest2-->URL
         click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre class="mermaid">
       flowchart TB
         2FunctionArg-->URL
         click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
 
       <pre class="mermaid">
       classDiagram
       class ShapeLink
-      link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+      link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
       class ShapeCallback
       click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
       </pre>
@@ -119,7 +119,7 @@
       <pre class="mermaid">
       classDiagram-v2
         class ShapeLink2
-        link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+        link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
         class ShapeCallback2
         click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
       </pre>
diff --git a/cypress/platform/click_security_other.html b/cypress/platform/click_security_other.html
index 348c8b9aa5..5338cac067 100644
--- a/cypress/platform/click_security_other.html
+++ b/cypress/platform/click_security_other.html
@@ -11,13 +11,13 @@
     graph TB
       Function1-->URL1
       click Function1 clickByFlow "Add a div"
-      click URL1 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
     </pre>
     <pre id="FirstLine" class="mermaid">
   graph TB
     1Function-->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
     </pre>
 
     <pre class="mermaid">
@@ -50,7 +50,7 @@
     Visit mermaidjs               :active, cl1, 2014-01-07,2014-01-10
     Calling a Callback (look at the console log) :cl2, after cl1, 3d
 
-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
     click cl2 call clickByGantt("test", test, test)
 
     section Last section
diff --git a/cypress/platform/click_security_sandbox.html b/cypress/platform/click_security_sandbox.html
index 94229500c4..49c5d71c06 100644
--- a/cypress/platform/click_security_sandbox.html
+++ b/cypress/platform/click_security_sandbox.html
@@ -17,38 +17,38 @@
     graph TB
       Function-->URL
       click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre id="FirstLine" class="mermaid">
   graph TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre id="FirstLine" class="mermaid">
     flowchart TB
       Function-->URL
       click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+      click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
       <pre id="FirstLine" class="mermaid">
   flowchart TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
 
       <pre id="FirstLine" class="mermaid">
   classDiagram
     class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
     class ShapeCallback
     callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
       </pre>
       <pre id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeLink2
-    link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
     class ShapeCallback2
     callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
       </pre>
@@ -85,7 +85,7 @@
     Calling a Callback (look at the console log) :cl2, after cl1, 3d
     Calling a Callback with args :cl3, after cl1, 3d
 
-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
     click cl2 call clickByGantt()
     click cl3 call clickByGantt("test1", test2, test3)
 
@@ -99,19 +99,19 @@
       graph TB
         FunctionArg-->URL
         click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre id="FirstLine" class="mermaid">
       flowchart TB
         FunctionArg-->URL
         click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+        click URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
       </pre>
 
       <pre id="FirstLine" class="mermaid">
       classDiagram
       class ShapeLink
-      link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+      link ShapeLink "http://localhost:9000/empty.html" "This is a tooltip for a link"
       class ShapeCallback
       click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
       </pre>
@@ -119,7 +119,7 @@
       <pre id="FirstLine" class="mermaid">
       classDiagram-v2
         class ShapeLink2
-        link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+        link ShapeLink2 "http://localhost:9000/empty.html" "This is a tooltip for a link"
         class ShapeCallback2
         click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
       </pre>
diff --git a/cypress/platform/click_security_strict.html b/cypress/platform/click_security_strict.html
index 64fb2e9c67..26605ddf96 100644
--- a/cypress/platform/click_security_strict.html
+++ b/cypress/platform/click_security_strict.html
@@ -11,13 +11,13 @@
     graph TB
       Function1-->URL1
       click Function1 clickByFlow "Add a div"
-      click URL1 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL1 "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
     </pre>
     <pre id="FirstLine" class="mermaid">
   graph TB
     1Function-->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/empty.html" "Visit <strong>mermaid docs</strong>"
     </pre>
 
     <pre class="mermaid">
@@ -51,7 +51,7 @@
     Calling a Callback (look at the console log) :cl2, after cl1, 3d
     Calling a Callback with args :cl3, after cl1, 3d
 
-    click cl1 href "http://localhost:9000/webpackUsage.html"
+    click cl1 href "http://localhost:9000/empty.html"
     click cl2 call clickByGantt()
     click cl3 call clickByGantt("test1", test2, test3)
 
diff --git a/cypress/platform/empty.html b/cypress/platform/empty.html
new file mode 100644
index 0000000000..2961644d60
--- /dev/null
+++ b/cypress/platform/empty.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Empty</title>
+  </head>
+  <body></body>
+</html>

From d8c7557ae5fb736cde6a9763a25bbe43c83a466e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 5 Oct 2022 16:05:27 +0800
Subject: [PATCH 07/11] fix: Docs

---
 docs/n00b-syntaxReference.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md
index 7edb4c319f..2c9ef72074 100644
--- a/docs/n00b-syntaxReference.md
+++ b/docs/n00b-syntaxReference.md
@@ -26,6 +26,18 @@ erDiagram
           PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 ```
 
+```mermaid
+erDiagram
+          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+          CUSTOMER ||--o{ ORDER : places
+          CUSTOMER ||--o{ INVOICE : "liable for"
+          DELIVERY-ADDRESS ||--o{ ORDER : receives
+          INVOICE ||--|{ ORDER : covers
+          ORDER ||--|{ ORDER-ITEM : includes
+          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+```
+
 The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
 
 ## Diagram Breaking

From c05c98c08239b9a517136ee814b95e27f0aea73c Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 5 Oct 2022 13:14:05 +0200
Subject: [PATCH 08/11] WIP

---
 cypress/platform/knsv.html                    |  2 +-
 cypress/platform/knsv2.html                   |  9 ++--
 packages/mermaid-mindmap/src/add-diagram.ts   | 17 +++----
 .../mermaid-mindmap/src/mindmapDetector.ts    |  3 --
 packages/mermaid-mindmap/src/registry.ts      | 50 ++++++++-----------
 packages/mermaid-mindmap/tsconfig.json        |  1 +
 packages/mermaid/src/Diagram.ts               |  6 +--
 packages/mermaid/src/config.type.ts           |  1 +
 .../mermaid/src/diagram-api/detectType.ts     | 19 +++----
 packages/mermaid/src/mermaidAPI.ts            | 11 +++-
 tsconfig.json                                 |  2 +-
 vite.config.ts                                |  8 +++
 12 files changed, 65 insertions(+), 64 deletions(-)

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index d4ffa0c0c7..8bd8d7c791 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -368,7 +368,6 @@
     </pre>
 
     <!-- <script src="./mermaid.js"></script> -->
-    <script src="./mermaid-mindmap-detector.js"></script>
     <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
@@ -386,6 +385,7 @@
           htmlLabels: false,
           fontFamily: 'courier',
         },
+        extraDiagrams: ['./mermaid-mindmap-detector.js'],
       });
       function callback() {
         alert('It worked');
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 143e120876..fd35eae366 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -86,9 +86,10 @@
           gc7((grand<br/>grand<br/>child 8))
         </pre>
     <!-- <div id="cy"></div> -->
-    <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
-    <script src="./mermaid-example-diagram-detector.js"></script>
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
     <script src="./mermaid.js"></script>
+
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -97,8 +98,10 @@
         theme: 'forest',
         startOnLoad: true,
         logLevel: 0,
-        basePath: './packages/',
+        // basePath: './packages/',
         // themeVariables: { darkMode: true },
+        extraDiagrams: ['./mermaid-mindmap-detector.js'],
+        // extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
         alert('It worked');
diff --git a/packages/mermaid-mindmap/src/add-diagram.ts b/packages/mermaid-mindmap/src/add-diagram.ts
index 873d552329..c8ade1bfa4 100644
--- a/packages/mermaid-mindmap/src/add-diagram.ts
+++ b/packages/mermaid-mindmap/src/add-diagram.ts
@@ -5,13 +5,10 @@ import mindmapRenderer from './mindmapRenderer';
 import mindmapStyles from './styles';
 import { injectUtils } from './mermaidUtils';
 
-window.mermaid.connectDiagram(
-  'mindmap',
-  {
-    db: mindmapDb,
-    renderer: mindmapRenderer,
-    parser: mindmapParser,
-    styles: mindmapStyles,
-  },
-  injectUtils
-);
+export const mindmap = {
+  db: mindmapDb,
+  renderer: mindmapRenderer,
+  parser: mindmapParser,
+  styles: mindmapStyles,
+  injectUtils,
+};
diff --git a/packages/mermaid-mindmap/src/mindmapDetector.ts b/packages/mermaid-mindmap/src/mindmapDetector.ts
index 9a3f6f426c..e69de29bb2 100644
--- a/packages/mermaid-mindmap/src/mindmapDetector.ts
+++ b/packages/mermaid-mindmap/src/mindmapDetector.ts
@@ -1,3 +0,0 @@
-export const mindmapDetector = (txt: string) => {
-  return txt.match(/^\s*mindmap/) !== null;
-};
diff --git a/packages/mermaid-mindmap/src/registry.ts b/packages/mermaid-mindmap/src/registry.ts
index e70967ba69..a05b0381ab 100644
--- a/packages/mermaid-mindmap/src/registry.ts
+++ b/packages/mermaid-mindmap/src/registry.ts
@@ -1,34 +1,26 @@
-// @ts-ignore: TODO Fix ts errors
-import { mindmapDetector } from './mindmapDetector';
+export const id = 'mindmap';
 
-const scriptElement = document.currentScript as HTMLScriptElement;
-const path = scriptElement.src;
-const lastSlash = path.lastIndexOf('/');
-const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
+const detectorFunction = (txt: string) => {
+  return txt.match(/^\s*mindmap/) !== null;
+};
 
-if (typeof document !== 'undefined') {
-  if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-    window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
+export const loadDiagram = async () => {
+  const diagram = await import('./add-diagram');
+  return { id, detector, diagram };
+};
+export const detector = async (txt: string) => {
+  if (detectorFunction(txt)) {
+    const diagram = await import('./add-diagram');
+    return { id, diagram };
   } else {
-    window.mermaid = {};
-    window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
+    return false;
   }
+};
 
-  /*!
-   * Wait for document loaded before starting the execution.
-   */
-  window.addEventListener(
-    'load',
-    () => {
-      if (window.mermaid && typeof window.mermaid.detectors === 'object') {
-        window.mermaid.detectors.push({
-          id: 'mindmap',
-          detector: mindmapDetector,
-          path: baseFolder,
-        });
-        console.error(window.mermaid.detectors); // eslint-disable-line no-console
-      }
-    },
-    false
-  );
-}
+export const id = 'mindmap';
+
+export default {
+  id,
+  detector,
+  loadDiagram,
+};
diff --git a/packages/mermaid-mindmap/tsconfig.json b/packages/mermaid-mindmap/tsconfig.json
index 45076b7b52..310137cc0f 100644
--- a/packages/mermaid-mindmap/tsconfig.json
+++ b/packages/mermaid-mindmap/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "../../tsconfig.json",
+  "module": "esnext",
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist"
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 231a78af6a..019031c314 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -12,7 +12,7 @@ export class Diagram {
   constructor(public txt: string, parseError?: Function) {
     const cnf = configApi.getConfig();
     this.txt = txt;
-    this.type = detectType(txt, cnf);
+    this.type = await detectType(txt, cnf);
     const diagram = getDiagram(this.type);
     log.debug('Type ' + this.type);
     // Setup diagram
@@ -76,9 +76,9 @@ export const getDiagramFromText = async (txt: string, parseError?: Function) =>
     getDiagram(type);
   } catch (error) {
     // Diagram not avaiable, loading it
-    const path = getPathForDiagram(type);
+    // const path = getPathForDiagram(type);
     // await loadDiagram('./packages/mermaid-mindmap/dist/mermaid-mindmap.js');
-    await loadDiagram(path + 'mermaid-' + type + '.js');
+    // await loadDiagram(path + 'mermaid-' + type + '.js');
     // new diagram will try getDiagram again and if fails then it is a valid throw
   }
   // If either of the above worked, we have the diagram
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index d9d94226f9..0e5b83d02d 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -3,6 +3,7 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
+  extraDiagrams: any;
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index afb9a90789..85ddee9a61 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,13 +1,12 @@
 import { MermaidConfig } from '../config.type';
 
 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
-export type DetectorRecord = { detector: DiagramDetector; path: string };
 
 const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;
 
-const detectors: Record<string, DetectorRecord> = {};
+const detectors: Record<string, DiagramDetector> = {};
 
 /**
  * @function detectType Detects the type of the graph text. Takes into consideration the possible
@@ -37,8 +36,9 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
 
   // console.log(detectors);
 
-  for (const [key, detectorRecord] of Object.entries(detectors)) {
-    if (detectorRecord.detector(text, config)) {
+  for (const [key, detector] of Object.entries(detectors)) {
+    const diagram = detector(text, config);
+    if (diagram) {
       return key;
     }
   }
@@ -47,13 +47,6 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
   return 'flowchart';
 };
 
-export const addDetector = (key: string, detector: DiagramDetector, path: string) => {
-  detectors[key] = { detector, path };
-};
-
-export const getPathForDiagram = (id: string) => {
-  const detectorRecord = detectors[id];
-  if (detectorRecord) {
-    return detectorRecord.path;
-  }
+export const addDetector = (key: string, detector: DiagramDetector) => {
+  detectors[key] = detector;
 };
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 50eb51ec50..5d7ec8719e 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -18,6 +18,7 @@ import { compile, serialize, stringify } from 'stylis';
 import pkg from '../package.json';
 import * as configApi from './config';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
+import { addDetector } from './diagram-api/detectType';
 import classDb from './diagrams/class/classDb';
 import flowDb from './diagrams/flowchart/flowDb';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
@@ -461,7 +462,7 @@ const handleDirective = function (p: any, directive: any, type: string): void {
 };
 
 /** @param {MermaidConfig} options */
-function initialize(options: MermaidConfig) {
+async function initialize(options: MermaidConfig) {
   // Handle legacy location of font-family configuration
   if (options?.fontFamily) {
     if (!options.themeVariables?.fontFamily) {
@@ -485,6 +486,14 @@ function initialize(options: MermaidConfig) {
     typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
 
   setLogLevel(config.logLevel);
+
+  if (typeof config.extraDiagrams !== 'undefined' && config.extraDiagrams.length > 0) {
+    // config.extraDiagrams.forEach(async (diagram: string) => {
+    await import(config.extraDiagrams[0]);
+    const { id, detector } = window['mermaid-mindmap-detector']; //eslint-disable-line
+    addDetector(id, detector);
+    // });
+  }
   if (!hasLoadedDiagrams) {
     addDiagrams();
     hasLoadedDiagrams = true;
diff --git a/tsconfig.json b/tsconfig.json
index 99feb5bda8..fe107f205c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,7 +27,7 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "ES6" /* Specify what module code is generated. */,
+    "module": "es2022" /* Specify what module code is generated. */,
     // "rootDir": "./packages" /* Specify the root folder within your source files. */,
     "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
diff --git a/vite.config.ts b/vite.config.ts
index 8d34e6184d..e792954254 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,4 +15,12 @@ export default defineConfig({
       reporter: ['text', 'json', 'html', 'lcov'],
     },
   },
+  build: {
+    /** If you set esmExternals to true, this plugins assumes that
+     all external dependencies are ES modules */
+
+    commonjsOptions: {
+      esmExternals: true,
+    },
+  },
 });

From 0f2e0c2ab48611e4d7c4404c08332880c5a71523 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 5 Oct 2022 22:03:05 +0200
Subject: [PATCH 09/11] Updated logic for diagram loading

---
 cypress/platform/viewer.js                    |  2 ++
 packages/mermaid-mindmap/src/registry.ts      | 16 +++-----------
 packages/mermaid/src/Diagram.ts               | 21 ++++++++++++++++---
 packages/mermaid/src/config.type.ts           |  2 +-
 packages/mermaid/src/defaultConfig.ts         |  2 +-
 .../mermaid/src/diagram-api/detectType.ts     | 17 ++++++++++-----
 .../src/diagram-api/diagram-orchestration.ts  |  2 +-
 .../src/diagram-api/diagramAPI.spec.ts        | 18 +++++++---------
 .../mermaid/src/diagram-api/diagramAPI.ts     | 17 ++++++++++++---
 packages/mermaid/src/mermaid.ts               | 20 +++++++++++++++---
 packages/mermaid/src/mermaidAPI.ts            |  7 -------
 11 files changed, 76 insertions(+), 48 deletions(-)

diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index 8f1ccfdab5..105ecda712 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -36,6 +36,8 @@ const contentLoaded = function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
+    graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.js'];
+
     mermaid2.initialize(graphObj.mermaid);
     mermaid2.init();
   }
diff --git a/packages/mermaid-mindmap/src/registry.ts b/packages/mermaid-mindmap/src/registry.ts
index a05b0381ab..c8213437ea 100644
--- a/packages/mermaid-mindmap/src/registry.ts
+++ b/packages/mermaid-mindmap/src/registry.ts
@@ -1,23 +1,13 @@
 export const id = 'mindmap';
 
-const detectorFunction = (txt: string) => {
+const detector = (txt: string) => {
   return txt.match(/^\s*mindmap/) !== null;
 };
 
 export const loadDiagram = async () => {
-  const diagram = await import('./add-diagram');
-  return { id, detector, diagram };
+  const { mindmap } = await import('./add-diagram');
+  return { id, diagram: mindmap };
 };
-export const detector = async (txt: string) => {
-  if (detectorFunction(txt)) {
-    const diagram = await import('./add-diagram');
-    return { id, diagram };
-  } else {
-    return false;
-  }
-};
-
-export const id = 'mindmap';
 
 export default {
   id,
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 019031c314..9bdc92079f 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -1,7 +1,7 @@
 import * as configApi from './config';
 import { log } from './logger';
-import { getDiagram, loadDiagram } from './diagram-api/diagramAPI';
-import { detectType, getPathForDiagram } from './diagram-api/detectType';
+import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
+import { detectType, getDiagramLoader } from './diagram-api/detectType';
 import { isDetailedError } from './utils';
 export class Diagram {
   type = 'graph';
@@ -12,7 +12,7 @@ export class Diagram {
   constructor(public txt: string, parseError?: Function) {
     const cnf = configApi.getConfig();
     this.txt = txt;
-    this.type = await detectType(txt, cnf);
+    this.type = detectType(txt, cnf);
     const diagram = getDiagram(this.type);
     log.debug('Type ' + this.type);
     // Setup diagram
@@ -75,8 +75,23 @@ export const getDiagramFromText = async (txt: string, parseError?: Function) =>
     // Trying to find the diagram
     getDiagram(type);
   } catch (error) {
+    const loader = getDiagramLoader(type);
+    if (!loader) {
+      throw new Error(`Diagram ${type} not found.`);
+    }
     // Diagram not avaiable, loading it
     // const path = getPathForDiagram(type);
+    const { diagram } = await loader(); // eslint-disable-line @typescript-eslint/no-explicit-any
+    registerDiagram(
+      type,
+      {
+        db: diagram.db,
+        renderer: diagram.renderer,
+        parser: diagram.parser,
+        styles: diagram.styles,
+      },
+      diagram.injectUtils
+    );
     // await loadDiagram('./packages/mermaid-mindmap/dist/mermaid-mindmap.js');
     // await loadDiagram(path + 'mermaid-' + type + '.js');
     // new diagram will try getDiagram again and if fails then it is a valid throw
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 0e5b83d02d..b757eb8deb 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -3,7 +3,7 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
-  extraDiagrams: any;
+  extraDiagrams?: any;
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 681fda60ca..a900018749 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -115,7 +115,7 @@ const config: Partial<MermaidConfig> = {
    * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
    */
   secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-
+  extraDiagrams: [],
   /**
    * This option controls if the generated ids of nodes in the SVG are generated randomly or based
    * on a seed. If set to false, the IDs are generated based on the current date and thus are not
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 85ddee9a61..340cbfbae6 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,12 +1,13 @@
 import { MermaidConfig } from '../config.type';
 
 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
-
+export type DiagramLoader = (() => any) | null;
+export type DetectorRecord = { detector: DiagramDetector; loader: DiagramLoader };
 const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;
 
-const detectors: Record<string, DiagramDetector> = {};
+const detectors: Record<string, DetectorRecord> = {};
 
 /**
  * @function detectType Detects the type of the graph text. Takes into consideration the possible
@@ -36,7 +37,7 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
 
   // console.log(detectors);
 
-  for (const [key, detector] of Object.entries(detectors)) {
+  for (const [key, { detector }] of Object.entries(detectors)) {
     const diagram = detector(text, config);
     if (diagram) {
       return key;
@@ -47,6 +48,12 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
   return 'flowchart';
 };
 
-export const addDetector = (key: string, detector: DiagramDetector) => {
-  detectors[key] = detector;
+export const addDetector = (
+  key: string,
+  detector: DiagramDetector,
+  loader: DiagramLoader | null
+) => {
+  detectors[key] = { detector, loader };
 };
+
+export const getDiagramLoader = (key: string) => detectors[key].loader;
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 912559c901..1693f4f51d 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -112,7 +112,7 @@ const registerDiagramAndDetector = (
   detector: DiagramDetector
 ) => {
   registerDiagram(id, diagram);
-  registerDetector(id, detector, '');
+  registerDetector(id, detector);
 };
 
 export const addDiagrams = () => {
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
index 018e72bd4e..584a36fa35 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -19,17 +19,13 @@ describe('DiagramAPI', () => {
     const detector: DiagramDetector = (str: string) => {
       return str.match('loki') !== null;
     };
-    registerDetector('loki', detector, '');
-    registerDiagram(
-      'loki',
-      {
-        db: {},
-        parser: {},
-        renderer: {},
-        styles: {},
-      },
-      (text: string) => text.includes('loki')
-    );
+    registerDetector('loki', detector);
+    registerDiagram('loki', {
+      db: {},
+      parser: {},
+      renderer: {},
+      styles: {},
+    });
     expect(getDiagram('loki')).not.toBeNull();
     expect(detectType('loki diagram')).toBe('loki');
   });
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index beb770f31a..002619bbbd 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -18,12 +18,21 @@ export const getConfig = _getConfig;
 export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
 export const setupGraphViewbox = _setupGraphViewbox;
 
+export interface InjectUtils {
+  _log: any;
+  _setLogLevel: any;
+  _getConfig: any;
+  _sanitizeText: any;
+  _setupGraphViewbox: any;
+}
+
 export interface DiagramDefinition {
   db: any;
   renderer: any;
   parser: any;
   styles: any;
   init?: (config: MermaidConfig) => void;
+  injectUtils?: (utils: InjectUtils) => void;
 }
 
 const diagrams: Record<string, DiagramDefinition> = {};
@@ -32,8 +41,8 @@ export interface Detectors {
   [key: string]: DiagramDetector;
 }
 
-export const registerDetector = (id: string, detector: DiagramDetector, path: string) => {
-  addDetector(id, detector, path);
+export const registerDetector = (id: string, detector: DiagramDetector) => {
+  addDetector(id, detector, null);
 };
 
 export const registerDiagram = (
@@ -52,7 +61,9 @@ export const registerDiagram = (
   }
   diagrams[id] = diagram;
   addStylesForDiagram(id, diagram.styles);
-  connectCallbacks[id] = callback;
+  if (typeof callback !== 'undefined') {
+    callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
+  }
 };
 
 export const getDiagram = (name: string): DiagramDefinition => {
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 391af32835..81b7a69d05 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -54,10 +54,24 @@ const init = async function (
 ) {
   try {
     log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
+    const conf = mermaidAPI.getConfig();
+    if (typeof conf.extraDiagrams !== 'undefined' && conf.extraDiagrams.length > 0) {
+      // config.extraDiagrams.forEach(async (diagram: string) => {
+      const apa = await import(conf.extraDiagrams[0]);
+      // Todo figure out how to get the diagram properly
+      //@ts-ignore temporary code
+      const did = window['mermaid-mindmap-detector'].default.id; //eslint-disable-line
+      //@ts-ignore temporary code
+      const detector = window['mermaid-mindmap-detector'].default.detector; //eslint-disable-line
+      //@ts-ignore temporary code
+      const loader = window['mermaid-mindmap-detector'].default.loadDiagram; //eslint-disable-line
+      addDetector(did, detector, loader);
+      // });
+    }
     mermaid.detectors.forEach(({ id, detector, path }) => {
       addDetector(id, detector, path);
     });
-    initThrowsErrors(config, nodes, callback);
+    await initThrowsErrors(config, nodes, callback);
   } catch (e) {
     log.warn('Syntax Error rendering');
     if (isDetailedError(e)) {
@@ -164,8 +178,8 @@ const initThrowsErrors = async function (
   }
 };
 
-const initialize = function (config: MermaidConfig) {
-  mermaidAPI.initialize(config);
+const initialize = async function (config: MermaidConfig) {
+  await mermaidAPI.initialize(config);
 };
 
 /**
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 5d7ec8719e..f9544ee44f 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -487,13 +487,6 @@ async function initialize(options: MermaidConfig) {
 
   setLogLevel(config.logLevel);
 
-  if (typeof config.extraDiagrams !== 'undefined' && config.extraDiagrams.length > 0) {
-    // config.extraDiagrams.forEach(async (diagram: string) => {
-    await import(config.extraDiagrams[0]);
-    const { id, detector } = window['mermaid-mindmap-detector']; //eslint-disable-line
-    addDetector(id, detector);
-    // });
-  }
   if (!hasLoadedDiagrams) {
     addDiagrams();
     hasLoadedDiagrams = true;

From c919bef70e92f86680fbdd93daf1b82c0d7437dd Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Oct 2022 13:44:28 +0800
Subject: [PATCH 10/11] fix: Import diagram

---
 cypress/platform/knsv2.html                    |  2 +-
 packages/mermaid-mindmap/src/registry.ts       |  8 +-------
 packages/mermaid/src/diagram-api/detectType.ts |  3 +++
 packages/mermaid/src/mermaid.ts                | 14 +++++---------
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index fd35eae366..91a3bbaadb 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -100,7 +100,7 @@
         logLevel: 0,
         // basePath: './packages/',
         // themeVariables: { darkMode: true },
-        extraDiagrams: ['./mermaid-mindmap-detector.js'],
+        extraDiagrams: ['./mermaid-mindmap-detector.core.mjs'],
         // extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
diff --git a/packages/mermaid-mindmap/src/registry.ts b/packages/mermaid-mindmap/src/registry.ts
index c8213437ea..a76a3627f9 100644
--- a/packages/mermaid-mindmap/src/registry.ts
+++ b/packages/mermaid-mindmap/src/registry.ts
@@ -1,6 +1,6 @@
 export const id = 'mindmap';
 
-const detector = (txt: string) => {
+export const detector = (txt: string) => {
   return txt.match(/^\s*mindmap/) !== null;
 };
 
@@ -8,9 +8,3 @@ export const loadDiagram = async () => {
   const { mindmap } = await import('./add-diagram');
   return { id, diagram: mindmap };
 };
-
-export default {
-  id,
-  detector,
-  loadDiagram,
-};
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 340cbfbae6..6a31dd1a90 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -54,6 +54,9 @@ export const addDetector = (
   loader: DiagramLoader | null
 ) => {
   detectors[key] = { detector, loader };
+  // TODO: Remove
+  // eslint-disable-next-line no-console
+  console.log(detectors);
 };
 
 export const getDiagramLoader = (key: string) => detectors[key].loader;
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 81b7a69d05..d59c43ec76 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -57,15 +57,11 @@ const init = async function (
     const conf = mermaidAPI.getConfig();
     if (typeof conf.extraDiagrams !== 'undefined' && conf.extraDiagrams.length > 0) {
       // config.extraDiagrams.forEach(async (diagram: string) => {
-      const apa = await import(conf.extraDiagrams[0]);
-      // Todo figure out how to get the diagram properly
-      //@ts-ignore temporary code
-      const did = window['mermaid-mindmap-detector'].default.id; //eslint-disable-line
-      //@ts-ignore temporary code
-      const detector = window['mermaid-mindmap-detector'].default.detector; //eslint-disable-line
-      //@ts-ignore temporary code
-      const loader = window['mermaid-mindmap-detector'].default.loadDiagram; //eslint-disable-line
-      addDetector(did, detector, loader);
+      const { id, detector, loadDiagram } = await import(conf.extraDiagrams[0]);
+      // TODO: Remove
+      // eslint-disable-next-line no-console
+      console.log(id, detector, loadDiagram);
+      addDetector(id, detector, loadDiagram);
       // });
     }
     mermaid.detectors.forEach(({ id, detector, path }) => {

From 9f286b46ff4b43cdb7debf52784d56c6ae43540b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Oct 2022 23:39:30 +0800
Subject: [PATCH 11/11] fix: Filename in viewer.js

---
 cypress/platform/viewer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index 105ecda712..ff70e0abe0 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -36,7 +36,7 @@ const contentLoaded = function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.js'];
+    graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.core.mjs'];
 
     mermaid2.initialize(graphObj.mermaid);
     mermaid2.init();