diff --git a/.eslintrc.json b/.eslintrc.json
index 02753280c..b8053795e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -52,24 +52,25 @@
   },
   "overrides": [
     {
-      "files": "./**/*.html",
-      "rules": {
-        "no-undef": "off",
-        "jsdoc/require-jsdoc": "off"
-      }
-    },
-    {
-      "files": ["./cypress/**", "./demos/**"],
+      "files": ["cypress/**", "demos/**"],
       "rules": {
         "no-console": "off"
       }
     },
     {
-      "files": ["./**/*.spec.{ts,js}", "./cypress/**", "./demos/**", "./**/docs/**"],
+      "files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"],
       "rules": {
         "jsdoc/require-jsdoc": "off",
         "@typescript-eslint/no-unused-vars": "off"
       }
+    },
+    {
+      "files": ["*.html", "*.md", "**/*.md/*"],
+      "rules": {
+        "no-var": "error",
+        "no-undef": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
     }
   ]
 }
diff --git a/__mocks__/dagre-d3.ts b/__mocks__/dagre-d3.ts
index a1a677591..bf6d341dc 100644
--- a/__mocks__/dagre-d3.ts
+++ b/__mocks__/dagre-d3.ts
@@ -1,3 +1 @@
-import { vi } from 'vitest';
-
-// export const render = vi.fn();
+// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module.
diff --git a/cypress/platform/xss10.html b/cypress/platform/xss10.html
index 6a027f514..b39728c84 100644
--- a/cypress/platform/xss10.html
+++ b/cypress/platform/xss10.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'classDiagram\n';
+      let diagram = 'classDiagram\n';
       diagram += 'class Square~<img/src';
       diagram += "='1'/onerror=xssAttack()>~{\n";
       diagram += 'id A\n';
diff --git a/cypress/platform/xss11.html b/cypress/platform/xss11.html
index 9126ac823..ca97aeaab 100644
--- a/cypress/platform/xss11.html
+++ b/cypress/platform/xss11.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
       diagram += 's2 : This is a state description<img/src';
       diagram += "='1'/onerror=xssAttack()>";
 
diff --git a/cypress/platform/xss12.html b/cypress/platform/xss12.html
index 5f6a3f229..eb1bce327 100644
--- a/cypress/platform/xss12.html
+++ b/cypress/platform/xss12.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
       diagram += 's2 : A<img/src';
       diagram += "='1'/onerror=xssAttack()>";
 
diff --git a/cypress/platform/xss13.html b/cypress/platform/xss13.html
index 41e868d5c..f2d90cddb 100644
--- a/cypress/platform/xss13.html
+++ b/cypress/platform/xss13.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
       diagram += 'if_state --> False: if n < 0<img/src';
       diagram += "='1'/onerror=xssAttack()>";
 
diff --git a/cypress/platform/xss14.html b/cypress/platform/xss14.html
index f3bdf8605..f429b355a 100644
--- a/cypress/platform/xss14.html
+++ b/cypress/platform/xss14.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'classDiagram\n';
+      let diagram = 'classDiagram\n';
       diagram += 'classA <-- classB : <ifr';
       diagram += "ame/srcdoc='<scr";
       diagram += 'ipt>parent.xssAttack(`XSS`)</';
diff --git a/cypress/platform/xss15.html b/cypress/platform/xss15.html
index 5a3753d53..70ebe9f86 100644
--- a/cypress/platform/xss15.html
+++ b/cypress/platform/xss15.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `sequenceDiagram
+      let diagram = `sequenceDiagram
     participant John
     links John: {"XSS": "javas`;
       diagram += `cript:alert('AudioParam')"}`;
diff --git a/cypress/platform/xss16.html b/cypress/platform/xss16.html
index fe05206ce..9325a70aa 100644
--- a/cypress/platform/xss16.html
+++ b/cypress/platform/xss16.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `sequenceDiagram
+      let diagram = `sequenceDiagram
     participant Alice
     links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
 
diff --git a/cypress/platform/xss17.html b/cypress/platform/xss17.html
index 95b52fcc6..c498f3f3e 100644
--- a/cypress/platform/xss17.html
+++ b/cypress/platform/xss17.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `sequenceDiagram
+      let diagram = `sequenceDiagram
     participant Alice
     link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
 
diff --git a/cypress/platform/xss18.html b/cypress/platform/xss18.html
index 6fb8ec69e..3e9cfd35c 100644
--- a/cypress/platform/xss18.html
+++ b/cypress/platform/xss18.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `classDiagram
+      let diagram = `classDiagram
       Class "<img/src='x'/onerror=xssAttack(1)>" <--> "<img/src='x'/onerror=xssAttack(2)>" C2: Cool label`;
 
       // //   var diagram = "stateDiagram-v2\n";
diff --git a/cypress/platform/xss19.html b/cypress/platform/xss19.html
index 590a195aa..ca747b39e 100644
--- a/cypress/platform/xss19.html
+++ b/cypress/platform/xss19.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `classDiagram
+      let diagram = `classDiagram
 class Shape{
     <<<img/src='1'/`;
 
diff --git a/cypress/platform/xss2.html b/cypress/platform/xss2.html
index baedefcc6..18b4be6fc 100644
--- a/cypress/platform/xss2.html
+++ b/cypress/platform/xss2.html
@@ -54,9 +54,9 @@
         startOnLoad: true,
         useMaxWidth: true,
       });
-      var cnt = 0;
-      var a;
-      var handler = setInterval(() => {
+      let cnt = 0;
+      let a;
+      const handler = setInterval(() => {
         cnt++;
         a = {};
         if (typeof a.polluted !== 'undefined') {
diff --git a/cypress/platform/xss20.html b/cypress/platform/xss20.html
index 7b8aa9f85..9efd17215 100644
--- a/cypress/platform/xss20.html
+++ b/cypress/platform/xss20.html
@@ -96,7 +96,7 @@
       //       var diagram = `  graph TD
       // A --> B["&lt;a href='javasc`;
       // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
-      var diagram = `  graph TD
+      let diagram = `  graph TD
 A --> B["<a href='javasc`;
       diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
       // diagram += '//via.placeholder.com/64\' width=64 />"]';
diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html
index e65a357ee..fed0e4289 100644
--- a/cypress/platform/xss21.html
+++ b/cypress/platform/xss21.html
@@ -96,7 +96,7 @@
       //       var diagram = `  graph TD
       // A --> B["&lt;a href='javasc`;
       // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
-      var diagram = `  graph TD
+      let diagram = `  graph TD
 A --> B["<a href='javasc`;
       diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
       // diagram += '//via.placeholder.com/64\' width=64 />"]';
diff --git a/cypress/platform/xss3.html b/cypress/platform/xss3.html
index b72e8743c..78fabc4aa 100644
--- a/cypress/platform/xss3.html
+++ b/cypress/platform/xss3.html
@@ -42,9 +42,9 @@
         startOnLoad: true,
         useMaxWidth: true,
       });
-      var cnt = 0;
-      var a;
-      var handler = setInterval(() => {
+      let cnt = 0;
+      let a;
+      const handler = setInterval(() => {
         cnt++;
         a = {};
         if (typeof a.polluted !== 'undefined') {
diff --git a/cypress/platform/xss4.html b/cypress/platform/xss4.html
index b6e36edcd..924a65e08 100644
--- a/cypress/platform/xss4.html
+++ b/cypress/platform/xss4.html
@@ -85,7 +85,7 @@
         alert('It worked');
       }
 
-      var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
+      let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
       diagram += 'flowchart\n';
       diagram += 'A["<ifra';
       diagram += "me srcdoc='<scrip";
diff --git a/cypress/platform/xss5.html b/cypress/platform/xss5.html
index bf8943eee..f87e65505 100644
--- a/cypress/platform/xss5.html
+++ b/cypress/platform/xss5.html
@@ -92,7 +92,7 @@
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeeded');
       }
-      var diagram = 'graph LR\n';
+      let diagram = 'graph LR\n';
       diagram += 'B-->D("<img onerror=location=`java';
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
diff --git a/cypress/platform/xss6.html b/cypress/platform/xss6.html
index 0c70133b1..bc0f78561 100644
--- a/cypress/platform/xss6.html
+++ b/cypress/platform/xss6.html
@@ -92,7 +92,7 @@
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeeded');
       }
-      var diagram = 'graph LR\n';
+      let diagram = 'graph LR\n';
       diagram += 'A(<img/src/onerror=xssAttack`1`>)';
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);
diff --git a/cypress/platform/xss7.html b/cypress/platform/xss7.html
index 667a77d33..d8b2a7620 100644
--- a/cypress/platform/xss7.html
+++ b/cypress/platform/xss7.html
@@ -92,7 +92,7 @@
         document.getElementsByTagName('body')[0].appendChild(div);
         throw new Error('XSS Succeeded');
       }
-      var diagram = 'graph LR\n';
+      let diagram = 'graph LR\n';
       diagram += " B(<a href='<";
       diagram += 'script></';
       diagram += "script>Javascript:xssAttack`1`'>Click)";
diff --git a/cypress/platform/xss8.html b/cypress/platform/xss8.html
index 64211c778..cf2969f39 100644
--- a/cypress/platform/xss8.html
+++ b/cypress/platform/xss8.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
       diagram += "<img/src='1'/onerror=xssAttack()> --> B";
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);
diff --git a/cypress/platform/xss9.html b/cypress/platform/xss9.html
index 09c1d7f20..916f1506d 100644
--- a/cypress/platform/xss9.html
+++ b/cypress/platform/xss9.html
@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = 'stateDiagram-v2\n';
+      let diagram = 'stateDiagram-v2\n';
       diagram += "<img/src='1'/onerror=xssAttack()> --> B";
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);
diff --git a/demos/c4context.html b/demos/c4context.html
index ec7197b98..e085e611c 100644
--- a/demos/c4context.html
+++ b/demos/c4context.html
@@ -277,7 +277,7 @@
     <script>
       function testClick(nodeId) {
         console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
         document.querySelector('body').style.backgroundColor = 'yellow';
         setTimeout(function () {
           document.querySelector('body').style.backgroundColor = originalBgColor;
diff --git a/demos/dataflowchart.html b/demos/dataflowchart.html
index dc7fe05af..d49118ae0 100644
--- a/demos/dataflowchart.html
+++ b/demos/dataflowchart.html
@@ -46,7 +46,7 @@
     <script>
       function testClick(nodeId) {
         console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
         document.querySelector('body').style.backgroundColor = 'yellow';
         setTimeout(function () {
           document.querySelector('body').style.backgroundColor = originalBgColor;
diff --git a/demos/flowchart.html b/demos/flowchart.html
index a3c139c6b..e11bfcb26 100644
--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@@ -1513,7 +1513,7 @@
     <script>
       function testClick(nodeId) {
         console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
         document.querySelector('body').style.backgroundColor = 'yellow';
         setTimeout(function () {
           document.querySelector('body').style.backgroundColor = originalBgColor;
diff --git a/demos/gantt.html b/demos/gantt.html
index f53dae279..749208f99 100644
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -174,7 +174,7 @@
       }
       function testClick(nodeId) {
         console.log('clicked', nodeId);
-        var originalBgColor = document.querySelector('body').style.backgroundColor;
+        let originalBgColor = document.querySelector('body').style.backgroundColor;
         document.querySelector('body').style.backgroundColor = 'yellow';
         setTimeout(function () {
           document.querySelector('body').style.backgroundColor = originalBgColor;
diff --git a/docs/Setup.md b/docs/Setup.md
index dec513498..82e4e2fe8 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -1561,7 +1561,7 @@ Returns **void**
 
 ```html
 <script>
-  var config = {
+  const config = {
     theme: 'default',
     logLevel: 'fatal',
     securityLevel: 'strict',
diff --git a/docs/classDiagram.md b/docs/classDiagram.md
index 529933b98..60dc6c390 100644
--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@@ -589,7 +589,7 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
 
 ```html
 <script>
-  var callbackFunction = function () {
+  const callbackFunction = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -653,10 +653,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };
diff --git a/docs/diagrams-and-syntax-and-examples/flowchart.md b/docs/diagrams-and-syntax-and-examples/flowchart.md
index a55c6292a..fee683551 100644
--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/docs/diagrams-and-syntax-and-examples/flowchart.md
@@ -649,7 +649,7 @@ A node can have click events bound that lead to either a JavaScript callback or
 
 ```html
 <script>
-  var callback = function (nodeId) {
+  const callback = function (nodeId) {
     alert('A callback was triggered on ' + nodeId);
   };
 </script>
@@ -727,10 +727,10 @@ Beginner's tip—here's a full example of using interactive links in HTML:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       flowchart: {
         useMaxWidth: true,
diff --git a/docs/flowchart.md b/docs/flowchart.md
index fd2c95ffe..0ca87d975 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -695,7 +695,7 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function () {
+  const callback = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -771,10 +771,10 @@ Beginner's tip—a full example using interactive links in a html context:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
       securityLevel: 'loose',
diff --git a/docs/gantt.md b/docs/gantt.md
index 9246f24dd..9d4fe8a09 100644
--- a/docs/gantt.md
+++ b/docs/gantt.md
@@ -391,13 +391,13 @@ Beginner's tip—a full example using interactive links in an html context:
   </pre>
 
   <script>
-    var printArguments = function (arg1, arg2, arg3) {
+    const printArguments = function (arg1, arg2, arg3) {
       alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
     };
-    var printTask = function (taskId) {
+    const printTask = function (taskId) {
       alert('taskId: ' + taskId);
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };
diff --git a/docs/index.html b/docs/index.html
index c4eb48af8..5c0a6f0a4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -29,7 +29,7 @@
       src="https://plausible.io/js/plausible.js"
     ></script>
     <script>
-      var require = {
+      const require = {
         paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
       };
     </script>
@@ -51,16 +51,16 @@
   <body>
     <div id="app"></div>
     <script>
-      var initEditor = exports.default;
-      var parser = new DOMParser();
-      var currentCodeExample = 0;
-      var colorize = [];
+      let initEditor = exports.default;
+      let parser = new DOMParser();
+      let currentCodeExample = 0;
+      let colorize = [];
 
       function colorizeEverything(html) {
         initEditor(monaco);
         return new Promise((resolve, reject) => {
           monaco.editor.setTheme('mermaid');
-          var parsed = parser.parseFromString(html, 'text/html').body;
+          let parsed = parser.parseFromString(html, 'text/html').body;
           Promise.all(
             [...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
               monaco.editor.colorize(codeBlock.innerText, 'mermaid')
@@ -117,7 +117,7 @@
           function (hook, vm) {
             hook.beforeEach(function (html) {
               url = 'https://github.com/mermaid-js/mermaid/blob/develop/src/docs/' + vm.route.file;
-              var editHtml = '[:memo: Edit this Page](' + url + ')\n';
+              let editHtml = '[:memo: Edit this Page](' + url + ')\n';
               return editHtml + html;
             });
 
@@ -136,7 +136,6 @@
         ],
       };
 
-      var num = 0;
       const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
       const conf = {
diff --git a/docs/usage.md b/docs/usage.md
index be986a56b..c804d0f05 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -208,14 +208,14 @@ The example below show an outline of how this could be used. The example just lo
 
 <script>
   mermaid.mermaidAPI.initialize({ startOnLoad: false });
-  $(function () {
+  $(async function () {
     // Example of using the API var
     element = document.querySelector('#graphDiv');
-    var insertSvg = function (svgCode, bindFunctions) {
+    const insertSvg = function (svgCode, bindFunctions) {
       element.innerHTML = svgCode;
     };
-    var graphDefinition = 'graph TB\na-->b';
-    var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+    const graphDefinition = 'graph TB\na-->b';
+    const graph = await mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
   });
 </script>
 ```
@@ -339,7 +339,7 @@ on what kind of integration you use.
 ```html
 <script src="../dist/mermaid.js"></script>
 <script>
-  var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
+  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
   mermaid.initialize(config);
 </script>
 ```
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
 <script>
-  var config = {
+  const config = {
     theme: 'default',
     logLevel: 'fatal',
     securityLevel: 'strict',
diff --git a/packages/mermaid/src/docs/classDiagram.md b/packages/mermaid/src/docs/classDiagram.md
index f46d3689c..362e90bc6 100644
--- a/packages/mermaid/src/docs/classDiagram.md
+++ b/packages/mermaid/src/docs/classDiagram.md
@@ -399,7 +399,7 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
 
 ```html
 <script>
-  var callbackFunction = function () {
+  const callbackFunction = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -451,10 +451,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };
diff --git a/packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md b/packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md
index 252faadc2..cd6ab221b 100644
--- a/packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/packages/mermaid/src/docs/diagrams-and-syntax-and-examples/flowchart.md
@@ -416,7 +416,7 @@ click nodeId call callback()
 
 ```html
 <script>
-  var callback = function (nodeId) {
+  const callback = function (nodeId) {
     alert('A callback was triggered on ' + nodeId);
   };
 </script>
@@ -471,10 +471,10 @@ Beginner's tip—here's a full example of using interactive links in HTML:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       flowchart: {
         useMaxWidth: true,
diff --git a/packages/mermaid/src/docs/flowchart.md b/packages/mermaid/src/docs/flowchart.md
index 4bf80a6c0..3560334af 100644
--- a/packages/mermaid/src/docs/flowchart.md
+++ b/packages/mermaid/src/docs/flowchart.md
@@ -442,7 +442,7 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function () {
+  const callback = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -495,10 +495,10 @@ Beginner's tip—a full example using interactive links in a html context:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
       securityLevel: 'loose',
diff --git a/packages/mermaid/src/docs/gantt.md b/packages/mermaid/src/docs/gantt.md
index cd0ef6b03..ad6573db6 100644
--- a/packages/mermaid/src/docs/gantt.md
+++ b/packages/mermaid/src/docs/gantt.md
@@ -327,13 +327,13 @@ Beginner's tip—a full example using interactive links in an html context:
   </pre>
 
   <script>
-    var printArguments = function (arg1, arg2, arg3) {
+    const printArguments = function (arg1, arg2, arg3) {
       alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
     };
-    var printTask = function (taskId) {
+    const printTask = function (taskId) {
       alert('taskId: ' + taskId);
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };
diff --git a/packages/mermaid/src/docs/index.html b/packages/mermaid/src/docs/index.html
index ea3969c77..2a275fef7 100644
--- a/packages/mermaid/src/docs/index.html
+++ b/packages/mermaid/src/docs/index.html
@@ -29,7 +29,7 @@
       src="https://plausible.io/js/plausible.js"
     ></script>
     <script>
-      var require = {
+      const require = {
         paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
       };
     </script>
@@ -51,16 +51,16 @@
   <body>
     <div id="app"></div>
     <script>
-      var initEditor = exports.default;
-      var parser = new DOMParser();
-      var currentCodeExample = 0;
-      var colorize = [];
+      let initEditor = exports.default;
+      let parser = new DOMParser();
+      let currentCodeExample = 0;
+      let colorize = [];
 
       function colorizeEverything(html) {
         initEditor(monaco);
         return new Promise((resolve, reject) => {
           monaco.editor.setTheme('mermaid');
-          var parsed = parser.parseFromString(html, 'text/html').body;
+          let parsed = parser.parseFromString(html, 'text/html').body;
           Promise.all(
             [...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
               monaco.editor.colorize(codeBlock.innerText, 'mermaid')
@@ -117,7 +117,7 @@
           function (hook, vm) {
             hook.beforeEach(function (html) {
               url = 'https://github.com/mermaid-js/mermaid/blob/develop/src/docs/' + vm.route.file;
-              var editHtml = '[:memo: Edit this Page](' + url + ')\n';
+              let editHtml = '[:memo: Edit this Page](' + url + ')\n';
               return editHtml + html;
             });
 
@@ -136,7 +136,6 @@
         ],
       };
 
-      var num = 0;
       const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
       const conf = {
diff --git a/packages/mermaid/src/docs/usage.md b/packages/mermaid/src/docs/usage.md
index 026625894..3293fe78c 100644
--- a/packages/mermaid/src/docs/usage.md
+++ b/packages/mermaid/src/docs/usage.md
@@ -208,14 +208,14 @@ The example below show an outline of how this could be used. The example just lo
 
 <script>
   mermaid.mermaidAPI.initialize({ startOnLoad: false });
-  $(function () {
+  $(async function () {
     // Example of using the API var
     element = document.querySelector('#graphDiv');
-    var insertSvg = function (svgCode, bindFunctions) {
+    const insertSvg = function (svgCode, bindFunctions) {
       element.innerHTML = svgCode;
     };
-    var graphDefinition = 'graph TB\na-->b';
-    var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+    const graphDefinition = 'graph TB\na-->b';
+    const graph = await mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
   });
 </script>
 ```
@@ -339,7 +339,7 @@ on what kind of integration you use.
 ```html
 <script src="../dist/mermaid.js"></script>
 <script>
-  var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
+  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
   mermaid.initialize(config);
 </script>
 ```
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
 <script>
-  var config = {
+  const config = {
     theme: 'default',
     logLevel: 'fatal',
     securityLevel: 'strict',
diff --git a/vdocs/config/usage.md b/vdocs/config/usage.md
index 10b3b7238..d51b966ba 100644
--- a/vdocs/config/usage.md
+++ b/vdocs/config/usage.md
@@ -211,11 +211,11 @@ The example below show an outline of how this could be used. The example just lo
   $(function () {
     // Example of using the API var
     element = document.querySelector('#graphDiv');
-    var insertSvg = function (svgCode, bindFunctions) {
+    const insertSvg = function (svgCode, bindFunctions) {
       element.innerHTML = svgCode;
     };
-    var graphDefinition = 'graph TB\na-->b';
-    var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+    const graphDefinition = 'graph TB\na-->b';
+    const graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
   });
 </script>
 ```
@@ -339,7 +339,7 @@ on what kind of integration you use.
 ```html
 <script src="../dist/mermaid.js"></script>
 <script>
-  var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
+  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
   mermaid.initialize(config);
 </script>
 ```
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
 <script>
-  var callbackFunction = function () {
+  const callbackFunction = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -451,10 +451,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };
diff --git a/vdocs/syntax/flowchart.md b/vdocs/syntax/flowchart.md
index 21c0b9145..cbec4ae62 100644
--- a/vdocs/syntax/flowchart.md
+++ b/vdocs/syntax/flowchart.md
@@ -449,7 +449,7 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function () {
+  const callback = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -502,10 +502,10 @@ Beginner's tip—a full example using interactive links in a html context:
   </pre>
 
   <script>
-    var callback = function () {
+    const callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
       securityLevel: 'loose',
diff --git a/vdocs/syntax/gantt.md b/vdocs/syntax/gantt.md
index 5ed4c7601..755f50b1e 100644
--- a/vdocs/syntax/gantt.md
+++ b/vdocs/syntax/gantt.md
@@ -327,13 +327,13 @@ Beginner's tip—a full example using interactive links in an html context:
   </pre>
 
   <script>
-    var printArguments = function (arg1, arg2, arg3) {
+    const printArguments = function (arg1, arg2, arg3) {
       alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
     };
-    var printTask = function (taskId) {
+    const printTask = function (taskId) {
       alert('taskId: ' + taskId);
     };
-    var config = {
+    const config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };