Add no-var rule.

.eslintrc.json

@@ -25,6 +25,7 @@
   "rules": {
     "no-prototype-builtins": "off",
     "no-unused-vars": "off",
+    "no-var": "error",
     "jsdoc/check-indentation": "off",
     "jsdoc/check-alignment": "off",
     "jsdoc/check-line-alignment": "off",

cypress.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
 require('@applitools/eyes-cypress')(module);

cypress/platform/rerender.html

@@ -17,9 +17,9 @@
       rerender('XMas');
 
       function rerender(text) {
-        var graphText = `graph TD
+        let graphText = `graph TD
         A[${text}] -->|Get money| B(Go shopping)`;
-        var graph = mermaid.mermaidAPI.render('id', graphText);
+        let graph = mermaid.mermaidAPI.render('id', graphText);
         console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
         document.getElementById('graph').innerHTML = graph;
       }

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';

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()>";
 

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()>";
 

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()>";
 

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`)</';

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')"}`;

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')" }`;
 

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")`;
 

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

cypress/platform/xss19.html

@@ -93,7 +93,7 @@
         throw new Error('XSS Succeeded');
       }
 
-      var diagram = `classDiagram
+      let diagram = `classDiagram
 class Shape{
     <<<img/src='1'/`;
 

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;
+      let handler = setInterval(() => {
         cnt++;
         a = {};
         if (typeof a.polluted !== 'undefined') {

cypress/platform/xss20.html

@@ -96,7 +96,7 @@
       //       var diagram = `  graph TD
       // A --> B["<a href='javasc`;
       // diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
-      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 />"]';

cypress/platform/xss21.html

@@ -96,7 +96,7 @@
       //       var diagram = `  graph TD
       // A --> B["<a href='javasc`;
       // diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
-      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 />"]';

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;
+      let handler = setInterval(() => {
         cnt++;
         a = {};
         if (typeof a.polluted !== 'undefined') {

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

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';

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);

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)";

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);

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);

cypress/plugins/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //

demos/dataflowchart.html

@@ -42,7 +42,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;

demos/flowchart.html

@@ -1101,7 +1101,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;

demos/index.html

@@ -1073,7 +1073,7 @@ Enterprise_Boundary(b0, "BankBoundary0") {
       }
       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;

docs/Setup.md

@@ -1553,7 +1553,7 @@ Returns **void**
 
 ```html
 <script>
-  var config = {
+  let config = {
     theme: 'default',
     logLevel: 'fatal',
     securityLevel: 'strict',

docs/classDiagram.md

@@ -558,7 +558,7 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
 
 ```html
 <script>
-  var callbackFunction = function () {
+  let callbackFunction = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -622,10 +622,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
   </pre>
 
   <script>
-    var callback = function () {
+    let callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    let config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };

docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -641,7 +641,7 @@ A node can have click events bound that lead to either a JavaScript callback or
 
 ```html
 <script>
-  var callback = function (nodeId) {
+  let callback = function (nodeId) {
     alert('A callback was triggered on ' + nodeId);
   };
 </script>
@@ -719,10 +719,10 @@ Beginner's tip—here's a full example of using interactive links in HTML:
   </pre>
 
   <script>
-    var callback = function () {
+    let callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    let config = {
       startOnLoad: true,
       flowchart: {
         useMaxWidth: true,

docs/flowchart.md

@@ -685,7 +685,7 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function () {
+  let callback = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -761,10 +761,10 @@ Beginner's tip—a full example using interactive links in a html context:
   </pre>
 
   <script>
-    var callback = function () {
+    let callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    let config = {
       startOnLoad: true,
       flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
       securityLevel: 'loose',

docs/gantt.md

@@ -377,13 +377,13 @@ Beginner's tip—a full example using interactive links in an html context:
   </pre>
 
   <script>
-    var printArguments = function (arg1, arg2, arg3) {
+    let printArguments = function (arg1, arg2, arg3) {
       alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
     };
-    var printTask = function (taskId) {
+    let printTask = function (taskId) {
       alert('taskId: ' + taskId);
     };
-    var config = {
+    let config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };

docs/index.html

@@ -38,7 +38,7 @@
       }
     </script>
     <script>
-      var require = {
+      let require = {
         paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
       };
     </script>
@@ -60,16 +60,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')
@@ -126,7 +126,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;
             });
 
@@ -145,7 +145,7 @@
         ],
       };
 
-      var num = 0;
+      let num = 0;
       const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
       const conf = {

docs/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) {
+    let insertSvg = function (svgCode, bindFunctions) {
       element.innerHTML = svgCode;
     };
-    var graphDefinition = 'graph TB\na-->b';
-    var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+    let graphDefinition = 'graph TB\na-->b';
+    let 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>
 ```

src/dagre-wrapper/edges.js

@@ -348,7 +348,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
   let points = edge.points;
   let pointsHasChanged = false;
   const tail = graph.node(e.v);
-  var head = graph.node(e.w);
+  let head = graph.node(e.w);
 
   log.info('abc88 InsertEdge: ', edge);
   if (head.intersect && tail.intersect) {

src/dagre-wrapper/intersect/intersect-ellipse.js

@@ -7,19 +7,19 @@
 function intersectEllipse(node, rx, ry, point) {
   // Formulae from: https://mathworld.wolfram.com/Ellipse-LineIntersection.html
 
-  var cx = node.x;
-  var cy = node.y;
+  let cx = node.x;
+  let cy = node.y;
 
-  var px = cx - point.x;
-  var py = cy - point.y;
+  let px = cx - point.x;
+  let py = cy - point.y;
 
-  var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);
+  let det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);
 
-  var dx = Math.abs((rx * ry * px) / det);
+  let dx = Math.abs((rx * ry * px) / det);
   if (point.x < cx) {
     dx = -dx;
   }
-  var dy = Math.abs((rx * ry * py) / det);
+  let dy = Math.abs((rx * ry * py) / det);
   if (point.y < cy) {
     dy = -dy;
   }

src/dagre-wrapper/intersect/intersect-line.js

@@ -10,10 +10,10 @@ function intersectLine(p1, p2, q1, q2) {
   // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
   // p7 and p473.
 
-  var a1, a2, b1, b2, c1, c2;
-  var r1, r2, r3, r4;
-  var denom, offset, num;
-  var x, y;
+  let a1, a2, b1, b2, c1, c2;
+  let r1, r2, r3, r4;
+  let denom, offset, num;
+  let x, y;
 
   // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
   // b1 y + c1 = 0.

src/dagre-wrapper/intersect/intersect-polygon.js

@@ -13,13 +13,13 @@ export default intersectPolygon;
  * @param point
  */
 function intersectPolygon(node, polyPoints, point) {
-  var x1 = node.x;
-  var y1 = node.y;
+  let x1 = node.x;
+  let y1 = node.y;
 
-  var intersections = [];
+  let intersections = [];
 
-  var minX = Number.POSITIVE_INFINITY;
-  var minY = Number.POSITIVE_INFINITY;
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
   if (typeof polyPoints.forEach === 'function') {
     polyPoints.forEach(function (entry) {
       minX = Math.min(minX, entry.x);
@@ -30,13 +30,13 @@ function intersectPolygon(node, polyPoints, point) {
     minY = Math.min(minY, polyPoints.y);
   }
 
-  var left = x1 - node.width / 2 - minX;
-  var top = y1 - node.height / 2 - minY;
+  let left = x1 - node.width / 2 - minX;
+  let top = y1 - node.height / 2 - minY;
 
-  for (var i = 0; i < polyPoints.length; i++) {
-    var p1 = polyPoints[i];
-    var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
-    var intersect = intersectLine(
+  for (let i = 0; i < polyPoints.length; i++) {
+    let p1 = polyPoints[i];
+    let p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
+    let intersect = intersectLine(
       node,
       point,
       { x: left + p1.x, y: top + p1.y },
@@ -55,13 +55,13 @@ function intersectPolygon(node, polyPoints, point) {
   if (intersections.length > 1) {
     // More intersections, find the one nearest to edge end point
     intersections.sort(function (p, q) {
-      var pdx = p.x - point.x;
-      var pdy = p.y - point.y;
-      var distp = Math.sqrt(pdx * pdx + pdy * pdy);
+      let pdx = p.x - point.x;
+      let pdy = p.y - point.y;
+      let distp = Math.sqrt(pdx * pdx + pdy * pdy);
 
-      var qdx = q.x - point.x;
-      var qdy = q.y - point.y;
-      var distq = Math.sqrt(qdx * qdx + qdy * qdy);
+      let qdx = q.x - point.x;
+      let qdy = q.y - point.y;
+      let distq = Math.sqrt(qdx * qdx + qdy * qdy);
 
       return distp < distq ? -1 : distp === distq ? 0 : 1;
     });

src/dagre-wrapper/intersect/intersect-rect.js

@@ -1,15 +1,15 @@
 const intersectRect = (node, point) => {
-  var x = node.x;
-  var y = node.y;
+  let x = node.x;
+  let y = node.y;
 
   // Rectangle intersection algorithm from:
   // https://math.stackexchange.com/questions/108113/find-edge-between-two-boxes
-  var dx = point.x - x;
-  var dy = point.y - y;
-  var w = node.width / 2;
-  var h = node.height / 2;
+  let dx = point.x - x;
+  let dy = point.y - y;
+  let w = node.width / 2;
+  let h = node.height / 2;
 
-  var sx, sy;
+  let sx, sy;
   if (Math.abs(dy) * w > Math.abs(dx) * h) {
     // Intersection is top or bottom of rect.
     if (dy < 0) {

src/diagrams/c4/c4Db.js

@@ -24,7 +24,7 @@ let wrapEnabled = false;
 let description = '';
 let c4ShapeInRow = 4;
 let c4BoundaryInRow = 2;
-var c4Type;
+let c4Type;
 
 export const getC4Type = function () {
   return c4Type;

src/diagrams/c4/svgDraw.js

@@ -38,7 +38,7 @@ export const drawEmbeddedImage = function (elem, x, y, link) {
   const imageElem = elem.append('use');
   imageElem.attr('x', x);
   imageElem.attr('y', y);
-  var sanitizedLink = sanitizeUrl(link);
+  let sanitizedLink = sanitizeUrl(link);
   imageElem.attr('xlink:href', '#' + sanitizedLink);
 };
 

src/diagrams/class/svgDraw.js

@@ -249,7 +249,7 @@ export const drawClass = function (elem, classDef, conf, diagObj) {
   });
 
   const classBox = g.node().getBBox();
-  var cssClassStr = ' ';
+  let cssClassStr = ' ';
 
   if (classDef.cssClasses.length > 0) {
     cssClassStr = cssClassStr + classDef.cssClasses.join(' ');

src/diagrams/flowchart/flowRenderer-v2.js

@@ -206,7 +206,7 @@ export const addEdges = function (edges, g, diagObj) {
     cnt++;
 
     // Identify Link
-    var linkIdBase = 'L-' + edge.start + '-' + edge.end;
+    let linkIdBase = 'L-' + edge.start + '-' + edge.end;
     // count the links from+to the same node to give unique id
     if (typeof linkIdCnt[linkIdBase] === 'undefined') {
       linkIdCnt[linkIdBase] = 0;
@@ -217,8 +217,8 @@ export const addEdges = function (edges, g, diagObj) {
     }
     let linkId = linkIdBase + '-' + linkIdCnt[linkIdBase];
     log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
-    var linkNameStart = 'LS-' + edge.start;
-    var linkNameEnd = 'LE-' + edge.end;
+    let linkNameStart = 'LS-' + edge.start;
+    let linkNameEnd = 'LE-' + edge.end;
 
     const edgeData = { style: '', labelStyle: '' };
     edgeData.minlen = edge.length || 1;

src/diagrams/flowchart/flowRenderer.js

@@ -178,9 +178,9 @@ export const addEdges = function (edges, g, diagObj) {
     cnt++;
 
     // Identify Link
-    var linkId = 'L-' + edge.start + '-' + edge.end;
-    var linkNameStart = 'LS-' + edge.start;
-    var linkNameEnd = 'LE-' + edge.end;
+    let linkId = 'L-' + edge.start + '-' + edge.end;
+    let linkNameStart = 'LS-' + edge.start;
+    let linkNameEnd = 'LE-' + edge.end;
 
     const edgeData = {};
 

src/diagrams/gantt/ganttRenderer.js

@@ -399,10 +399,10 @@ export const draw = function (text, id, version, diagObj) {
           return typeof links[d.id] !== 'undefined';
         })
         .each(function (o) {
-          var taskRect = doc.querySelector('#' + o.id);
-          var taskText = doc.querySelector('#' + o.id + '-text');
+          let taskRect = doc.querySelector('#' + o.id);
+          let taskText = doc.querySelector('#' + o.id + '-text');
           const oldParent = taskRect.parentNode;
-          var Link = doc.createElement('a');
+          let Link = doc.createElement('a');
           Link.setAttribute('xlink:href', links[o.id]);
           Link.setAttribute('target', '_top');
           oldParent.appendChild(Link);

src/diagrams/info/infoDb.js

@@ -1,8 +1,8 @@
 /** Created by knut on 15-01-14. */
 import { log } from '../../logger';
 
-var message = '';
-var info = false;
+let message = '';
+let info = false;
 
 export const setMessage = (txt) => {
   log.debug('Setting message to: ' + txt);

src/diagrams/mindmap/info.spc.js

@@ -1,5 +1,5 @@
 describe('when parsing an info graph it', function () {
-  var ex;
+  let ex;
   beforeEach(function () {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     ex = require('./parser/info').parser;
@@ -7,7 +7,7 @@ describe('when parsing an info graph it', function () {
   });
 
   it('should handle an info definition', function () {
-    var str = `info
+    let str = `info
     showInfo`;
 
     ex.parse(str);

src/diagrams/mindmap/infoDb.js

@@ -1,8 +1,8 @@
 /** Created by knut on 15-01-14. */
 import { log } from '../../logger';
 
-var message = '';
-var info = false;
+let message = '';
+let info = false;
 
 export const setMessage = (txt) => {
   log.debug('Setting message to: ' + txt);

src/diagrams/pie/pieRenderer.js

@@ -58,24 +58,24 @@ export const draw = (txt, id, _version, diagObj) => {
     elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
 
     // Fetch the default direction, use TD if none was found
-    var margin = 40;
-    var legendRectSize = 18;
-    var legendSpacing = 4;
+    let margin = 40;
+    let legendRectSize = 18;
+    let legendSpacing = 4;
 
-    var radius = Math.min(width, height) / 2 - margin;
+    let radius = Math.min(width, height) / 2 - margin;
 
-    var svg = diagram
+    let svg = diagram
       .append('g')
       .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
 
-    var data = diagObj.db.getSections();
-    var sum = 0;
+    let data = diagObj.db.getSections();
+    let sum = 0;
     Object.keys(data).forEach(function (key) {
       sum += data[key];
     });
 
     const themeVariables = conf.themeVariables;
-    var myGeneratedColors = [
+    let myGeneratedColors = [
       themeVariables.pie1,
       themeVariables.pie2,
       themeVariables.pie3,
@@ -91,16 +91,16 @@ export const draw = (txt, id, _version, diagObj) => {
     ];
 
     // Set the color scale
-    var color = scaleOrdinal().range(myGeneratedColors);
+    let color = scaleOrdinal().range(myGeneratedColors);
 
     // Compute the position of each group on the pie:
-    var pie = d3pie().value(function (d) {
+    let pie = d3pie().value(function (d) {
       return d[1];
     });
-    var dataReady = pie(Object.entries(data));
+    let dataReady = pie(Object.entries(data));
 
     // Shape helper to build arcs:
-    var arcGenerator = arc().innerRadius(0).outerRadius(radius);
+    let arcGenerator = arc().innerRadius(0).outerRadius(radius);
 
     // Build the pie chart: each part of the pie is a path that we build using the arc function.
     svg
@@ -138,17 +138,17 @@ export const draw = (txt, id, _version, diagObj) => {
       .attr('class', 'pieTitleText');
 
     // Add the legends/annotations for each section
-    var legend = svg
+    let legend = svg
       .selectAll('.legend')
       .data(color.domain())
       .enter()
       .append('g')
       .attr('class', 'legend')
       .attr('transform', function (d, i) {
-        var height = legendRectSize + legendSpacing;
-        var offset = (height * color.domain().length) / 2;
-        var horz = 12 * legendRectSize;
-        var vert = i * height - offset;
+        let height = legendRectSize + legendSpacing;
+        let offset = (height * color.domain().length) / 2;
+        let horz = 12 * legendRectSize;
+        let vert = i * height - offset;
         return 'translate(' + horz + ',' + vert + ')';
       });
 

src/diagrams/sequence/sequenceDb.js

@@ -259,11 +259,11 @@ export const addALink = function (actorId, text) {
   try {
     const links = {};
     let sanitizedText = sanitizeText(text.text, configApi.getConfig());
-    var sep = sanitizedText.indexOf('@');
+    let sep = sanitizedText.indexOf('@');
     sanitizedText = sanitizedText.replace(/&/g, '&');
     sanitizedText = sanitizedText.replace(/=/g, '=');
-    var label = sanitizedText.slice(0, sep - 1).trim();
-    var link = sanitizedText.slice(sep + 1).trim();
+    let label = sanitizedText.slice(0, sep - 1).trim();
+    let link = sanitizedText.slice(sep + 1).trim();
 
     links[label] = link;
     // add the deserialized text to the actor's links field.

src/diagrams/sequence/sequenceRenderer.js

@@ -494,12 +494,12 @@ export const drawActors = function (
 };
 
 export const drawActorsPopup = function (diagram, actors, actorKeys, doc) {
-  var maxHeight = 0;
-  var maxWidth = 0;
+  let maxHeight = 0;
+  let maxWidth = 0;
   for (let i = 0; i < actorKeys.length; i++) {
     const actor = actors[actorKeys[i]];
     const minMenuWidth = getRequiredPopupWidth(actor);
-    var menuDimensions = svgDraw.drawPopup(
+    let menuDimensions = svgDraw.drawPopup(
       diagram,
       actor,
       minMenuWidth,
@@ -846,7 +846,7 @@ export const draw = function (_text, id, _version, diagObj) {
   }
 
   // only draw popups for the top row of actors.
-  var requiredBoxSize = drawActorsPopup(diagram, actors, actorKeys, doc);
+  let requiredBoxSize = drawActorsPopup(diagram, actors, actorKeys, doc);
 
   const { bounds: box } = bounds.getBounds();
 

src/diagrams/sequence/svgDraw.js

@@ -49,7 +49,7 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
   const actorCnt = actor.actorCnt;
   const rectData = actor.rectData;
 
-  var displayValue = 'none';
+  let displayValue = 'none';
   if (forceMenus) {
     displayValue = 'block !important';
   }
@@ -59,7 +59,7 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
   g.attr('class', 'actorPopupMenu');
   g.attr('display', displayValue);
   addPopupInteraction('#actor' + actorCnt + '_popup', actorCnt);
-  var actorClass = '';
+  let actorClass = '';
   if (typeof rectData.class !== 'undefined') {
     actorClass = ' ' + rectData.class;
   }
@@ -76,11 +76,11 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
   rectElem.attr('height', rectData.height);
   rectElem.attr('rx', rectData.rx);
   rectElem.attr('ry', rectData.ry);
+  let linkY = 20;
   if (links != null) {
-    var linkY = 20;
     for (let key in links) {
-      var linkElem = g.append('a');
-      var sanitizedLink = sanitizeUrl(links[key]);
+      let linkElem = g.append('a');
+      let sanitizedLink = sanitizeUrl(links[key]);
       linkElem.attr('xlink:href', sanitizedLink);
       linkElem.attr('target', '_blank');
 
@@ -108,7 +108,7 @@ export const drawImage = function (elem, x, y, link) {
   const imageElem = elem.append('image');
   imageElem.attr('x', x);
   imageElem.attr('y', y);
-  var sanitizedLink = sanitizeUrl(link);
+  let sanitizedLink = sanitizeUrl(link);
   imageElem.attr('xlink:href', sanitizedLink);
 };
 
@@ -116,7 +116,7 @@ export const drawEmbeddedImage = function (elem, x, y, link) {
   const imageElem = elem.append('use');
   imageElem.attr('x', x);
   imageElem.attr('y', y);
-  var sanitizedLink = sanitizeUrl(link);
+  let sanitizedLink = sanitizeUrl(link);
   imageElem.attr('xlink:href', '#' + sanitizedLink);
 };
 
@@ -137,14 +137,14 @@ export const popdownMenu = function (popid) {
 };
 
 const popupMenuUpFunc = function (popupId) {
-  var pu = document.getElementById(popupId);
+  let pu = document.getElementById(popupId);
   if (pu != null) {
     pu.style.display = 'block';
   }
 };
 
 const popupMenuDownFunc = function (popupId) {
-  var pu = document.getElementById(popupId);
+  let pu = document.getElementById(popupId);
   if (pu != null) {
     pu.style.display = 'none';
   }
@@ -340,7 +340,7 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
   const center = actor.x + actor.width / 2;
 
   const boxpluslineGroup = elem.append('g');
-  var g = boxpluslineGroup;
+  let g = boxpluslineGroup;
 
   if (actor.y === 0) {
     actorCnt++;
@@ -364,7 +364,7 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
   }
 
   const rect = getNoteRect();
-  var cssclass = 'actor';
+  let cssclass = 'actor';
   if (actor.properties != null && actor.properties['class']) {
     cssclass = actor.properties['class'];
   } else {

src/docs.mts

@@ -1,7 +1,7 @@
 import { remark } from 'remark';
 import type { Code, Root } from 'mdast';
 import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
-// @ts-ignore
+// @ts-ignore: no types for this package
 import flatmap from 'unist-util-flatmap';
 import { globby } from 'globby';
 import { join, dirname } from 'path';

src/docs/Setup.md

@@ -1551,7 +1551,7 @@ Returns **void**
 
 ```html
 <script>
-  var config = {
+  let config = {
     theme: 'default',
     logLevel: 'fatal',
     securityLevel: 'strict',

src/docs/classDiagram.md

@@ -399,7 +399,7 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
 
 ```html
 <script>
-  var callbackFunction = function () {
+  let 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 () {
+    let callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    let config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };

src/docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -416,7 +416,7 @@ click nodeId call callback()
 
 ```html
 <script>
-  var callback = function (nodeId) {
+  let 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 () {
+    let callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    let config = {
       startOnLoad: true,
       flowchart: {
         useMaxWidth: true,

src/docs/flowchart.md

@@ -440,7 +440,7 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  var callback = function () {
+  let callback = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -493,10 +493,10 @@ Beginner's tip—a full example using interactive links in a html context:
   </pre>
 
   <script>
-    var callback = function () {
+    let callback = function () {
       alert('A callback was triggered');
     };
-    var config = {
+    let config = {
       startOnLoad: true,
       flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
       securityLevel: 'loose',

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) {
+    let printArguments = function (arg1, arg2, arg3) {
       alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
     };
-    var printTask = function (taskId) {
+    let printTask = function (taskId) {
       alert('taskId: ' + taskId);
     };
-    var config = {
+    let config = {
       startOnLoad: true,
       securityLevel: 'loose',
     };

src/docs/index.html

@@ -38,7 +38,7 @@
       }
     </script>
     <script>
-      var require = {
+      let require = {
         paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
       };
     </script>
@@ -60,16 +60,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')
@@ -126,7 +126,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;
             });
 
@@ -145,7 +145,7 @@
         ],
       };
 
-      var num = 0;
+      let num = 0;
       const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
       const conf = {

src/docs/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) {
+    let insertSvg = function (svgCode, bindFunctions) {
       element.innerHTML = svgCode;
     };
-    var graphDefinition = 'graph TB\na-->b';
-    var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+    let graphDefinition = 'graph TB\na-->b';
+    let 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>
 ```