Merge branch 'eslint-plugin/html' into develop

.eslintrc.json

@@ -23,6 +23,16 @@
     "jsdoc/check-line-alignment": 0,
     "jsdoc/multiline-blocks": 0,
     "jsdoc/newline-after-description": 0,
-    "jsdoc/tag-lines": 0
+    "jsdoc/tag-lines": 0,
+    "no-empty": ["error", { "allowEmptyCatch": true }]
+  },
+  "overrides": [
+    {
+      "files": "./**/*.html",
+      "rules": {
+        "no-undef": "off",
+        "jsdoc/require-jsdoc": "off"
       }
+    }
+  ]
 }

cypress/platform/class.html

@@ -122,7 +122,7 @@
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": true },
+        flowchart: { curve: 'linear', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
@@ -131,9 +131,11 @@
         //   fontFamily: '"arial", sans-serif',
         // },
         curve: 'linear',
-        securityLevel: 'loose'
+        securityLevel: 'loose',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/click_security_loose.html

@@ -130,39 +130,39 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-click'
+    div.className = 'created-by-click';
-    div.style = 'padding: 20px; background: green; color: white;'
+    div.style = 'padding: 20px; background: green; color: white;';
-    div.innerText = 'Clicked By Flow'
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByFlowArg(argument) {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-click-2'
+    div.className = 'created-by-click-2';
-    div.style = 'padding: 20px; background: green; color: white;'
+    div.style = 'padding: 20px; background: green; color: white;';
-    div.innerText = 'Clicked By Flow: ' + argument
+    div.innerText = 'Clicked By Flow: ' + argument;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(arg1, arg2, arg3) {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-gant-click'
+    div.className = 'created-by-gant-click';
-    div.style = 'padding: 20px; background: green; color: white;'
+    div.style = 'padding: 20px; background: green; color: white;';
-    div.innerText = 'Clicked By Gant'
+    div.innerText = 'Clicked By Gant';
     if (arg1) div.innerText += ' ' + arg1;
     if (arg2) div.innerText += ' ' + arg2;
     if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByClass(arg) {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-class-click'
+    div.className = 'created-by-class-click';
-    div.style = 'padding: 20px; background: purple; color: white;'
+    div.style = 'padding: 20px; background: purple; color: white;';
-    div.innerText = 'Clicked By Class' + (arg?arg:'')
+    div.innerText = 'Clicked By Class' + (arg ? arg : '');
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
   </script>

cypress/platform/click_security_other.html

@@ -62,20 +62,20 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-click'
+    div.className = 'created-by-click';
-    div.style = 'padding: 20px; background: green; color: white;'
+    div.style = 'padding: 20px; background: green; color: white;';
-    div.innerText = 'Clicked By Flow'
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(elemName) {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-gant-click'
+    div.className = 'created-by-gant-click';
-    div.style = 'padding: 20px; background: green; color: white;'
+    div.style = 'padding: 20px; background: green; color: white;';
-    div.innerText = 'Clicked By Gant'
+    div.innerText = 'Clicked By Gant';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
   </script>

cypress/platform/click_security_strict.html

@@ -64,23 +64,23 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-click'
+    div.className = 'created-by-click';
-    div.style = 'padding: 20px; background: green; color: white;'
+    div.style = 'padding: 20px; background: green; color: white;';
-    div.innerText = 'Clicked By Flow'
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(arg1, arg2, arg3) {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-gant-click'
+    div.className = 'created-by-gant-click';
-    div.style = 'padding: 20px; background: green; color: white;'
+    div.style = 'padding: 20px; background: green; color: white;';
-    div.innerText = 'Clicked By Gant'
+    div.innerText = 'Clicked By Gant';
     if (arg1) div.innerText += ' ' + arg1;
     if (arg2) div.innerText += ' ' + arg2;
     if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
   </script>

cypress/platform/current.html

@@ -163,15 +163,17 @@ _one --> b
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": true },
+        flowchart: { curve: 'cardinal', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/current2.html

@@ -115,15 +115,17 @@ Note over Bob,Alice: Looks back
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/huge.html

@@ -29,7 +29,7 @@
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": false },
+        flowchart: { curve: 'linear', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
         // sequenceDiagram: { actorMargin: 300 } // deprecated

cypress/platform/interaction.html

@@ -90,31 +90,31 @@
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-click'
+    div.className = 'created-by-click';
-    div.style = 'padding: 20px; background: green; color: white;'
+    div.style = 'padding: 20px; background: green; color: white;';
-    div.innerText = 'Clicked By Flow'
+    div.innerText = 'Clicked By Flow';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByGantt(arg1, arg2, arg3) {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-gant-click'
+    div.className = 'created-by-gant-click';
-    div.style = 'padding: 20px; background: green; color: white;'
+    div.style = 'padding: 20px; background: green; color: white;';
-    div.innerText = 'Clicked By Gant'
+    div.innerText = 'Clicked By Gant';
     if (arg1) div.innerText += ' ' + arg1;
     if (arg2) div.innerText += ' ' + arg2;
     if (arg3) div.innerText += ' ' + arg3;
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   function clickByClass() {
-    const div = document.createElement('div')
+    const div = document.createElement('div');
-    div.className = 'created-by-class-click'
+    div.className = 'created-by-class-click';
-    div.style = 'padding: 20px; background: purple; color: white;'
+    div.style = 'padding: 20px; background: purple; color: white;';
-    div.innerText = 'Clicked By Class'
+    div.innerText = 'Clicked By Class';
 
-    document.getElementsByTagName('body')[0].appendChild(div)
+    document.getElementsByTagName('body')[0].appendChild(div);
   }
   mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
   </script>

cypress/platform/knsv.html

@@ -45,25 +45,26 @@ stateDiagram-v2
         theme: 'forest',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 2,
         flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
-        state:{
+        state: {
           nodeSpacing: 50,
           rankSpacing: 50,
           defaultRenderer: 'dagre-wrapper',
         },
-        logLevel:0,
+        logLevel: 0,
         fontSize: 18,
         curve: 'cardinal',
         securityLevel: 'strict',
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/knsv2.html

@@ -58,35 +58,39 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: false,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
         fontSize: 18,
         curve: 'basis',
         securityLevel: 'strict',
-        startOnLoad: false
+        startOnLoad: false,
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
 
-      var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"false\"}} }%%\n";
+      var diagram = '%%{init: {"flowchart": {"htmlLabels": "false"}} }%%\n';
-  diagram += "flowchart\n";
+diagram += 'flowchart\n';
-  diagram += "A[\"<ifra";
+diagram += 'A["<ifra';
-  diagram += "me srcdoc='<scrip";
+diagram += "me srcdoc='<scrip";
-  diagram += "t src=http://localhost:9000/exploit.js>";
+diagram += 't src=http://localhost:9000/exploit.js>';
-  diagram += "</scr"
+diagram += '</scr';
-  diagram += "ipt>'></iframe>\"]";
+diagram += 'ipt>\'></iframe>"]';
 
-  console.log(diagram);
+console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
+// document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
+mermaid.render('diagram', diagram, (res) => {
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

cypress/platform/knsv3.html

@@ -195,7 +195,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
         flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -204,7 +204,9 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
         securityLevel: 'loose',
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/regression/issue-1874.html

@@ -4,8 +4,7 @@
   <script>
       mermaid.initialize({
         theme: 'base',
-       themeVariables: {
+        themeVariables: {},
-      },
         startOnLoad: true,
       });
   </script>

cypress/platform/render-after-error.html

@@ -11,21 +11,16 @@
         </div>
 
         <script src="./mermaid.js"></script>
-        <script>
+        <script>mermaid.init({ startOnLoad: false });
-
-         mermaid.init({ startOnLoad: false });
          mermaid.mermaidAPI.initialize();
 
-         try{
+         try {
-             mermaid.mermaidAPI.render("graphDiv",
+           mermaid.mermaidAPI.render('graphDiv', `>`);
-                                       `>`);
+         } catch (e) {}
-         } catch(e){}
 
-         mermaid.mermaidAPI.render("graphDiv",
+         mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
-                                   `graph LR\n a --> b`, html => {
+           document.getElementById('graph').innerHTML = html;
-                                      document.getElementById('graph').innerHTML=html;
          });
-
         </script>
 
     </body>

cypress/platform/rerender.html

@@ -11,21 +11,18 @@
 </div>
 
   <script src="./mermaid.js"></script>
-  <script>
+  <script>mermaid.init({ startOnLoad: false });
-
-    mermaid.init({ startOnLoad: false });
     mermaid.mermaidAPI.initialize();
 
     rerender('XMas');
 
     function rerender(text) {
       var graphText = `graph TD
-        A[${text}] -->|Get money| B(Go shopping)`
+        A[${text}] -->|Get money| B(Go shopping)`;
       var graph = mermaid.mermaidAPI.render('id', graphText);
-      console.log('\x1b[35m%s\x1b[0m', '>> graph', graph)
+      console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
-      document.getElementById('graph').innerHTML=graph;
+      document.getElementById('graph').innerHTML = graph;
     }
-
   </script>
   <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
 

cypress/platform/showcase_base.html

@@ -275,15 +275,17 @@ requirementDiagram
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_base_dark.html

@@ -266,11 +266,20 @@ requirementDiagram
       };
       mermaid.initialize({
         theme: 'base',
-        themeVariables: { primaryColor: '#9400D3', darkMode: true, background: '#222', textColor:'white', primaryTextColor: '#f4f4f4', nodeBkg: '#ff0000', mainBkg:'#0000ff', tertiaryColor:'#ffffcc' },
+        themeVariables: {
+    primaryColor: '#9400D3',
+    darkMode: true,
+    background: '#222',
+    textColor: 'white',
+    primaryTextColor: '#f4f4f4',
+    nodeBkg: '#ff0000',
+    mainBkg: '#0000ff',
+    tertiaryColor: '#ffffcc',
+  },
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
@@ -278,7 +287,9 @@ requirementDiagram
         curve: 'cardinal',
         // securityLevel: 'strict'
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_dark.html

@@ -266,15 +266,17 @@ requirementDiagram
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": true },
+        flowchart: { curve: 'cardinal', htmlLabels: true },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_default.html

@@ -261,15 +261,17 @@ requirementDiagram
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_forest.html

@@ -265,15 +265,17 @@ requirementDiagram
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/showcase_neutral.html

@@ -264,15 +264,17 @@ requirementDiagram
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/theme-directives.html

@@ -129,7 +129,7 @@
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
         // flowchart: { useMaxWidth: true },
-        graph: { curve: 'cardinal', "htmlLabels": false },
+        graph: { curve: 'cardinal', htmlLabels: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
@@ -137,7 +137,9 @@
         curve: 'cardinal',
         securityLevel: 'strict',
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
     </script>
   </body>
 </html>

cypress/platform/xss.html

@@ -23,11 +23,11 @@
       }
     </style>
     <script>
-      function xssAttack(){
+      function xssAttack() {
-        const div = document.createElement('div')
+        const div = document.createElement('div');
-        div.id = 'the-malware'
+        div.id = 'the-malware';
-        div.className = 'malware'
+        div.className = 'malware';
-        div.innerHTML = 'XSS Succeeded'
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         // const el = document.querySelector('.mermaid');
         // el.parentNode.removeChild(el);

cypress/platform/xss10.html

@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,35 +72,36 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
-      function xssAttack(){
+  alert('It worked');
-        const div = document.createElement('div')
+}
-        div.id = 'the-malware'
+      function xssAttack() {
-        div.className = 'malware'
+        const div = document.createElement('div');
-        div.innerHTML = 'XSS Succeeded'
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
 
-
+      var diagram = 'classDiagram\n';
-      var diagram = "classDiagram\n"
+diagram += 'class Square~<img/src';
-diagram += "class Square~<img/src";
 diagram += "='1'/onerror=xssAttack()>~{\n";
-diagram += "id A\n";
+diagram += 'id A\n';
-diagram += "}";
+diagram += '}';
 
-    //   var diagram = "stateDiagram-v2\n";
+//   var diagram = "stateDiagram-v2\n";
-    //  diagram += "<img/src='1'/onerror"
+//  diagram += "<img/src='1'/onerror"
-    //  diagram += "=xssAttack()> --> B";
+//  diagram += "=xssAttack()> --> B";
-  console.log(diagram);
+console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
+// document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
+mermaid.render('diagram', diagram, (res) => {
   console.log(res);
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

cypress/platform/xss11.html

@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,33 +72,34 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
-      function xssAttack(){
+  alert('It worked');
-        const div = document.createElement('div')
+}
-        div.id = 'the-malware'
+      function xssAttack() {
-        div.className = 'malware'
+        const div = document.createElement('div');
-        div.innerHTML = 'XSS Succeeded'
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
 
-
+var diagram = 'stateDiagram-v2\n';
-      var diagram = "stateDiagram-v2\n"
+diagram += 's2 : This is a state description<img/src';
-diagram += "s2 : This is a state description<img/src";
 diagram += "='1'/onerror=xssAttack()>";
 
-    //   var diagram = "stateDiagram-v2\n";
+//   var diagram = "stateDiagram-v2\n";
-    //  diagram += "<img/src='1'/onerror"
+//  diagram += "<img/src='1'/onerror"
-    //  diagram += "=xssAttack()> --> B";
+//  diagram += "=xssAttack()> --> B";
-  console.log(diagram);
+console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
+// document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
+mermaid.render('diagram', diagram, (res) => {
   console.log(res);
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

cypress/platform/xss12.html

@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,33 +72,34 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
-      function xssAttack(){
+  alert('It worked');
-        const div = document.createElement('div')
+}
-        div.id = 'the-malware'
+      function xssAttack() {
-        div.className = 'malware'
+        const div = document.createElement('div');
-        div.innerHTML = 'XSS Succeeded'
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
 
-
+var diagram = 'stateDiagram-v2\n';
-      var diagram = "stateDiagram-v2\n"
+diagram += 's2 : A<img/src';
-diagram += "s2 : A<img/src";
 diagram += "='1'/onerror=xssAttack()>";
 
-    //   var diagram = "stateDiagram-v2\n";
+//   var diagram = "stateDiagram-v2\n";
-    //  diagram += "<img/src='1'/onerror"
+//  diagram += "<img/src='1'/onerror"
-    //  diagram += "=xssAttack()> --> B";
+//  diagram += "=xssAttack()> --> B";
-  console.log(diagram);
+console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
+// document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
+mermaid.render('diagram', diagram, (res) => {
   console.log(res);
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

cypress/platform/xss13.html

@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,33 +72,34 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
-      function xssAttack(){
+  alert('It worked');
-        const div = document.createElement('div')
+}
-        div.id = 'the-malware'
+      function xssAttack() {
-        div.className = 'malware'
+        const div = document.createElement('div');
-        div.innerHTML = 'XSS Succeeded'
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
 
-
+var diagram = 'stateDiagram-v2\n';
-      var diagram = "stateDiagram-v2\n"
+diagram += 'if_state --> False: if n < 0<img/src';
-diagram += "if_state --> False: if n < 0<img/src";
 diagram += "='1'/onerror=xssAttack()>";
 
-    //   var diagram = "stateDiagram-v2\n";
+//   var diagram = "stateDiagram-v2\n";
-    //  diagram += "<img/src='1'/onerror"
+//  diagram += "<img/src='1'/onerror"
-    //  diagram += "=xssAttack()> --> B";
+//  diagram += "=xssAttack()> --> B";
-  console.log(diagram);
+console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
+// document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
+mermaid.render('diagram', diagram, (res) => {
   console.log(res);
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

cypress/platform/xss2.html

@@ -22,11 +22,11 @@
       }
     </style>
     <script>
-      function xssAttack(){
+      function xssAttack() {
-        const div = document.createElement('div')
+        const div = document.createElement('div');
-        div.id = 'the-malware'
+        div.id = 'the-malware';
-        div.className = 'malware'
+        div.className = 'malware';
-        div.innerHTML = 'XSS Succeeded'
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
@@ -62,11 +62,11 @@
       var handler = setInterval(() => {
         cnt++;
         a = {};
-        if(typeof a.polluted !== 'undefined') {
+        if (typeof a.polluted !== 'undefined') {
           clearInterval(handler);
           xssAttack();
         }
-        if(cnt>20) {
+        if (cnt > 20) {
           clearInterval(handler);
         }
       }, 100);

cypress/platform/xss3.html

@@ -22,11 +22,11 @@
       }
     </style>
     <script>
-      function xssAttack(){
+      function xssAttack() {
-        const div = document.createElement('div')
+        const div = document.createElement('div');
-        div.id = 'the-malware'
+        div.id = 'the-malware';
-        div.className = 'malware'
+        div.className = 'malware';
-        div.innerHTML = 'XSS Succeeded'
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
@@ -49,11 +49,11 @@
       var handler = setInterval(() => {
         cnt++;
         a = {};
-        if(typeof a.polluted !== 'undefined') {
+        if (typeof a.polluted !== 'undefined') {
           clearInterval(handler);
           xssAttack();
         }
-        if(cnt>20) {
+        if (cnt > 20) {
           clearInterval(handler);
         }
       }, 100);

cypress/platform/xss4.html

@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: false,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,24 +72,26 @@
         curve: 'basis',
         securityLevel: 'strict',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
+  alert('It worked');
+}
 
-      var diagram = "%%{init: {\"flowchart\": {\"htmlLabels\": \"true\"}} }%%\n";
+      var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
-  diagram += "flowchart\n";
+diagram += 'flowchart\n';
-  diagram += "A[\"<ifra";
+diagram += 'A["<ifra';
-  diagram += "me srcdoc='<scrip";
+diagram += "me srcdoc='<scrip";
-  diagram += "t src=http://localhost:9000/exploit.js>";
+diagram += 't src=http://localhost:9000/exploit.js>';
-  diagram += "</scr"
+diagram += '</scr';
-  diagram += "ipt>'></iframe>\"]";
+diagram += 'ipt>\'></iframe>"]';
 
-  console.log(diagram);
+console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
+// document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
+mermaid.render('diagram', diagram, (res) => {
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

cypress/platform/xss5.html

@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,29 +72,31 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
-      function xssAttack(){
+  alert('It worked');
-        const div = document.createElement('div')
+}
-        div.id = 'the-malware'
+      function xssAttack() {
-        div.className = 'malware'
+        const div = document.createElement('div');
-        div.innerHTML = 'XSS Succeeded'
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
-      var diagram = "graph LR\n";
+      var diagram = 'graph LR\n';
-  diagram += "B-->D\(\"<img onerror=location=\`java";
+diagram += 'B-->D("<img onerror=location=`java';
-  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-  diagram += "script\x3a;xssAttack\u0028\u0029\` src=x>\"\);\n";
+diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
 
-  console.log(diagram);
+console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
+// document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
+mermaid.render('diagram', diagram, (res) => {
   console.log(res);
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

cypress/platform/xss6.html

@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,27 +72,29 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
-      function xssAttack(){
+  alert('It worked');
-        const div = document.createElement('div')
+}
-        div.id = 'the-malware'
+      function xssAttack() {
-        div.className = 'malware'
+        const div = document.createElement('div');
-        div.innerHTML = 'XSS Succeeded'
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
-      var diagram = "graph LR\n";
+      var diagram = 'graph LR\n';
-  diagram += "A(<img/src/onerror=xssAttack`1`>)";
+diagram += 'A(<img/src/onerror=xssAttack`1`>)';
-  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-  console.log(diagram);
+console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
+// document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
+mermaid.render('diagram', diagram, (res) => {
   console.log(res);
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

cypress/platform/xss7.html

@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,29 +72,31 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
-      function xssAttack(){
+  alert('It worked');
-        const div = document.createElement('div')
+}
-        div.id = 'the-malware'
+      function xssAttack() {
-        div.className = 'malware'
+        const div = document.createElement('div');
-        div.innerHTML = 'XSS Succeeded'
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
-      var diagram = "graph LR\n";
+      var diagram = 'graph LR\n';
-  diagram += " B(<a href='<";
+diagram += " B(<a href='<";
-  diagram += "script></";
+diagram += 'script></';
-  diagram += "script>Javascript:xssAttack`1`'>Click)";
+diagram += "script>Javascript:xssAttack`1`'>Click)";
-  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-  console.log(diagram);
+console.log(diagram);
-  // document.querySelector('#diagram').innerHTML = diagram;
+// document.querySelector('#diagram').innerHTML = diagram;
-  mermaid.render('diagram', diagram, (res) => {
+mermaid.render('diagram', diagram, (res) => {
   console.log(res);
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

cypress/platform/xss8.html

@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,29 +72,30 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
-      function xssAttack(){
+  alert('It worked');
-        const div = document.createElement('div')
+}
-        div.id = 'the-malware'
+      function xssAttack() {
-        div.className = 'malware'
+        const div = document.createElement('div');
-        div.innerHTML = 'XSS Succeeded'
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
 
-
+var diagram = 'stateDiagram-v2\n';
-      var diagram = "stateDiagram-v2\n";
+diagram += "<img/src='1'/onerror=xssAttack()> --> B";
-     diagram += "<img/src='1'/onerror=xssAttack()> --> B";
+// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+console.log(diagram);
-  console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
-  // document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
-  mermaid.render('diagram', diagram, (res) => {
   console.log(res);
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

cypress/platform/xss9.html

@@ -58,11 +58,13 @@
         },
         flowchart: {
           // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10, curve: 'cardinal', htmlLabels: true
+          nodeSpacing: 10,
+    curve: 'cardinal',
+    htmlLabels: true,
         },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         // fontFamily: '"times", sans-serif',
         // fontFamily: 'courier',
@@ -70,29 +72,30 @@
         curve: 'basis',
         securityLevel: 'antiscript',
         startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
         // themeVariables: {relationLabelColor: 'red'}
       });
-      function callback(){alert('It worked');}
+      function callback() {
-      function xssAttack(){
+  alert('It worked');
-        const div = document.createElement('div')
+}
-        div.id = 'the-malware'
+      function xssAttack() {
-        div.className = 'malware'
+        const div = document.createElement('div');
-        div.innerHTML = 'XSS Succeeded'
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeded');
       }
 
-
+var diagram = 'stateDiagram-v2\n';
-      var diagram = "stateDiagram-v2\n";
+diagram += "<img/src='1'/onerror=xssAttack()> --> B";
-     diagram += "<img/src='1'/onerror=xssAttack()> --> B";
+// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
-  // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
+console.log(diagram);
-  console.log(diagram);
+// document.querySelector('#diagram').innerHTML = diagram;
-  // document.querySelector('#diagram').innerHTML = diagram;
+mermaid.render('diagram', diagram, (res) => {
-  mermaid.render('diagram', diagram, (res) => {
   console.log(res);
   document.querySelector('#res').innerHTML = res;
-  });
+});
     </script>
   </body>
 </html>

docs/index.html

@@ -1,32 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-  <title>mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.</title>
+    <title>
+      mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
+      gantt charts and git graphs.
+    </title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
+    <meta
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+      name="description"
+      content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
-  <link rel="stylesheet" href="theme.css">
+    <link rel="stylesheet" href="theme.css" />
     <script src="//cdn.jsdelivr.net/npm/mermaid@8.13.0/dist/mermaid.min.js"></script>
     <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
     <script>
+      // prettier-ignore
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
       ga('create', 'UA-153180559-1', 'auto');
-    if(location) {
+      if (location) {
         ga('send', 'pageview', location.hash);
       }
-
     </script>
-    <script>var require = { paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' } }</script>
+    <script>
+      var require = {
+        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
+      };
+    </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
-    <script>exports = {};</script>
+    <script>
+      exports = {};
+    </script>
     <script src="https://unpkg.com/monaco-mermaid/browser.js"></script>
 
     <style>
@@ -34,8 +49,8 @@
         max-width: 1200px;
       }
     </style>
-</head>
+  </head>
-<body>
+  <body>
     <div id="app"></div>
     <script>
       var initEditor = exports.default;
@@ -44,19 +59,30 @@
       var colorize = [];
 
       function colorizeEverything(html) {
-      initEditor(monaco)
+        initEditor(monaco);
         return new Promise((resolve, reject) => {
-        monaco.editor.setTheme('mermaid')
+          monaco.editor.setTheme('mermaid');
-        var parsed = parser.parseFromString(html, 'text/html').body
+          var parsed = parser.parseFromString(html, 'text/html').body;
-        Promise.all([...parsed.querySelectorAll('pre[id*="code"]')].map(codeBlock => monaco.editor.colorize(codeBlock.innerText, 'mermaid'))).then(result => {
+          Promise.all(
-          parsed.querySelectorAll('pre[id*="code"]').forEach((codeBlock, index) => codeBlock.innerHTML = result[index])
+            [...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
-          resolve(parsed.innerHTML)
+              monaco.editor.colorize(codeBlock.innerText, 'mermaid')
-        })
+            )
-      })
+          ).then((result) => {
+            parsed
+              .querySelectorAll('pre[id*="code"]')
+              .forEach((codeBlock, index) => (codeBlock.innerHTML = result[index]));
+            resolve(parsed.innerHTML);
+          });
+        });
       }
 
       function escapeHTML(html) {
-      return html.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll('\'', '&apos;')
+        return html
+          .replaceAll('&', '&amp;')
+          .replaceAll('<', '&lt;')
+          .replaceAll('>', '&gt;')
+          .replaceAll('"', '&quot;')
+          .replaceAll("'", '&apos;');
       }
 
       window.$docsify = {
@@ -69,22 +95,20 @@
         subMaxLevel: 2,
         markdown: {
           renderer: {
-          code: function(code, lang) {
+            code: function (code, lang) {
               if (lang.startsWith('mermaid') || lang === 'mmd') {
                 var resultingHTML = '';
 
-              if (lang === "mmd" || lang === 'mermaid-example') {
+                if (lang === 'mmd' || lang === 'mermaid-example') {
                   currentCodeExample++;
                   colorize.push(currentCodeExample);
-                resultingHTML += (
+                  resultingHTML +=
-                  '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'
+                    '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
-                )
                 }
 
                 if (lang === 'mermaid' || lang === 'mermaid-example') {
-                resultingHTML += (
+                  resultingHTML +=
-                  '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
+                    '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>';
-                );
                 }
 
                 if (resultingHTML !== '') {
@@ -92,50 +116,52 @@
                 }
               }
               return this.origin.code.apply(this, arguments);
-          }
+            },
-        }
+          },
         },
         plugins: [
           function (hook, vm) {
             hook.beforeEach(function (html) {
-            url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file
+              url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file;
-            var editHtml = '[:memo: Edit this Page](' + url + ')\n'
+              var editHtml = '[:memo: Edit this Page](' + url + ')\n';
-            return editHtml + html
+              return editHtml + html;
-          })
+            });
 
             hook.afterEach(function (html, next) {
               next(html);
-            (async() => {
+              (async () => {
-                while (!window.hasOwnProperty("monaco"))
+                while (!window.hasOwnProperty('monaco'))
-                    await new Promise(resolve => setTimeout(resolve, 1000));
+                  await new Promise((resolve) => setTimeout(resolve, 1000));
-                colorizeEverything(html).then(newHTML => document.querySelector('article.markdown-section').innerHTML = newHTML)
+                colorizeEverything(html).then(
+                  (newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML)
+                );
               })();
-          })
+            });
-        }
+          },
-      ]
+        ],
-    }
+      };
 
       var num = 0;
-    const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-    const conf = { logLevel:4, startOnLoad: false, themeCSS:'.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }' };
+      const conf = {
-    if(isDarkMode && false) conf.theme = 'dark';
+        logLevel: 4,
+        startOnLoad: false,
+        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
+      };
+      if (isDarkMode) conf.theme = 'dark';
       mermaid.initialize(conf);
-
     </script>
     <script>
-   window.onhashchange = function(a) {
+      window.onhashchange = function (a) {
         //code
-     if(location) {
+        if (location) {
           ga('send', 'pageview', location.hash);
         }
-  }
+      };
     </script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
-</body>
+  </body>
-</html>
-<!--  -->
-
 </html>

docs/landing/index.html

@@ -4,11 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>
+    <title>The Official Guide to Mermaid.js</title>
-      The Official Guide to Mermaid.js
+    <meta
-    </title>
+      name="description"
-    <meta name="description" content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code" />
+      content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code"
-    <meta name="keywords" content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts" />
+    />
+    <meta
+      name="keywords"
+      content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts"
+    />
     <meta name="author" content="Knut Sveidqvist, Ashish Jain" />
     <link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" />
     <!--Replace with your tailwind.css once created-->
@@ -16,14 +20,15 @@
     <!-- Define your gradient here - use online tools to find a gradient matching your branding-->
     <style>
       .gradient {
-        background: linear-gradient(90deg, #7557C9 0%, #f4f4f4 100%);
+        background: linear-gradient(90deg, #7557c9 0%, #f4f4f4 100%);
       }
       .p-shadow {
-        text-shadow: #7557c9 0px 0px 5px
+        text-shadow: #7557c9 0px 0px 5px;
       }
     </style>
     <!-- Google Analytics -->
     <script>
+      // prettier-ignore
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -34,12 +39,27 @@
     </script>
     <!-- End Google Analytics -->
   </head>
-  <body class="leading-normal tracking-normal text-white gradient" style="font-family: 'Source Sans Pro', sans-serif;">
+  <body
+    class="leading-normal tracking-normal text-white gradient"
+    style="font-family: 'Source Sans Pro', sans-serif"
+  >
     <!--Nav-->
 
     <!--Hero-->
     <div class="pt-24">
-      <div style="" class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center">
+      <div
+        style=""
+        class="
+          container
+          lg:px-24
+          max-w-5xl
+          px-4
+          mx-auto
+          flex flex-wrap flex-col
+          md:flex-row
+          items-center
+        "
+      >
         <!--Left Col-->
         <div class="w-full md:w-1/2">
           <div class="flex flex-col justify-center items-start text-center md:text-left">
@@ -49,10 +69,33 @@
                 The Official Guide to Mermaid.js
               </h1>
               <p class="leading-normal text-2xl mb-8 p-shadow">
-                Learn to create complex diagrams and beautiful flowcharts easily using text and code using Mermaid.js.
+                Learn to create complex diagrams and beautiful flowcharts easily using text and code
+                using Mermaid.js.
               </p>
-              <a href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965">
+              <a
-                <button style="background: #FFA41C;border: 1px solid #FF8F00;" class="mx-auto lg:mx-0 hover:underline  text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
+                href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965"
+              >
+                <button
+                  style="background: #ffa41c; border: 1px solid #ff8f00"
+                  class="
+                    mx-auto
+                    lg:mx-0
+                    hover:underline
+                    text-black
+                    font-bold
+                    rounded-full
+                    my-6
+                    py-4
+                    px-8
+                    shadow-lg
+                    focus:outline-none focus:shadow-outline
+                    transform
+                    transition
+                    hover:scale-105
+                    duration-300
+                    ease-in-out
+                  "
+                >
                   Purchase on Amazon
                 </button>
               </a>
@@ -66,15 +109,27 @@
       </div>
     </div>
     <div class="relative -mt-0 lg:-mt-12">
-      <svg viewBox="0 0 1428 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <svg
+        viewBox="0 0 1428 174"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+      >
         <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
           <g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero">
-            <path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
+            <path
+              d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
+              opacity="0.100000001"
+            ></path>
             <path
               d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
               opacity="0.100000001"
             ></path>
-            <path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" id="Path-4" opacity="0.200000003"></path>
+            <path
+              d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
+              id="Path-4"
+              opacity="0.200000003"
+            ></path>
           </g>
           <g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero">
             <path
@@ -87,7 +142,8 @@
     <section class="bg-white border-b py-8">
       <div class="container max-w-5xl mx-auto m-8">
         <h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
-          Get up to speed with using Mermaid diagrams along with real-world examples and expert tips from the authors to facilitate a seamless development workflow
+          Get up to speed with using Mermaid diagrams along with real-world examples and expert tips
+          from the authors to facilitate a seamless development workflow
         </h2>
         <div class="w-full mb-4">
           <div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
@@ -95,7 +151,8 @@
         <div class="flex flex-wrap">
           <div class="w-full sm:w-1/2 p-6 flex items-center">
             <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-              Flowcharts is a diagram type that visualizes a process or an algorithm by showing the steps in order, as well as the different paths the execution can take.
+              Flowcharts is a diagram type that visualizes a process or an algorithm by showing the
+              steps in order, as well as the different paths the execution can take.
             </p>
           </div>
           <div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@@ -103,13 +160,14 @@
           </div>
         </div>
         <div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
-          <div class="w-full sm:w-1/2 p-6 mt-6 ">
+          <div class="w-full sm:w-1/2 p-6 mt-6">
             <img class="z-50 w-full" style="" src="sequence-diagram.png" />
           </div>
           <div class="w-full sm:w-1/2 p-6 mt-6">
             <div class="align-middle flex items-center">
               <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-                Sequence diagrams lets you model and visualize interactions between different actors or objects in a system, as well as the order of those interactions
+                Sequence diagrams lets you model and visualize interactions between different actors
+                or objects in a system, as well as the order of those interactions
               </p>
             </div>
           </div>
@@ -118,7 +176,7 @@
           <div class="w-full sm:w-1/2 p-6 flex items-center">
             <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
               A class diagram is a graphical representation that is used to visualize and describe
-an object-oriented system.
+              an object-oriented system.
             </p>
           </div>
           <div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@@ -126,13 +184,14 @@ an object-oriented system.
           </div>
         </div>
         <div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
-          <div class="w-full sm:w-1/2 p-6 mt-6 ">
+          <div class="w-full sm:w-1/2 p-6 mt-6">
             <img class="z-50 w-full" style="" src="er.png" />
           </div>
           <div class="w-full sm:w-1/2 p-6 mt-6">
             <div class="align-middle flex items-center">
               <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-                An entity-relationship diagram is a graphical representation that is used to visualize the different types of entities that exist within a system.
+                An entity-relationship diagram is a graphical representation that is used to
+                visualize the different types of entities that exist within a system.
               </p>
             </div>
           </div>
@@ -140,7 +199,8 @@ an object-oriented system.
         <div class="flex flex-wrap">
           <div class="w-full sm:w-1/2 p-6 flex items-center">
             <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-              Use State diagrams to model and document state machines, an abstract way of representing a system or an algorithm.
+              Use State diagrams to model and document state machines, an abstract way of
+              representing a system or an algorithm.
             </p>
           </div>
           <div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
@@ -148,19 +208,22 @@ an object-oriented system.
           </div>
         </div>
         <div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
-          <div class="w-full sm:w-1/2 p-6 mt-6 ">
+          <div class="w-full sm:w-1/2 p-6 mt-6">
             <img class="z-50 w-full" style="" src="gantt.png" />
           </div>
           <div class="w-full sm:w-1/2 p-6 mt-6">
             <div class="align-middle flex items-center">
               <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-                A Gantt chart is a graphical representation that is used to visualize and describe tasks (events or activities) over time.
+                A Gantt chart is a graphical representation that is used to visualize and describe
+                tasks (events or activities) over time.
               </p>
             </div>
           </div>
         </div>
       </div>
-      <p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">These were a few of the diagrams supported by Mermaid.</p>
+      <p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">
+        These were a few of the diagrams supported by Mermaid.
+      </p>
     </section>
 
     <section class="bg-gray-100 border-b py-8">
@@ -169,10 +232,32 @@ an object-oriented system.
           Book description
         </h1>
         <div class="w-full mb-4">
-          <p class="text-black mb-4">Mermaid lets you represent diagrams using text and code which simplifies the maintenance of complex diagrams. This is a great option for developers as they’re more familiar with code, rather than special tools for generating diagrams. Besides, diagrams in code simplify maintenance and ensure that the code is supported by version control systems. In some cases, Mermaid makes refactoring support for name changes possible while also enabling team collaboration for review distribution and updates.</p>
+          <p class="text-black mb-4">
-          <p class="text-black mb-4">Developers working with any system will be able to put their knowledge to work with this practical guide to using Mermaid for documentation. The book is also a great reference for looking up the syntax for specific diagrams when authoring diagrams.</p>
+            Mermaid lets you represent diagrams using text and code which simplifies the maintenance
-          <p class="text-black mb-4">You’ll start by getting up to speed with the importance of accurate and visual documentation. Next, the book introduces Mermaid and establishes how to use it to create effective documentation. By using different tools, editors, or a custom documentation platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later chapters cover advanced configuration settings and theme options to manipulate your diagram as per your needs.</p>
+            of complex diagrams. This is a great option for developers as they’re more familiar with
-          <p class="text-black mb-4">By the end of this Mermaid book, you’ll have become well-versed with the different types of Mermaid diagrams and how they can be used in your workflows.</p>
+            code, rather than special tools for generating diagrams. Besides, diagrams in code
+            simplify maintenance and ensure that the code is supported by version control systems.
+            In some cases, Mermaid makes refactoring support for name changes possible while also
+            enabling team collaboration for review distribution and updates.
+          </p>
+          <p class="text-black mb-4">
+            Developers working with any system will be able to put their knowledge to work with this
+            practical guide to using Mermaid for documentation. The book is also a great reference
+            for looking up the syntax for specific diagrams when authoring diagrams.
+          </p>
+          <p class="text-black mb-4">
+            You’ll start by getting up to speed with the importance of accurate and visual
+            documentation. Next, the book introduces Mermaid and establishes how to use it to create
+            effective documentation. By using different tools, editors, or a custom documentation
+            platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later
+            chapters cover advanced configuration settings and theme options to manipulate your
+            diagram as per your needs.
+          </p>
+          <p class="text-black mb-4">
+            By the end of this Mermaid book, you’ll have become well-versed with the different types
+            of Mermaid diagrams and how they can be used in your workflows.
+          </p>
+        </div>
       </div>
     </section>
     <section class="bg-white py-8">
@@ -187,12 +272,25 @@ an object-oriented system.
           <div class="flex flex-col mx-4 rounded-lg bg-white mt-4 sm:-mt-6 shadow-lg z-10">
             <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
               <ul class="w-full text-base font-bold px-4">
-                <li class="border-b py-4 px-4">Understand good and bad documentation, and the art of effective documentation</li>
+                <li class="border-b py-4 px-4">
-                <li class="border-b py-4 px-4">Become well-versed with maintaining complex diagrams with ease</li>
+                  Understand good and bad documentation, and the art of effective documentation
-                <li class="border-b py-4 px-4">Learn how to set up a custom documentation system</li>
+                </li>
-                <li class="border-b py-4 px-4">Learn how to implement Mermaid diagrams in your workflows</li>
+                <li class="border-b py-4 px-4">
-                <li class="border-b py-4 px-4">Understand how to set up themes for a Mermaid diagram for an entire site</li>
+                  Become well-versed with maintaining complex diagrams with ease
-                <li class="border-b py-4 px-4">Discover how to draw different types of diagrams such as flowcharts, class diagrams, Gantt charts, and more</li>
+                </li>
+                <li class="border-b py-4 px-4">
+                  Learn how to set up a custom documentation system
+                </li>
+                <li class="border-b py-4 px-4">
+                  Learn how to implement Mermaid diagrams in your workflows
+                </li>
+                <li class="border-b py-4 px-4">
+                  Understand how to set up themes for a Mermaid diagram for an entire site
+                </li>
+                <li class="border-b py-4 px-4">
+                  Discover how to draw different types of diagrams such as flowcharts, class
+                  diagrams, Gantt charts, and more
+                </li>
               </ul>
             </div>
           </div>
@@ -200,7 +298,13 @@ an object-oriented system.
       </div>
     </section>
     <!-- Change the colour #f8fafc to match the previous section colour -->
-    <svg class="wave-top" viewBox="0 0 1439 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg
+      class="wave-top"
+      viewBox="0 0 1439 147"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
       <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
           <g class="wave" fill="#f8fafc">
@@ -209,13 +313,21 @@ an object-oriented system.
             ></path>
           </g>
           <g transform="translate(1.000000, 15.000000)" fill="#FFFFFF">
-            <g transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) ">
+            <g
-              <path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
+              transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) "
+            >
+              <path
+                d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
+                opacity="0.100000001"
+              ></path>
               <path
                 d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
                 opacity="0.100000001"
               ></path>
-              <path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" opacity="0.200000003"></path>
+              <path
+                d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
+                opacity="0.200000003"
+              ></path>
             </g>
           </g>
         </g>
@@ -230,15 +342,40 @@ an object-oriented system.
       </div>
       <h3 class="my-4 text-3xl leading-tight">
         <p class="mb-4 p-shadow">Written by Knut Sveidqvist and Ashish Jain.</p>
-        <p class="p-shadow">Knut is the creator of Mermaid and both authors are active core team members of the Mermaid open-source project.</p>
+        <p class="p-shadow">
+          Knut is the creator of Mermaid and both authors are active core team members of the
+          Mermaid open-source project.
+        </p>
       </h3>
-      <a href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965">
+      <a
-        <button style="background: #FFA41C;border: 1px solid #FF8F00;" class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
+        href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965"
+      >
+        <button
+          style="background: #ffa41c; border: 1px solid #ff8f00"
+          class="
+            mx-auto
+            lg:mx-0
+            hover:underline
+            bg-white
+            text-gray-800
+            font-bold
+            rounded-full
+            my-6
+            py-4
+            px-8
+            shadow-lg
+            focus:outline-none focus:shadow-outline
+            transform
+            transition
+            hover:scale-105
+            duration-300
+            ease-in-out
+          "
+        >
           Purchase Now on Amazon
         </button>
       </a>
     </section>
     <!--Footer-->
-
   </body>
 </html>

package.json

@@ -27,7 +27,7 @@
     "postbuild": "documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md",
     "build:watch": "yarn build:development --watch",
     "release": "yarn build",
-    "lint": "eslint .",
+    "lint": "eslint ./ --ext js,html",
     "lint:fix": "yarn lint --fix",
     "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
     "cypress": "percy exec -- cypress run",
@@ -87,6 +87,7 @@
     "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-html": "^6.2.0",
     "eslint-plugin-jest": "^25.2.4",
     "eslint-plugin-jsdoc": "^37.0.3",
     "eslint-plugin-markdown": "^2.2.1",

yarn.lock

@@ -4768,6 +4768,20 @@ documentation@13.2.0:
     vue-template-compiler "^2.5.16"
     yargs "^15.3.1"
 
+dom-serializer@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
 domexception@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
@@ -4775,11 +4789,27 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
+domhandler@^4.2.0, domhandler@^4.2.2:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
+  integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
+  dependencies:
+    domelementtype "^2.2.0"
+
 dompurify@2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.3.tgz#c1af3eb88be47324432964d8abc75cf4b98d634c"
   integrity sha512-dqnqRkPMAjOZE0FogZ+ceJNM2dZ3V/yNOuFB7+39qpO93hHhfRpHw3heYQC7DPK9FqbQTfBKUJhiSfz4MvXYwg==
 
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 dot-prop@^5.1.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@@ -4897,6 +4927,16 @@ enquirer@^2.3.5, enquirer@^2.3.6:
   dependencies:
     ansi-colors "^4.1.1"
 
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+entities@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 envinfo@^7.7.3:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
@@ -4981,6 +5021,13 @@ eslint-plugin-cypress@^2.12.1:
   dependencies:
     globals "^11.12.0"
 
+eslint-plugin-html@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-6.2.0.tgz#715bc00b50bbd0d996e28f953c289a5ebec69d43"
+  integrity sha512-vi3NW0E8AJombTvt8beMwkL1R/fdRWl4QSNRNMhVQKWm36/X0KF0unGNAY4mqUF06mnwVWZcIcerrCnfn9025g==
+  dependencies:
+    htmlparser2 "^7.1.2"
+
 eslint-plugin-jest@^25.2.4:
   version "25.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-25.3.0.tgz#6c04bbf13624a75684a05391a825b58e2e291950"
@@ -5103,6 +5150,15 @@ espree@^9.2.0:
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^3.1.0"
 
+espree@^9.1.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.2.0.tgz#c50814e01611c2d0f8bd4daa83c369eabba80dbc"
+  integrity sha512-oP3utRkynpZWF/F2x/HZJ+AGtnIclaR7z1pYPxy7NYM2fSO6LgK/Rkny8anRSPK/VwEA1eqm2squui0T7ZMOBg==
+  dependencies:
+    acorn "^8.6.0"
+    acorn-jsx "^5.3.1"
+    eslint-visitor-keys "^3.1.0"
+
 esprima@1.1.x, esprima@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.1.1.tgz#5b6f1547f4d102e670e140c509be6771d6aeb549"
@@ -6099,6 +6155,16 @@ html-void-elements@^1.0.0:
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
   integrity sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==
 
+htmlparser2@^7.1.2:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5"
+  integrity sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.2"
+    domutils "^2.8.0"
+    entities "^3.0.1"
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"