From fdb81be0a04d43acd602dd76a27b352741149084 Mon Sep 17 00:00:00 2001 From: "Ashley Engelund (weedySeaDragon @ github)" Date: Sun, 2 Oct 2022 13:51:25 -0700 Subject: [PATCH 01/77] update demo diagrams to have lang, hr tags, src = mermaid.js where needed. --- demos/c4context.html | 8 ++- demos/classchart.html | 11 +++- demos/dataflowchart.html | 8 +-- demos/er.html | 8 ++- demos/flowchart.html | 109 +++++++++++++++++++++++++-------------- demos/gantt.html | 17 +++++- demos/git.html | 3 +- demos/index.html | 100 ++++------------------------------- demos/journey.html | 3 +- demos/pie.html | 6 ++- demos/requirements.html | 3 +- demos/sequence.html | 10 +++- demos/state.html | 3 +- 13 files changed, 143 insertions(+), 146 deletions(-) diff --git a/demos/c4context.html b/demos/c4context.html index 1485d42d8..ec7197b98 100644 --- a/demos/c4context.html +++ b/demos/c4context.html @@ -1,5 +1,5 @@ - + @@ -14,6 +14,7 @@ +

C4 context diagram demos

     C4Context
       accTitle: C4 context demo
@@ -62,6 +63,7 @@
       
       UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+ 
     C4Container
@@ -101,6 +103,7 @@
     Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
     UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
+ 
     C4Component
@@ -140,6 +143,7 @@
         UpdateRelStyle(security, db, $offsetY="-40")
         UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
+ 
     C4Dynamic
@@ -159,6 +163,7 @@
     UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
     UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
+ 
     C4Deployment
@@ -210,7 +215,6 @@
     UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
     UpdateRelStyle(db, db2, $offsetY="-10")
-
diff --git a/demos/classchart.html b/demos/classchart.html index e15495b95..5979152d6 100644 --- a/demos/classchart.html +++ b/demos/classchart.html @@ -1,5 +1,5 @@ - + @@ -14,6 +14,8 @@ +

Class diagram demos

+ 
 		classDiagram
       accTitle: Demo Class Diagram
@@ -42,8 +44,8 @@
       }
-
+ 
     classDiagram
     Class01 <|-- AveryLongClass : Cool
@@ -68,6 +70,7 @@
       }
+ 
     classDiagram
     class Class01~T~
@@ -81,6 +84,7 @@
     }
+ 
     classDiagram
     Class01~T~ <|-- AveryLongClass : Cool
@@ -104,11 +108,13 @@
         }
+ 
     classDiagram
     Interface1 ()-- Interface1Impl
+ 
     classDiagram
     direction LR
@@ -117,6 +123,7 @@
     Dog : species()
+ 
     classDiagram
     direction RL
diff --git a/demos/dataflowchart.html b/demos/dataflowchart.html
index 34011b5fe..dc7fe05af 100644
--- a/demos/dataflowchart.html
+++ b/demos/dataflowchart.html
@@ -1,9 +1,9 @@
 
-
+
   
     
     
-    Mermaid Quick Test Page
+    Data Flow Mermaid Quick Test Page
     
     
   
   
-    
Data Flow Diagram Example

+    
Data Flow Diagram demos

     
     flowchart LR
       accTitle: A simple linear flowchart.
@@ -21,6 +21,8 @@
       DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
     

 
+    

+
     
Borders Example

     
     flowchart TD
diff --git a/demos/er.html b/demos/er.html
index 68aaf18a2..4c1a72c20 100644
--- a/demos/er.html
+++ b/demos/er.html
@@ -1,5 +1,5 @@
 
-
+
   
     
     
@@ -10,6 +10,10 @@
         /* font-family: 'trebuchet ms', verdana, arial; */
         font-family: 'Courier New', Courier, monospace !important;
       }
+      .diagram-title {
+        fill: red;
+        font-size: 24pt;
+      }
     
   
 
@@ -51,8 +55,8 @@ erDiagram
       }
     

 
+    
     
+
     
     
-    
-    
-    
   
 
diff --git a/demos/journey.html b/demos/journey.html
index dc1c379d3..c5c6c25e8 100644
--- a/demos/journey.html
+++ b/demos/journey.html
@@ -1,5 +1,5 @@
 
-
+
   
     
     
@@ -14,6 +14,7 @@
   
 
   
+    
Journey diagram demo

     
          journey
     title My working day
diff --git a/demos/pie.html b/demos/pie.html
index 3232d2534..333ef9491 100644
--- a/demos/pie.html
+++ b/demos/pie.html
@@ -1,5 +1,5 @@
 
-
+
   
     
     
@@ -14,6 +14,7 @@
   
 
   
+    
Pie chart demos

     
       pie title Pets adopted by volunteers
       accTitle: simple pie char demo
@@ -23,6 +24,7 @@
     "Rats" : 15
     

 
+    

     
     pie
       title Key elements in Product X
@@ -35,7 +37,7 @@
     

 
     
     
     

From 74bd576ebc02a3c7c6a4d436458464f42d9186ca Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Wed, 5 Oct 2022 14:52:04 +0800
Subject: [PATCH 06/77] 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 ed9fcaaa8..625d34052 100644
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@@ -13,39 +13,39 @@
   
   
     

-      
+      
     graph TB
       FunctionTest1-->URLTest1
       click FunctionTest1 clickByFlow "Add a div"
       click URLTest1 "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
       

-      
+      
   graph TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
     click 2URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
       

-      
+      
     flowchart TB
       FunctionTest2-->URLTest2
       click FunctionTest2 clickByFlow "Add a div"
       click URLTest2 "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" _self
       

-      
+      
   flowchart TB
     10Function--->20URL
     click 10Function clickByFlow "Add a div"
     click 20URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" _self
       

 
-      
+      
   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"
       

-      
+      
   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
     

     

-      
+      
       graph TB
         FunctionArgTest2-->URL
         click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
       

-      
+      
       flowchart TB
         2FunctionArg-->URL
         click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
       

 
-      
+      
       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"
       

 
-      
+      
       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 6a709dd32..391af3283 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,
@@ -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,
@@ -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 
Date: Wed, 5 Oct 2022 16:04:26 +0800
Subject: [PATCH 07/77] 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 63234d147..857141b5b 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 625d34052..459c14e85 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 mermaid docs"
+      click URLTest1 "http://localhost:9000/empty.html" "Visit mermaid docs"
       

       
   graph TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
+    click 2URL "http://localhost:9000/empty.html" "Visit mermaid docs"
       

       
     flowchart TB
       FunctionTest2-->URLTest2
       click FunctionTest2 clickByFlow "Add a div"
-      click URLTest2 "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" _self
+      click URLTest2 "http://localhost:9000/empty.html" "Visit mermaid docs" _self
       

       
   flowchart TB
     10Function--->20URL
     click 10Function clickByFlow "Add a div"
-    click 20URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" _self
+    click 20URL "http://localhost:9000/empty.html" "Visit mermaid docs" _self
       

 
       
   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"
       

       
   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"
       

@@ -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 mermaid docs"
+        click URL "http://localhost:9000/empty.html" "Visit mermaid docs"
       

       
       flowchart TB
         2FunctionArg-->URL
         click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
+        click URL "http://localhost:9000/empty.html" "Visit mermaid docs"
       

 
       
       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"
       

@@ -119,7 +119,7 @@
       
       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"
       

diff --git a/cypress/platform/click_security_other.html b/cypress/platform/click_security_other.html
index 348c8b9aa..5338cac06 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 mermaid docs"
+      click URL1 "http://localhost:9000/empty.html" "Visit mermaid docs"
     

     
   graph TB
     1Function-->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
+    click 2URL "http://localhost:9000/empty.html" "Visit mermaid docs"
     

 
     
@@ -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 94229500c..49c5d71c0 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 mermaid docs"
+      click URL "http://localhost:9000/empty.html" "Visit mermaid docs"
       

       
   graph TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
+    click 2URL "http://localhost:9000/empty.html" "Visit mermaid docs"
       

       
     flowchart TB
       Function-->URL
       click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" _self
+      click URL "http://localhost:9000/empty.html" "Visit mermaid docs" _self
       

       
   flowchart TB
     1Function--->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" _self
+    click 2URL "http://localhost:9000/empty.html" "Visit mermaid docs" _self
       

 
       
   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"
       

       
   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"
       

@@ -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 mermaid docs"
+        click URL "http://localhost:9000/empty.html" "Visit mermaid docs"
       

       
       flowchart TB
         FunctionArg-->URL
         click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
-        click URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
+        click URL "http://localhost:9000/empty.html" "Visit mermaid docs"
       

 
       
       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"
       

@@ -119,7 +119,7 @@
       
       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"
       

diff --git a/cypress/platform/click_security_strict.html b/cypress/platform/click_security_strict.html
index 64fb2e9c6..26605ddf9 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 mermaid docs"
+      click URL1 "http://localhost:9000/empty.html" "Visit mermaid docs"
     

     
   graph TB
     1Function-->2URL
     click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs"
+    click 2URL "http://localhost:9000/empty.html" "Visit mermaid docs"
     

 
     
@@ -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 000000000..2961644d6
--- /dev/null
+++ b/cypress/platform/empty.html
@@ -0,0 +1,10 @@
+
+
+  
+    
+    
+    
+    Empty
+  
+  
+

From d8c7557ae5fb736cde6a9763a25bbe43c83a466e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Wed, 5 Oct 2022 16:05:27 +0800
Subject: [PATCH 08/77] 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 7edb4c319..2c9ef7207 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 
Date: Wed, 5 Oct 2022 13:14:05 +0200
Subject: [PATCH 09/77] 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 d4ffa0c0c..8bd8d7c79 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -368,7 +368,6 @@ flowchart TD
     

 
     
-    
     
     
-    
+    
+    
     
+
     
   
 

From 803ea863fdd98bd5018ea5c740c80ba9f87419f1 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 6 Oct 2022 22:58:54 +0800
Subject: [PATCH 21/77] fix: pnpm not found

---
 package.json   | 9 +++++----
 pnpm-lock.yaml | 8 ++++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 67f546d97..c1c33920f 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "module": "dist/mermaid.core.mjs",
   "types": "dist/mermaid.d.ts",
   "type": "module",
-  "packageManager": "pnpm@7.12.2",
+  "packageManager": "pnpm@7.13.2",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
@@ -71,8 +71,8 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
-    "@types/uuid": "^8.3.4",
     "@types/node": "^18.8.1",
+    "@types/uuid": "^8.3.4",
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
@@ -107,8 +107,8 @@
     "coveralls": "^3.1.1",
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.15.10",
     "documentation": "13.2.0",
+    "esbuild": "^0.15.10",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -128,6 +128,7 @@
     "markdown-it": "^13.0.1",
     "moment": "^2.23.0",
     "path-browserify": "^1.0.1",
+    "pnpm": "^7.13.2",
     "prettier": "^2.7.1",
     "prettier-plugin-jsdoc": "^0.4.2",
     "remark": "^14.0.2",
@@ -136,10 +137,10 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4",
     "unist-util-flatmap": "^1.0.0",
+    "vite": "^3.1.4",
     "vitepress": "^1.0.0-alpha.19",
     "vitepress-plugin-mermaid": "^2.0.8",
     "vitepress-plugin-search": "^1.0.4-alpha.11",
-    "vite": "^3.1.4",
     "vitest": "^0.23.4"
   },
   "resolutions": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80e619de0..9cb8306ea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,7 @@ importers:
       moment-mini: ^2.24.0
       non-layered-tidy-tree-layout: ^2.0.2
       path-browserify: ^1.0.1
+      pnpm: ^7.13.2
       prettier: ^2.7.1
       prettier-plugin-jsdoc: ^0.4.2
       remark: ^14.0.2
@@ -134,6 +135,7 @@ importers:
       markdown-it: 13.0.1
       moment: 2.29.4
       path-browserify: 1.0.1
+      pnpm: 7.13.2
       prettier: 2.7.1
       prettier-plugin-jsdoc: 0.4.2_prettier@2.7.1
       remark: 14.0.2
@@ -10729,6 +10731,12 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
+  /pnpm/7.13.2:
+    resolution: {integrity: sha512-lOQRBcCWycLK1PB9KptqTd6iyiH7m4GRuS4G2j4b74yDx/XvRXtP/weYz8e0/ia7HX1pMF1vJCF48ssklq0TJQ==}
+    engines: {node: '>=14.6'}
+    hasBin: true
+    dev: true
+
   /posix-character-classes/0.1.1:
     resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
     engines: {node: '>=0.10.0'}

From 9f286b46ff4b43cdb7debf52784d56c6ae43540b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod 
Date: Thu, 6 Oct 2022 23:39:30 +0800
Subject: [PATCH 22/77] 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 105ecda71..ff70e0abe 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();

From 00053b8e970f86ef7f3d5bf3815c67f683a7153b Mon Sep 17 00:00:00 2001
From: lemontreejs 
Date: Fri, 7 Oct 2022 11:56:01 +0530
Subject: [PATCH 23/77] fix: module import in pie chart demo

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

diff --git a/demos/pie.html b/demos/pie.html
index 333ef9491..096dcd62c 100644
--- a/demos/pie.html
+++ b/demos/pie.html
@@ -36,8 +36,8 @@
       "Iron" :  5
     

 
+    
     
     
 
     
@@ -653,10 +653,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
   

 
   
@@ -727,10 +727,10 @@ Beginner's tip—here's a full example of using interactive links in HTML:
   

 
   
@@ -771,10 +771,10 @@ Beginner's tip—a full example using interactive links in a html context:
   

 
   
     
@@ -51,16 +51,16 @@
   
     

     
 ```
@@ -339,7 +339,7 @@ on what kind of integration you use.
 ```html
 
 
 ```
diff --git a/packages/mermaid/src/docs/Setup.md b/packages/mermaid/src/docs/Setup.md
index 0c8f50bb8..95ae2dde4 100644
--- a/packages/mermaid/src/docs/Setup.md
+++ b/packages/mermaid/src/docs/Setup.md
@@ -1559,7 +1559,7 @@ Returns **void**
 
 ```html
 
@@ -451,10 +451,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
   

 
   
@@ -471,10 +471,10 @@ Beginner's tip—here's a full example of using interactive links in HTML:
   

 
   
@@ -495,10 +495,10 @@ Beginner's tip—a full example using interactive links in a html context:
   

 
   
     
@@ -51,16 +51,16 @@
   
     

     
 ```
@@ -339,7 +339,7 @@ on what kind of integration you use.
 ```html
 
 
 ```
diff --git a/vdocs/config/Setup.md b/vdocs/config/Setup.md
index bcf8ef583..fb58b78ea 100644
--- a/vdocs/config/Setup.md
+++ b/vdocs/config/Setup.md
@@ -29,7 +29,7 @@ mermaid.initialize({ flowchart: { htmlLabels: false } });
 **Example 2:**
 
 ```js
-var config = {
+const config = {
   startOnLoad: true,
   flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
 
@@ -1560,7 +1560,7 @@ Returns **void**
 
 ```html
 
 ```
@@ -339,7 +339,7 @@ on what kind of integration you use.
 ```html
 
 
 ```
diff --git a/vdocs/syntax/classDiagram.md b/vdocs/syntax/classDiagram.md
index 87d76cd37..be77f1a1a 100644
--- a/vdocs/syntax/classDiagram.md
+++ b/vdocs/syntax/classDiagram.md
@@ -399,7 +399,7 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
 
 ```html
 
@@ -451,10 +451,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
@@ -502,10 +502,10 @@ Beginner's tip—a full example using interactive links in a html context: