merge MERMAID/develop into branch

.eslintrc.json

@@ -16,26 +16,17 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:jsdoc/recommended",
     "plugin:json/recommended",
     "plugin:markdown/recommended",
+    "plugin:@cspell/recommended",
     "prettier"
   ],
-  "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
+  "plugins": ["@typescript-eslint", "no-only-tests", "html", "jest", "jsdoc", "json", "@cspell"],
   "rules": {
+    "curly": "error",
     "no-console": "error",
     "no-prototype-builtins": "off",
     "no-unused-vars": "off",
-    "jsdoc/check-indentation": "off",
-    "jsdoc/check-alignment": "off",
-    "jsdoc/check-line-alignment": "off",
-    "jsdoc/multiline-blocks": "off",
-    "jsdoc/newline-after-description": "off",
-    "jsdoc/tag-lines": "off",
-    "jsdoc/require-param-description": "off",
-    "jsdoc/require-param-type": "off",
-    "jsdoc/require-returns": "off",
-    "jsdoc/require-returns-description": "off",
     "cypress/no-async-tests": "off",
     "@typescript-eslint/ban-ts-comment": [
       "error",
@@ -48,7 +39,21 @@
       }
     ],
     "json/*": ["error", "allowComments"],
-    "no-empty": ["error", { "allowEmptyCatch": true }]
+    "@cspell/spellchecker": [
+      "error",
+      {
+        "checkIdentifiers": false,
+        "checkStrings": false,
+        "checkStringTemplates": false
+      }
+    ],
+    "no-empty": [
+      "error",
+      {
+        "allowEmptyCatch": true
+      }
+    ],
+    "no-only-tests/no-only-tests": "error"
   },
   "overrides": [
     {
@@ -57,6 +62,29 @@
         "no-console": "off"
       }
     },
+    {
+      "files": ["*.{js,jsx,mjs,cjs}"],
+      "extends": ["plugin:jsdoc/recommended"],
+      "rules": {
+        "jsdoc/check-indentation": "off",
+        "jsdoc/check-alignment": "off",
+        "jsdoc/check-line-alignment": "off",
+        "jsdoc/multiline-blocks": "off",
+        "jsdoc/newline-after-description": "off",
+        "jsdoc/tag-lines": "off",
+        "jsdoc/require-param-description": "off",
+        "jsdoc/require-param-type": "off",
+        "jsdoc/require-returns": "off",
+        "jsdoc/require-returns-description": "off"
+      }
+    },
+    {
+      "files": ["*.{ts,tsx}"],
+      "plugins": ["tsdoc"],
+      "rules": {
+        "tsdoc/syntax": "error"
+      }
+    },
     {
       "files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"],
       "rules": {

.github/dependabot.yml

@@ -1,18 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: npm
-    open-pull-requests-limit: 10
-    directory: /
-    target-branch: develop
-    versioning-strategy: increase
-    schedule:
-      interval: weekly
-      day: monday
-      time: '07:00'
-  - package-ecosystem: github-actions
-    directory: /
-    target-branch: develop
-    schedule:
-      interval: weekly
-      day: monday
-      time: '07:00'

.github/workflows/docs.yml

@@ -16,9 +16,9 @@ jobs:
     name: 'Docs: Spellcheck'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         name: Check out the code
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         name: Setup node
         with:
           node-version: '16'

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

.vite/server.ts

@@ -1,7 +1,15 @@
-import express from 'express';
+import express, { NextFunction, Request, Response } from 'express';
 import { createServer as createViteServer } from 'vite';
 // import { getBuildConfig } from './build';
 
+const cors = (req: Request, res: Response, next: NextFunction) => {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
+  res.header('Access-Control-Allow-Headers', 'Content-Type');
+
+  next();
+};
+
 async function createServer() {
   const app = express();
 
@@ -12,6 +20,7 @@ async function createServer() {
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   });
 
+  app.use(cors);
   app.use(express.static('./packages/mermaid/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(express.static('./packages/mermaid-mindmap/dist'));

README.md

@@ -164,6 +164,7 @@ Class01 <|-- AveryLongClass : Cool
 Class09 --> C2 : Where am I?
 Class09 --* C3
 Class09 --|> Class07
+note "I love this diagram!\nDo you love it?"
 Class07 : equals()
 Class07 : Object[] elementData
 Class01 : size()
@@ -174,6 +175,7 @@ class Class10 {
   int id
   size()
 }
+note for Class10 "Cool class\nI said it's very cool class!"
 ```
 
 ### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]

cSpell.json

@@ -13,7 +13,8 @@
     "sandboxed",
     "Sveidqvist",
     "verdana",
-    "Visio"
+    "Visio",
+    "mermiad"
   ],
   "ignoreWords": [
     "Adamiecki",
@@ -38,7 +39,31 @@
     "Podlite",
     "redmine",
     "sphinxcontrib",
-    "Tuleap"
+    "Tuleap",
+    "dagre",
+    "vitepress",
+    "docsify",
+    "colour",
+    "graphlib",
+    "acyclicer",
+    "ranksep",
+    "descr",
+    "substate",
+    "Ashish",
+    "bbox",
+    "techn",
+    "cytoscape",
+    "Lucida",
+    "Bilkent",
+    "cpettitt",
+    "antiscript",
+    "ts-nocheck",
+    "setupGraphViewbox",
+    "flatmap",
+    "Kaufmann",
+    "viewports",
+    "edgechromium",
+    "statediagram"
   ],
   "patterns": [
     {

cypress/helpers/util.js

@@ -45,7 +45,6 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
     options.fontSize = '16px';
   }
   const useAppli = Cypress.env('useAppli');
-  //const useAppli = false;
   cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
@@ -59,7 +58,9 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   const url = mermaidUrl(graphStr, options, api);
 
   cy.visit(url);
-  if (validation) cy.get('svg').should(validation);
+  if (validation) {
+    cy.get('svg').should(validation);
+  }
   cy.get('svg');
   // Default name to test title
 
@@ -107,7 +108,9 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
   }
 
   cy.visit(url);
-  if (validation) cy.get('svg').should(validation);
+  if (validation) {
+    cy.get('svg').should(validation);
+  }
   cy.get('body');
   // Default name to test title
 

cypress/integration/rendering/appli.spec.js

@@ -21,7 +21,7 @@ describe('Git Graph diagram', () => {
   //   // Call Open on eyes to initialize a test session
   //   cy.eyesOpen({
   //     appName: 'Demo App',
-  //     testName: 'Ultrafast grid demo',
+  //     testName: 'UltraFast grid demo',
   //   });
 
   //   // check the login page with fluent api, see more info here

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -478,4 +478,22 @@ describe('Class diagram V2', () => {
     );
     cy.get('svg');
   });
+
+  it('18: should render a simple class diagram with notes', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        note "I love this diagram!\nDo you love it?"
+        class Class10 {
+          <<service>>
+          int id
+          size()
+        }
+        note for Class10 "Cool class\nI said it's very cool class!"
+
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+    cy.get('svg');
+  });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -407,4 +407,21 @@ describe('Class diagram', () => {
   //      // expect(svg).to.not.have.attr('style');
   //     });
   // });
+
+  it('19: should render a simple class diagram with notes', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      note "I love this diagram!\nDo you love it?"
+      class Class10 {
+        <<service>>
+        int id
+        size()
+      }
+      note for Class10 "Cool class\nI said it's very cool class!"
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -167,7 +167,7 @@ describe('Entity Relationship Diagram', () => {
     cy.get('svg');
   });
 
-  it.only('should render entities with generic and array attributes', () => {
+  it('should render entities with generic and array attributes', () => {
     renderGraph(
       `
     erDiagram
@@ -255,4 +255,22 @@ describe('Entity Relationship Diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('should render entities with aliases', () => {
+    renderGraph(
+      `
+    erDiagram
+      T1 one or zero to one or more T2 : test
+      T2 one or many optionally to zero or one T3 : test
+      T3 zero or more to zero or many T4 : test
+      T4 many(0) to many(1) T5 : test
+      T5 many optionally to one T6 : test
+      T6 only one optionally to only one T1 : test
+      T4 0+ to 1+ T6 : test
+      T1 1 to 1 T3 : test
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
 });

cypress/platform/knsv2.html

@@ -56,50 +56,40 @@
   <body>
     <div>Security check</div>
     <pre id="diagram" class="mermaid">
-classDiagram
+flowchart TD
-        direction LR
+    A --> B
-        class Student {
+    B --> C
-          -idCard : IdCard
+    A --> C
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
     </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 mindmap
-  root
+  root((mindmap))
-    A
+    Origins
-    B
+      Long history
-    C
+      ::icon(fa fa-book)
-    D
+      Popularisation
-    E
+      ::icon(fa fa-book)
-    A2
+        British popular psychology author Tony Buzan
-    B2
+    Research
-    C2
+      ::icon(fa fa-book)
-    D2
+      On effectivness<br/>and features
-    E2
+      On Automatic creation
-    child1((Circle))
+        Uses
-        grandchild 1
+            Creative techniques
-        grandchild 2
+            Strategic planning
-    child2(Round rectangle)
+            Argument mapping
-        grandchild 3
+    Tools
-        grandchild 4
+      Pen and paper
-    child3[Square]
+      Mermaid
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand<br/>child 6))
-        ::icon(mdi mdi-fire)
-          gc7((grand<br/>grand<br/>child 8))
         </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
-      example-diagram
+      gantt
+        title Style today marker (vertical line should be 5px wide and half-transparent blue)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+        section Section1
+        Today: 1, -1h
     </pre>
 
     <!-- <div id="cy"></div> -->
@@ -113,16 +103,21 @@ mindmap
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'forest',
+        theme: 'base',
         startOnLoad: true,
         logLevel: 0,
-        // basePath: './packages/',
+        flowchart: {
-        // themeVariables: { darkMode: true },
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
         lazyLoadedDiagrams: [
           './mermaid-mindmap-detector.esm.mjs',
           './mermaid-example-diagram-detector.esm.mjs',
         ],
-        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
         alert('It worked');
@@ -131,6 +126,10 @@ mindmap
         console.error('In parse error:');
         console.error(err);
       };
+      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
+      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/viewer.js

@@ -120,7 +120,9 @@ const contentLoadedApi = function () {
         (svgCode, bindFunctions) => {
           div.innerHTML = svgCode;
 
-          if (bindFunctions) bindFunctions(div);
+          if (bindFunctions) {
+            bindFunctions(div);
+          }
         },
         div
       );

cypress/platform/xss21.html

@@ -94,7 +94,7 @@
       }
 
       //       var diagram = `  graph TD
-      // A --> B["<a href='javasc`;
+      // A --> B["<a href='javascript`;
       // diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
       let diagram = `  graph TD
 A --> B["<a href='javasc`;

demos/gantt.html

@@ -74,22 +74,22 @@
     <pre class="mermaid">
     gantt
     title Hide today marker (vertical line should not be visible)
-    dateFormat YYYY-MM-DD
+    dateFormat Z
-    axisFormat %d
+    axisFormat %d/%m
     todayMarker off
     section Section1
-    Today: 1, -1h
+    Today: 1, -01:00, 5min
     </pre>
     <hr />
 
     <pre class="mermaid">
     gantt
     title Style today marker (vertical line should be 5px wide and half-transparent blue)
-    dateFormat YYYY-MM-DD
+    dateFormat Z
-    axisFormat %d
+    axisFormat %d/%m
     todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
     section Section1
-    Today: 1, -1h
+    Today: 1, -01:00, 5min
     </pre>
     <hr />
 

docs/classDiagram.md

@@ -11,7 +11,9 @@ Mermaid can render class diagrams.
 
 ```mermaid-example
 classDiagram
+    note "From Duck till Zebra"
     Animal <|-- Duck
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -35,7 +37,9 @@ classDiagram
 
 ```mermaid
 classDiagram
+    note "From Duck till Zebra"
     Animal <|-- Duck
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -549,6 +553,10 @@ You would define these actions on a separate line after all classes have been de
 - (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
 - note: callback function will be called with the nodeId as parameter.
 
+## Notes
+
+It is possible to add notes on digram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+
 ### Examples
 
 _URL Link:_

docs/entityRelationshipDiagram.md

@@ -110,10 +110,34 @@ Cardinality is a property that describes how many elements of another entity can
 |     `}o`     |     `o{`      | Zero or more (no upper limit) |
 |    `}\|`     |     `\|{`     | One or more (no upper limit)  |
 
+**Aliases**
+
+| Value (left) | Value (right) | Alias for    |
+| :----------: | :-----------: | ------------ |
+| one or zero  |  one or zero  | Zero or one  |
+| zero or one  |  zero or one  | Zero or one  |
+| one or more  |  one or more  | One or more  |
+| one or many  |  one or many  | One or more  |
+|   many(1)    |    many(1)    | One or more  |
+|      1+      |      1+       | One or more  |
+| zero or more | zero or more  | Zero or more |
+| zero or many | zero or many  | Zero or more |
+|   many(0)    |    many(1)    | Zero or more |
+|      0+      |      0+       | Zero or more |
+|   only one   |   only one    | Exactly one  |
+|      1       |       1       | Exactly one  |
+
 ### Identification
 
 Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
 
+**Aliases**
+
+|     Value     |     Alias for     |
+| :-----------: | :---------------: |
+|      to       |   _identifying_   |
+| optionally to | _non-identifying_ |
+
 ```mermaid-example
 erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
@@ -218,6 +242,7 @@ erDiagram
         string lastName
         int age
     }
+    MANUFACTURER only one to zero or more CAR
 ```
 
 ```mermaid
@@ -236,6 +261,7 @@ erDiagram
         string lastName
         int age
     }
+    MANUFACTURER only one to zero or more CAR
 ```
 
 ### Other Things

docs/flowchart.md

@@ -315,13 +315,13 @@ flowchart LR
 ### Dotted link
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
-   A-.->B;
+   A-.->B
 ```
 
 ```mermaid
-flowchart LR;
+flowchart LR
-   A-.->B;
+   A-.->B
 ```
 
 ### Dotted link with text
@@ -866,13 +866,13 @@ A shorter form of adding a class is to attach the classname to the node using th
 ```mermaid-example
 flowchart LR
     A:::someclass --> B
-    classDef someclass fill:#f96;
+    classDef someclass fill:#f96
 ```
 
 ```mermaid
 flowchart LR
     A:::someclass --> B
-    classDef someclass fill:#f96;
+    classDef someclass fill:#f96
 ```
 
 ### Css classes
@@ -895,14 +895,14 @@ below:
 **Example definition**
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
     A-->B[AAA<span>BBB</span>]
     B-->D
     class A cssClass
 ```
 
 ```mermaid
-flowchart LR;
+flowchart LR
     A-->B[AAA<span>BBB</span>]
     B-->D
     class A cssClass
@@ -924,7 +924,7 @@ The icons are accessed via the syntax fa:#icon class name#.
 flowchart TD
     B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
@@ -932,7 +932,7 @@ flowchart TD
 flowchart TD
     B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 

docs/index.html

@@ -15,6 +15,14 @@
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
     />
+    <meta property="og:title" content="Mermaid" />
+    <meta property="og:url" content="https://mermaid-js.github.io/mermaid/" />
+    <meta property="og:image" content="https://mermaid-js.github.io/mermaid/img/header.png" />
+    <meta
+      property="og:description"
+      content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
+    />
+    <meta property="og:type" content="website" />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
     <link
@@ -28,12 +36,27 @@
     ></script>
     <script>
       const require = {
-        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
+        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' },
       };
     </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
+    <script
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
+      integrity="sha512-6bIYsGqvLpAiEBXPdRQeFf5cueeBECtAKJjIHer3BhBZNTV3WLcLA8Tm3pDfxUwTMIS+kAZwTUvJ1IrMdX8C5w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.nls.min.js"
+      integrity="sha512-CCv+DKWw+yZhxf4Z+ExT6HC5G+3S45TeMTYcJyYbdrv4BpK2vyALJ4FoVR/KGWDIPu7w4tNCOC9MJQIkYPR5FA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.js"
+      integrity="sha512-u4eMtetNbBJvHXdLXs2kWZvJiVlg3cmkVcxrLzSPa1eNFuHygPYvyMWyK9PsD6Eq2MZSo+mTyjds8uuhPzVxHA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
     <script>
       exports = {};
     </script>
@@ -57,6 +80,7 @@
       let parser = new DOMParser();
       let currentCodeExample = 0;
       let colorize = [];
+      let num = 0;
 
       function colorizeEverything(html) {
         initEditor(monaco);
@@ -127,8 +151,9 @@
             hook.afterEach(function (html, next) {
               next(html);
               (async () => {
-                while (!window.hasOwnProperty('monaco'))
+                while (!window.hasOwnProperty('monaco')) {
                   await new Promise((resolve) => setTimeout(resolve, 1000));
+                }
                 colorizeEverything(html).then(
                   (newHTML) =>
                     (document.querySelector('article.markdown-section').innerHTML = newHTML)
@@ -146,7 +171,9 @@
         startOnLoad: false,
         themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
       };
-      if (isDarkMode) conf.theme = 'dark';
+      if (isDarkMode) {
+        conf.theme = 'dark';
+      }
       mermaid.initialize(conf);
     </script>
     <script>

docs/pie.md

@@ -28,7 +28,7 @@ Drawing a pie chart is really simple in mermaid.
 - Start with `pie` keyword to begin the diagram
   - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
 - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
-- Followed by dataSet
+- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
   - `label` for a section in the pie diagram within `" "` quotes.
   - Followed by `:` colon as separator
   - Followed by `positive numeric value` (supported upto two decimal places)

docs/sequenceDiagram.md

@@ -97,7 +97,7 @@ Messages can be of two displayed either solid or with a dotted line.
 
     [Actor][Arrow][Actor]:Message text
 
-There are six types of arrows currently supported:
+There are eight types of arrows currently supported:
 
 | Type | Description                                      |
 | ---- | ------------------------------------------------ |

package.json

@@ -7,7 +7,7 @@
   "module": "dist/mermaid.core.mjs",
   "types": "dist/mermaid.d.ts",
   "type": "module",
-  "packageManager": "pnpm@7.13.2",
+  "packageManager": "pnpm@7.13.6",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
@@ -70,81 +70,84 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^6.0.0",
+    "@braintree/sanitize-url": "6.0.1",
-    "@types/node": "^18.8.1",
+    "@types/node": "18.11.0",
-    "@types/uuid": "^8.3.4",
+    "@types/uuid": "8.3.4",
-    "d3": "^7.0.0",
+    "d3": "7.6.1",
-    "dagre": "^0.8.5",
+    "dagre": "0.8.5",
-    "dagre-d3": "^0.6.4",
+    "dagre-d3": "0.6.4",
     "dompurify": "2.4.0",
-    "fast-clone": "^1.5.13",
+    "fast-clone": "1.5.13",
-    "graphlib": "^2.1.8",
+    "graphlib": "2.1.8",
-    "khroma": "^2.0.0",
+    "khroma": "2.0.0",
-    "lodash": "^4.17.21",
+    "lodash": "4.17.21",
-    "moment-mini": "^2.24.0",
+    "moment-mini": "2.29.4",
-    "non-layered-tidy-tree-layout": "^2.0.2",
+    "non-layered-tidy-tree-layout": "2.0.2",
-    "rollup": "^2.79.1",
+    "rollup": "2.79.1",
-    "stylis": "^4.1.2",
+    "stylis": "4.1.2",
-    "uuid": "^9.0.0"
+    "uuid": "9.0.0"
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.27.1",
+    "@applitools/eyes-cypress": "3.27.5",
-    "@commitlint/cli": "^17.1.2",
+    "@commitlint/cli": "17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
+    "@commitlint/config-conventional": "17.1.0",
-    "@types/d3": "^7.4.0",
+    "@cspell/eslint-plugin": "6.12.0",
-    "@types/dompurify": "^2.3.4",
+    "@types/d3": "7.4.0",
-    "@types/eslint": "^8.4.6",
+    "@types/dompurify": "2.3.4",
-    "@types/express": "^4.17.14",
+    "@types/eslint": "8.4.7",
-    "@types/jsdom": "^20.0.0",
+    "@types/express": "4.17.14",
-    "@types/lodash": "^4.14.186",
+    "@types/jsdom": "20.0.0",
-    "@types/mdast": "^3.0.10",
+    "@types/lodash": "4.14.186",
-    "@types/prettier": "^2.7.1",
+    "@types/mdast": "3.0.10",
-    "@types/stylis": "^4.0.2",
+    "@types/prettier": "2.7.1",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@types/stylis": "4.0.2",
-    "@typescript-eslint/parser": "^5.39.0",
+    "@typescript-eslint/eslint-plugin": "5.40.1",
-    "@vitest/coverage-c8": "^0.23.4",
+    "@typescript-eslint/parser": "5.40.1",
-    "@vitest/ui": "^0.23.4",
+    "@vitest/coverage-c8": "0.24.3",
-    "concurrently": "^7.4.0",
+    "@vitest/ui": "0.24.3",
-    "coveralls": "^3.1.1",
+    "concurrently": "7.4.0",
-    "cypress": "^10.0.0",
+    "coveralls": "3.1.1",
-    "cypress-image-snapshot": "^4.0.1",
+    "cypress": "10.10.0",
-    "documentation": "13.2.0",
+    "cypress-image-snapshot": "4.0.1",
-    "esbuild": "^0.15.10",
+    "documentation": "13.2.5",
-    "eslint": "^8.24.0",
+    "esbuild": "0.15.12",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "8.25.0",
-    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-jest": "^27.1.0",
+    "eslint-plugin-html": "7.1.0",
-    "eslint-plugin-jsdoc": "^39.3.6",
+    "eslint-plugin-jest": "27.1.3",
-    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-jsdoc": "39.3.23",
-    "eslint-plugin-markdown": "^3.0.0",
+    "eslint-plugin-json": "3.1.0",
-    "express": "^4.18.1",
+    "eslint-plugin-markdown": "3.0.0",
-    "globby": "^13.1.2",
+    "eslint-plugin-no-only-tests": "3.1.0",
-    "husky": "^8.0.1",
+    "eslint-plugin-tsdoc": "0.2.17",
-    "identity-obj-proxy": "^3.0.0",
+    "express": "4.18.2",
-    "jest": "29.x",
+    "globby": "13.1.2",
-    "jison": "^0.4.18",
+    "husky": "8.0.1",
-    "jsdom": "^20.0.1",
+    "identity-obj-proxy": "3.0.0",
-    "lint-staged": "^13.0.3",
+    "jest": "29.2.1",
-    "markdown-it": "^13.0.1",
+    "jison": "0.4.18",
-    "path-browserify": "^1.0.1",
+    "jsdom": "20.0.1",
-    "pnpm": "^7.13.2",
+    "lint-staged": "13.0.3",
-    "prettier": "^2.7.1",
+    "markdown-it": "13.0.1",
-    "prettier-plugin-jsdoc": "^0.4.2",
+    "path-browserify": "1.0.1",
-    "remark": "^14.0.2",
+    "pnpm": "7.13.6",
-    "rimraf": "^3.0.2",
+    "prettier": "2.7.1",
-    "start-server-and-test": "^1.14.0",
+    "prettier-plugin-jsdoc": "0.4.2",
-    "ts-node": "^10.9.1",
+    "remark": "14.0.2",
-    "typescript": "^4.8.4",
+    "rimraf": "3.0.2",
-    "unist-util-flatmap": "^1.0.0",
+    "start-server-and-test": "1.14.0",
-    "vite": "^3.1.4",
+    "ts-node": "10.9.1",
-    "vitepress": "^1.0.0-alpha.19",
+    "typescript": "4.8.4",
-    "vitepress-plugin-mermaid": "^2.0.8",
+    "unist-util-flatmap": "1.0.0",
-    "vitepress-plugin-search": "^1.0.4-alpha.11",
+    "vite": "3.1.8",
-    "vitest": "^0.23.4"
+    "vitepress": "1.0.0-alpha.22",
+    "vitepress-plugin-mermaid": "2.0.8",
+    "vitepress-plugin-search": "1.0.4-alpha.11",
+    "vitest": "0.24.3"
   },
   "resolutions": {
-    "d3": "^7.0.0"
+    "d3": "7.6.1"
   },
   "files": [
     "dist"

packages/mermaid-example-diagram/package.json

@@ -50,8 +50,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "concurrently": "^7.4.0",
+    "concurrently": "7.4.0",
-    "rimraf": "^3.0.2"
+    "rimraf": "3.0.2"
   },
   "resolutions": {
     "d3": "^7.0.0"

packages/mermaid-example-diagram/src/detector.ts

@@ -2,9 +2,9 @@
 export const id = 'example-diagram';
 
 /**
- * Detector function that will be called by mermaid to determine if the diagram is this type of digram.
+ * Detector function that will be called by mermaid to determine if the diagram is this type of diagram.
  *
- * @param txt The diagram text will be passed to the detector
+ * @param txt - The diagram text will be passed to the detector
  * @returns True if the diagram text matches a diagram of this type
  */
 

packages/mermaid-example-diagram/src/exampleDiagramRenderer.js

@@ -16,7 +16,7 @@ export const draw = (text, id, version) => {
     log.debug('Rendering example diagram\n' + text, 'Conf: ');
     const THEME_COLOR_LIMIT = getConfig().themeVariables.THEME_COLOR_LIMIT;
     const securityLevel = getConfig().securityLevel;
-    // Handle root and Document for when rendering in sanbox mode
+    // Handle root and Document for when rendering in sandbox mode
     let sandboxElement;
     if (securityLevel === 'sandbox') {
       sandboxElement = select('#i' + id);

packages/mermaid-example-diagram/src/mermaidUtils.ts

@@ -35,18 +35,19 @@ export let setupGraphViewbox: (
 
 /**
  * Function called by mermaid that injects utility functions that help the diagram to be a good citizen.
- * @param _log
+ *
- * @param _setLogLevel
+ * @param _log - log from mermaid/src/diagramAPI.ts
- * @param _getConfig
+ * @param _setLogLevel - setLogLevel from mermaid/src/diagramAPI.ts
- * @param _sanitizeText
+ * @param _getConfig - getConfig from mermaid/src/diagramAPI.ts
- * @param _setupGraphViewbox
+ * @param _sanitizeText - sanitizeText from mermaid/src/diagramAPI.ts
+ * @param _setupGraphViewbox - setupGraphViewbox from mermaid/src/diagramAPI.ts
  */
 export const injectUtils = (
   _log: Record<keyof typeof LEVELS, typeof console.log>,
-  _setLogLevel: any,
+  _setLogLevel: typeof setLogLevel,
-  _getConfig: any,
+  _getConfig: typeof getConfig,
-  _sanitizeText: any,
+  _sanitizeText: typeof sanitizeText,
-  _setupGraphViewbox: any
+  _setupGraphViewbox: typeof setupGraphViewbox
 ) => {
   _log.debug('Mermaid utils injected into example-diagram');
   log.trace = _log.trace;

packages/mermaid-mindmap/package.json

@@ -57,8 +57,8 @@
     "non-layered-tidy-tree-layout": "^2.0.2"
   },
   "devDependencies": {
-    "concurrently": "^7.4.0",
+    "concurrently": "7.4.0",
-    "rimraf": "^3.0.2"
+    "rimraf": "3.0.2"
   },
   "resolutions": {
     "d3": "^7.0.0"

packages/mermaid-mindmap/src/mindmapRenderer.js

@@ -11,7 +11,7 @@ cytoscape.use(coseBilkent);
 
 /**
  * @param {any} svg The svg element to draw the diagram onto
- * @param {object} mindmap The maindmap data and hierarchy
+ * @param {object} mindmap The mindmap data and hierarchy
  * @param section
  * @param {object} conf The configuration object
  */
@@ -52,7 +52,7 @@ function drawEdges(edgesEl, cy) {
 
 /**
  * @param {any} svg The svg element to draw the diagram onto
- * @param {object} mindmap The maindmap data and hierarchy
+ * @param {object} mindmap The mindmap data and hierarchy
  * @param section
  * @param cy
  * @param {object} conf The configuration object
@@ -96,7 +96,6 @@ function addNodes(mindmap, cy, conf, level) {
 /**
  * @param node
  * @param conf
- * @param cy
  */
 function layoutMindmap(node, conf) {
   return new Promise((resolve) => {
@@ -121,7 +120,7 @@ function layoutMindmap(node, conf) {
     renderEl.remove();
     addNodes(node, cy, conf, 0);
 
-    // Make cytoscape care about the dimensisions of the nodes
+    // Make cytoscape care about the dimensions of the nodes
     cy.nodes().forEach(function (n) {
       n.layoutDimensions = () => {
         const data = n.data();
@@ -143,10 +142,7 @@ function layoutMindmap(node, conf) {
   });
 }
 /**
- * @param node
  * @param cy
- * @param positionedMindmap
- * @param conf
  */
 function positionNodes(cy) {
   cy.nodes().map((node, id) => {
@@ -184,7 +180,7 @@ export const draw = async (text, id, version, diagObj) => {
   log.debug('Renering info diagram\n' + text);
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);

packages/mermaid-mindmap/src/styles.js

@@ -22,12 +22,10 @@ const genSections = (options) => {
     }
     .section-${i - 1} text {
      fill: ${options['cScaleLabel' + i]};
-    //  fill: ${options['gitInv' + i]};
     }
     .node-icon-${i - 1} {
       font-size: 40px;
       color: ${options['cScaleLabel' + i]};
-      // color: ${options['gitInv' + i]};
     }
     .section-edge-${i - 1}{
       stroke: ${options['cScale' + i]};
@@ -36,7 +34,7 @@ const genSections = (options) => {
       stroke-width: ${sw};
     }
     .section-${i - 1} line {
-      stroke: ${options['lineColor' + i]} ;
+      stroke: ${options['cScaleInv' + i]} ;
       stroke-width: 3;
     }
 

packages/mermaid/package.json

@@ -75,51 +75,51 @@
     "stylis": "^4.1.2"
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.25.7",
+    "@applitools/eyes-cypress": "3.27.5",
-    "@commitlint/cli": "^17.1.2",
+    "@commitlint/cli": "17.1.2",
-    "@commitlint/config-conventional": "^17.0.0",
+    "@commitlint/config-conventional": "17.1.0",
-    "@types/d3": "^7.4.0",
+    "@types/d3": "7.4.0",
-    "@types/dompurify": "^2.3.4",
+    "@types/dompurify": "2.3.4",
-    "@types/eslint": "^8.4.6",
+    "@types/eslint": "8.4.7",
-    "@types/express": "^4.17.13",
+    "@types/express": "4.17.14",
-    "@types/jsdom": "^20.0.0",
+    "@types/jsdom": "20.0.0",
-    "@types/lodash": "^4.14.185",
+    "@types/lodash": "4.14.186",
-    "@types/prettier": "^2.7.0",
+    "@types/prettier": "2.7.1",
-    "@types/stylis": "^4.0.2",
+    "@types/stylis": "4.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/eslint-plugin": "5.40.1",
-    "@typescript-eslint/parser": "^5.37.0",
+    "@typescript-eslint/parser": "5.40.1",
-    "concurrently": "^7.4.0",
+    "concurrently": "7.4.0",
-    "coveralls": "^3.1.1",
+    "coveralls": "3.1.1",
-    "cypress": "^10.0.0",
+    "cypress": "10.10.0",
-    "cypress-image-snapshot": "^4.0.1",
+    "cypress-image-snapshot": "4.0.1",
-    "documentation": "13.2.0",
+    "documentation": "13.2.5",
-    "esbuild": "^0.15.8",
+    "esbuild": "0.15.12",
-    "eslint": "^8.23.1",
+    "eslint": "8.25.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-html": "7.1.0",
-    "eslint-plugin-jest": "^27.0.4",
+    "eslint-plugin-jest": "27.1.3",
-    "eslint-plugin-jsdoc": "^39.3.6",
+    "eslint-plugin-jsdoc": "39.3.23",
-    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-json": "3.1.0",
-    "eslint-plugin-markdown": "^3.0.0",
+    "eslint-plugin-markdown": "3.0.0",
-    "express": "^4.18.1",
+    "express": "4.18.2",
-    "globby": "^13.1.2",
+    "globby": "13.1.2",
-    "husky": "^8.0.0",
+    "husky": "8.0.1",
-    "identity-obj-proxy": "^3.0.0",
+    "identity-obj-proxy": "3.0.0",
-    "jison": "^0.4.18",
+    "jison": "0.4.18",
     "js-base64": "3.7.2",
-    "jsdom": "^20.0.0",
+    "jsdom": "20.0.1",
-    "lint-staged": "^13.0.0",
+    "lint-staged": "13.0.3",
-    "moment": "^2.23.0",
+    "moment": "2.29.4",
-    "path-browserify": "^1.0.1",
+    "path-browserify": "1.0.1",
-    "prettier": "^2.7.1",
+    "prettier": "2.7.1",
-    "prettier-plugin-jsdoc": "^0.4.2",
+    "prettier-plugin-jsdoc": "0.4.2",
-    "remark": "^14.0.2",
+    "remark": "14.0.2",
-    "rimraf": "^3.0.2",
+    "rimraf": "3.0.2",
-    "start-server-and-test": "^1.12.6",
+    "start-server-and-test": "1.14.0",
-    "ts-node": "^10.9.1",
+    "ts-node": "10.9.1",
-    "typescript": "^4.8.3",
+    "typescript": "4.8.4",
-    "unist-util-flatmap": "^1.0.0"
+    "unist-util-flatmap": "1.0.0"
   },
   "resolutions": {
     "d3": "^7.0.0"

packages/mermaid/src/Diagram.ts

@@ -2,15 +2,17 @@ import * as configApi from './config';
 import { log } from './logger';
 import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
 import { detectType, getDiagramLoader } from './diagram-api/detectType';
-import { isDetailedError } from './utils';
+import { isDetailedError, type DetailedError } from './utils';
+
+export type ParseErrorFunction = (err: string | DetailedError, hash?: any) => void;
+
 export class Diagram {
   type = 'graph';
   parser;
   renderer;
   db;
   private detectTypeFailed = false;
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  constructor(public txt: string, parseError?: ParseErrorFunction) {
-  constructor(public txt: string, parseError?: Function) {
     const cnf = configApi.getConfig();
     this.txt = txt;
     try {
@@ -37,8 +39,7 @@ export class Diagram {
     this.parse(this.txt, parseError);
   }
 
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  parse(text: string, parseError?: ParseErrorFunction): boolean {
-  parse(text: string, parseError?: Function): boolean {
     if (this.detectTypeFailed) {
       return false;
     }
@@ -53,23 +54,24 @@ export class Diagram {
     return false;
   }
 
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  handleError(error: unknown, parseError?: ParseErrorFunction) {
-  handleError(error: unknown, parseError?: Function) {
     // Is this the correct way to access mermiad's parseError()
     // method ? (or global.mermaid.parseError()) ?
-    if (parseError) {
+
-      if (isDetailedError(error)) {
+    if (parseError === undefined) {
-        // handle case where error string and hash were
-        // wrapped in object like`const error = { str, hash };`
-        parseError(error.str, error.hash);
-      } else {
-        // assume it is just error string and pass it on
-        parseError(error);
-      }
-    } else {
       // No mermaid.parseError() handler defined, so re-throw it
       throw error;
     }
+
+    if (isDetailedError(error)) {
+      // Handle case where error string and hash were
+      // wrapped in object like`const error = { str, hash };`
+      parseError(error.str, error.hash);
+      return;
+    }
+
+    // Otherwise, assume it is just an error string and pass it on
+    parseError(error as string);
   }
 
   getParser() {
@@ -81,8 +83,10 @@ export class Diagram {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
+export const getDiagramFromText = async (
-export const getDiagramFromText = async (txt: string, parseError?: Function): Promise<Diagram> => {
+  txt: string,
+  parseError?: ParseErrorFunction
+): Promise<Diagram> => {
   const type = detectType(txt, configApi.getConfig());
   try {
     // Trying to find the diagram

packages/mermaid/src/__mocks__/mermaidAPI.ts

@@ -6,17 +6,13 @@
 import * as configApi from '../config';
 import { vi } from 'vitest';
 import { addDiagrams } from '../diagram-api/diagram-orchestration';
-import Diagram from '../Diagram';
+import Diagram, { type ParseErrorFunction } from '../Diagram';
 
 // Normally, we could just do the following to get the original `parse()`
 // implementation, however, requireActual returns a promise and it's not documented how to use withing mock file.
 
-/**
+/** {@inheritDoc mermaidAPI.parse} */
- * @param text
+function parse(text: string, parseError?: ParseErrorFunction): boolean {
- * @param parseError
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-function parse(text: string, parseError?: Function): boolean {
   addDiagrams();
   const diagram = new Diagram(text, parseError);
   return diagram.parse(text, parseError);

packages/mermaid/src/config.ts

@@ -56,7 +56,7 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[])
  * function _Default value: At default, will mirror Global Config_
  *
  * @param conf - The base currentConfig to use as siteConfig
- * @returns {object} - The siteConfig
+ * @returns The new siteConfig
  */
 export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
   siteConfig = assignWithDepth({}, defaultConfig);
@@ -91,7 +91,7 @@ export const updateSiteConfig = (conf: MermaidConfig): MermaidConfig => {
  *
  * **Notes**: Returns **any** values in siteConfig.
  *
- * @returns {object} - The siteConfig
+ * @returns The siteConfig
  */
 export const getSiteConfig = (): MermaidConfig => {
   return assignWithDepth({}, siteConfig);
@@ -107,8 +107,8 @@ export const getSiteConfig = (): MermaidConfig => {
  * keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
  * corresponding siteConfig value.
  *
- * @param {any} conf - The potential currentConfig
+ * @param conf - The potential currentConfig
- * @returns {any} - The currentConfig merged with the sanitized conf
+ * @returns The currentConfig merged with the sanitized conf
  */
 export const setConfig = (conf: MermaidConfig): MermaidConfig => {
   // sanitize(conf);
@@ -131,7 +131,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => {
  *
  * **Notes**: Returns **any** the currentConfig
  *
- * @returns {any} - The currentConfig
+ * @returns The currentConfig
  */
 export const getConfig = (): MermaidConfig => {
   return assignWithDepth({}, currentConfig);
@@ -146,7 +146,7 @@ export const getConfig = (): MermaidConfig => {
  * Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
  * options in-place
  *
- * @param {any} options - The potential setConfig parameter
+ * @param options - The potential setConfig parameter
  */
 export const sanitize = (options: any) => {
   // Checking that options are not in the list of excluded options
@@ -166,7 +166,7 @@ export const sanitize = (options: any) => {
     }
   });
   // Check that there no attempts of xss, there should be no tags at all in the directive
-  // blocking data urls as base64 urls can contain svgs with inline script tags
+  // blocking data urls as base64 urls can contain svg's with inline script tags
   Object.keys(options).forEach((key) => {
     if (typeof options[key] === 'string') {
       if (
@@ -186,7 +186,7 @@ export const sanitize = (options: any) => {
 /**
  * Pushes in a directive to the configuration
  *
- * @param {object} directive The directive to push in
+ * @param directive - The directive to push in
  */
 export const addDirective = (directive: any) => {
   if (directive.fontFamily) {
@@ -217,7 +217,8 @@ export const addDirective = (directive: any) => {
  *
  * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
  *
- * @param config
+ * @param config - base set of values, which currentConfig could be **reset** to.
+ * Defaults to the current siteConfig (e.g returned by {@link getSiteConfig}).
  */
 export const reset = (config = siteConfig): void => {
   // Replace current config with siteConfig

packages/mermaid/src/dagre-wrapper/createLabel.js

@@ -44,7 +44,9 @@ function addHtmlLabel(node) {
 
 const createLabel = (_vertexText, style, isTitle, isNode) => {
   let vertexText = _vertexText || '';
-  if (typeof vertexText === 'object') vertexText = vertexText[0];
+  if (typeof vertexText === 'object') {
+    vertexText = vertexText[0];
+  }
   if (evaluate(getConfig().flowchart.htmlLabels)) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '<br />');

packages/mermaid/src/dagre-wrapper/edges.js

@@ -310,7 +310,7 @@ const cutPathAtIntersect = (_points, boundryNode) => {
     // const node = clusterDb[edge.toCluster].node;
     log.info('abc88 checking point', point, boundryNode);
 
-    // check if point is inside the boundry rect
+    // check if point is inside the boundary rect
     if (!outsideNode(boundryNode, point) && !isInside) {
       // First point inside the rect found
       // Calc the intersection coord between the point anf the last point outside the rect
@@ -336,7 +336,9 @@ const cutPathAtIntersect = (_points, boundryNode) => {
       log.warn('abc88 outside', point, lastPointOutside);
       lastPointOutside = point;
       // points.push(point);
-      if (!isInside) points.push(point);
+      if (!isInside) {
+        points.push(point);
+      }
     }
   });
   log.warn('abc88 returning points', points);
@@ -429,7 +431,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
     })
     .curve(curve);
 
-  // Contruct stroke classes based on properties
+  // Construct stroke classes based on properties
   let strokeClasses;
   switch (edge.thickness) {
     case 'normal':

packages/mermaid/src/dagre-wrapper/intersect/index.js

@@ -1,5 +1,5 @@
 /*
- * Borrowed with love from from dagrge-d3. Many thanks to cpettitt!
+ * Borrowed with love from from dagre-d3. Many thanks to cpettitt!
  */
 
 import node from './intersect-node.js';

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

@@ -28,7 +28,7 @@ function intersectLine(p1, p2, q1, q2) {
   // Check signs of r3 and r4. If both point 3 and point 4 lie on
   // same side of line 1, the line segments do not intersect.
   if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
-    return /*DONT_INTERSECT*/;
+    return /*DON'T_INTERSECT*/;
   }
 
   // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
@@ -44,7 +44,7 @@ function intersectLine(p1, p2, q1, q2) {
   // on same side of second line segment, the line segments do
   // not intersect.
   if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
-    return /*DONT_INTERSECT*/;
+    return /*DON'T_INTERSECT*/;
   }
 
   // Line segments intersect: compute intersection point.

packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js

@@ -23,7 +23,9 @@ const isDecendant = (id, ancenstorId) => {
     ' = ',
     decendants[ancenstorId].indexOf(id) >= 0
   );
-  if (decendants[ancenstorId].indexOf(id) >= 0) return true;
+  if (decendants[ancenstorId].indexOf(id) >= 0) {
+    return true;
+  }
 
   return false;
 };
@@ -32,19 +34,23 @@ const edgeInCluster = (edge, clusterId) => {
   log.info('Decendants of ', clusterId, ' is ', decendants[clusterId]);
   log.info('Edge is ', edge);
   // Edges to/from the cluster is not in the cluster, they are in the parent
-  if (edge.v === clusterId) return false;
+  if (edge.v === clusterId) {
-  if (edge.w === clusterId) return false;
+    return false;
+  }
+  if (edge.w === clusterId) {
+    return false;
+  }
 
   if (!decendants[clusterId]) {
     log.debug('Tilt, ', clusterId, ',not in decendants');
     return false;
   }
-  if (decendants[clusterId].indexOf(edge.v) >= 0) return true;
+  return (
-  if (isDecendant(edge.v, clusterId)) return true;
+    decendants[clusterId].indexOf(edge.v) >= 0 ||
-  if (isDecendant(edge.w, clusterId)) return true;
+    isDecendant(edge.v, clusterId) ||
-  if (decendants[clusterId].indexOf(edge.w) >= 0) return true;
+    isDecendant(edge.w, clusterId) ||
-
+    decendants[clusterId].indexOf(edge.w) >= 0
-  return false;
+  );
 };
 
 const copy = (clusterId, graph, newGraph, rootId) => {
@@ -235,7 +241,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
 
         // Check if any edge leaves the cluster (not the actual cluster, that's a link from the box)
         if (edge.v !== id && edge.w !== id) {
-          // Any edge where either the one of the nodes is decending to the cluster but not the other
+          // Any edge where either the one of the nodes is descending to the cluster but not the other
           // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) {
 
           const d1 = isDecendant(edge.v, id);
@@ -306,8 +312,12 @@ export const adjustClustersAndEdges = (graph, depth) => {
       v = getAnchorId(e.v);
       w = getAnchorId(e.w);
       graph.removeEdge(e.v, e.w, e.name);
-      if (v !== e.v) edge.fromCluster = e.v;
+      if (v !== e.v) {
-      if (w !== e.w) edge.toCluster = e.w;
+        edge.fromCluster = e.v;
+      }
+      if (w !== e.w) {
+        edge.toCluster = e.w;
+      }
       log.warn('Fix Replacing with XXX', v, w, e.name);
       graph.setEdge(v, w, edge, e.name);
     }
@@ -446,7 +456,9 @@ export const extractor = (graph, depth) => {
 };
 
 const sorter = (graph, nodes) => {
-  if (nodes.length === 0) return [];
+  if (nodes.length === 0) {
+    return [];
+  }
   let result = Object.assign(nodes);
   nodes.forEach((node) => {
     const children = graph.children(node);

packages/mermaid/src/dagre-wrapper/nodes.js

@@ -291,11 +291,15 @@ const cylinder = (parent, node) => {
         (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))
     ) {
       // ellipsis equation: x*x / a*a + y*y / b*b = 1
-      // solve for y to get adjustion value for pos.y
+      // solve for y to get adjusted value for pos.y
       let y = ry * ry * (1 - (x * x) / (rx * rx));
-      if (y != 0) y = Math.sqrt(y);
+      if (y != 0) {
+        y = Math.sqrt(y);
+      }
       y = ry - y;
-      if (point.y - node.y > 0) y = -y;
+      if (point.y - node.y > 0) {
+        y = -y;
+      }
 
       pos.y += y;
     }

packages/mermaid/src/defaultConfig.ts

@@ -8,19 +8,27 @@ import { MermaidConfig } from './config.type';
  *
  * These are the default options which can be overridden with the initialization call like so:
  *
- * **Example 1:**<pre> mermaid.initialize({ flowchart:{ htmlLabels: false } }); </pre>
+ * **Example 1:**
  *
- * **Example 2:**<pre> <script> var config = { startOnLoad:true, flowchart:{ useMaxWidth:true,
+ * ```js
- * htmlLabels:true, curve:'cardinal', },
+ * mermaid.initialize({ flowchart:{ htmlLabels: false } });
+ * ```
  *
+ * **Example 2:**
+ *
+ * ```html
+ * <script>
+ * var config = {
+ *   startOnLoad:true,
+ *   flowchart:{ useMaxWidth:true, htmlLabels:true, curve:'cardinal'},
  *   securityLevel:'loose',
- *
+ * };
- * }; mermaid.initialize(config); </script> </pre>
+ * mermaid.initialize(config);
+ * </script>
+ * ```
  *
  * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
  * A description of each option follows below.
- *
- * @name Configuration
  */
 const config: Partial<MermaidConfig> = {
   /**
@@ -30,8 +38,16 @@ const config: Partial<MermaidConfig> = {
    * | --------- | --------------- | ------ | -------- | ---------------------------------------------- |
    * | theme     | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' |
    *
-   * **Notes:** To disable any pre-defined mermaid theme, use "null".<pre> "theme": "forest",
+   * **Notes:** To disable any pre-defined mermaid theme, use "null".
-   * "themeCSS": ".node rect { fill: red; }" </pre>
+   *
+   * @example
+   *
+   * ```js
+   * {
+   *   "theme": "forest",
+   *   "themeCSS": ".node rect { fill: red; }"
+   * }
+   * ```
    */
   theme: 'default',
   themeVariables: theme['default'].getThemeVariables(),
@@ -119,7 +135,7 @@ const config: Partial<MermaidConfig> = {
   /**
    * This option controls if the generated ids of nodes in the SVG are generated randomly or based
    * on a seed. If set to false, the IDs are generated based on the current date and thus are not
-   * deterministic. This is the default behaviour.
+   * deterministic. This is the default behavior.
    *
    * **Notes**:
    *
@@ -634,8 +650,8 @@ const config: Partial<MermaidConfig> = {
 
     /**
      * | Parameter  | Description                  | Type | Required | Values           |
-     * | ---------- | --------------------------- | ---- | -------- | ---------------- |
+     * | ---------- | ---------------------------- | ---- | -------- | ---------------- |
-     * | axisFormat | Datetime format of the axis | 3    | Required | Date in yy-mm-dd |
+     * | axisFormat | Date/time format of the axis | 3    | Required | Date in yy-mm-dd |
      *
      * **Notes:**
      *
@@ -1168,7 +1184,7 @@ const config: Partial<MermaidConfig> = {
      * | --------------- | ----------- | ------- | -------- | ------------------ |
      * | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
      *
-     * **Notes:** How many boundarys to place in each row.
+     * **Notes:** How many boundaries to place in each row.
      *
      * Default value: 2
      */
@@ -1833,8 +1849,12 @@ const config: Partial<MermaidConfig> = {
   fontSize: 16,
 };
 
-if (config.class) config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+if (config.class) {
-if (config.gitGraph) config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+  config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+}
+if (config.gitGraph) {
+  config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+}
 
 const keyify = (obj: any, prefix = ''): string[] =>
   Object.keys(obj).reduce((res: string[], el): string[] => {

packages/mermaid/src/diagram-api/detectType.ts

@@ -9,8 +9,11 @@ const anyComment = /\s*%%.*\n/gm;
 const detectors: Record<string, DetectorRecord> = {};
 
 /**
- * @function detectType Detects the type of the graph text. Takes into consideration the possible
+ * Detects the type of the graph text.
- *   existence of an %%init directive
+ *
+ * Takes into consideration the possible existence of an `%%init` directive
+ *
+ * @param text - The text defining the graph. For example:
  *
  * ```mermaid
  *   %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%%
@@ -23,13 +26,9 @@ const detectors: Record<string, DetectorRecord> = {};
  *    f-->g
  *    g-->h
  * ```
- * @param {string} text The text defining the graph
+ *
- * @param {{
+ * @param config - The mermaid config.
- *   class: { defaultRenderer: string } | undefined;
+ * @returns A graph definition key
- *   state: { defaultRenderer: string } | undefined;
- *   flowchart: { defaultRenderer: string } | undefined;
- * }} [config]
- * @returns {string} A graph definition key
  */
 export const detectType = function (text: string, config?: MermaidConfig): string {
   text = text.replace(directive, '').replace(anyComment, '\n');

packages/mermaid/src/diagram-api/diagramAPI.ts

@@ -7,9 +7,9 @@ import { addStylesForDiagram } from '../styles';
 import { DiagramDefinition, DiagramDetector } from './types';
 
 /*
-  Packaging and exposing resources for externa diagrams so that they can import
+  Packaging and exposing resources for external diagrams so that they can import
-  diagramAPI and have access to selct parts of mermaid common code reqiored to
+  diagramAPI and have access to select parts of mermaid common code required to
-  create diagrams worling like the internal diagrams.
+  create diagrams working like the internal diagrams.
 */
 export const log = _log;
 export const setLogLevel = _setLogLevel;

packages/mermaid/src/diagrams/c4/c4Db.js

@@ -49,8 +49,9 @@ export const addRel = function (type, from, to, label, techn, descr, sprite, tag
     to === null ||
     label === undefined ||
     label === null
-  )
+  ) {
     return;
+  }
 
   let rel = {};
   const old = rels.find((rel) => rel.from === from && rel.to === to);
@@ -111,7 +112,9 @@ export const addRel = function (type, from, to, label, techn, descr, sprite, tag
 //type, alias, label, ?descr, ?sprite, ?tags, $link
 export const addPersonOrSystem = function (typeC4Shape, alias, label, descr, sprite, tags, link) {
   // Don't allow label nulling
-  if (alias === null || label === null) return;
+  if (alias === null || label === null) {
+    return;
+  }
 
   let personOrSystem = {};
   const old = c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias);
@@ -166,7 +169,9 @@ export const addPersonOrSystem = function (typeC4Shape, alias, label, descr, spr
 //type, alias, label, ?techn, ?descr ?sprite, ?tags, $link
 export const addContainer = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) {
   // Don't allow label nulling
-  if (alias === null || label === null) return;
+  if (alias === null || label === null) {
+    return;
+  }
 
   let container = {};
   const old = c4ShapeArray.find((container) => container.alias === alias);
@@ -232,7 +237,9 @@ export const addContainer = function (typeC4Shape, alias, label, techn, descr, s
 //type, alias, label, ?techn, ?descr ?sprite, ?tags, $link
 export const addComponent = function (typeC4Shape, alias, label, techn, descr, sprite, tags, link) {
   // Don't allow label nulling
-  if (alias === null || label === null) return;
+  if (alias === null || label === null) {
+    return;
+  }
 
   let component = {};
   const old = c4ShapeArray.find((component) => component.alias === alias);
@@ -300,7 +307,9 @@ export const addPersonOrSystemBoundary = function (alias, label, type, tags, lin
   // if (parentBoundary === null) return;
 
   // Don't allow label nulling
-  if (alias === null || label === null) return;
+  if (alias === null || label === null) {
+    return;
+  }
 
   let boundary = {};
   const old = boundarys.find((boundary) => boundary.alias === alias);
@@ -354,7 +363,9 @@ export const addContainerBoundary = function (alias, label, type, tags, link) {
   // if (parentBoundary === null) return;
 
   // Don't allow label nulling
-  if (alias === null || label === null) return;
+  if (alias === null || label === null) {
+    return;
+  }
 
   let boundary = {};
   const old = boundarys.find((boundary) => boundary.alias === alias);
@@ -417,7 +428,9 @@ export const addDeploymentNode = function (
   // if (parentBoundary === null) return;
 
   // Don't allow label nulling
-  if (alias === null || label === null) return;
+  if (alias === null || label === null) {
+    return;
+  }
 
   let boundary = {};
   const old = boundarys.find((boundary) => boundary.alias === alias);
@@ -646,8 +659,12 @@ export const updateLayoutConfig = function (typeC4Shape, c4ShapeInRowParam, c4Bo
     c4BoundaryInRowValue = parseInt(c4BoundaryInRowParam);
   }
 
-  if (c4ShapeInRowValue >= 1) c4ShapeInRow = c4ShapeInRowValue;
+  if (c4ShapeInRowValue >= 1) {
-  if (c4BoundaryInRowValue >= 1) c4BoundaryInRow = c4BoundaryInRowValue;
+    c4ShapeInRow = c4ShapeInRowValue;
+  }
+  if (c4BoundaryInRowValue >= 1) {
+    c4BoundaryInRow = c4BoundaryInRowValue;
+  }
 };
 
 export const getC4ShapeInRow = function () {
@@ -665,11 +682,13 @@ export const getParentBoundaryParse = function () {
 };
 
 export const getC4ShapeArray = function (parentBoundary) {
-  if (parentBoundary === undefined || parentBoundary === null) return c4ShapeArray;
+  if (parentBoundary === undefined || parentBoundary === null) {
-  else
+    return c4ShapeArray;
+  } else {
     return c4ShapeArray.filter((personOrSystem) => {
       return personOrSystem.parentBoundary === parentBoundary;
     });
+  }
 };
 export const getC4Shape = function (alias) {
   return c4ShapeArray.find((personOrSystem) => personOrSystem.alias === alias);
@@ -679,8 +698,11 @@ export const getC4ShapeKeys = function (parentBoundary) {
 };
 
 export const getBoundarys = function (parentBoundary) {
-  if (parentBoundary === undefined || parentBoundary === null) return boundarys;
+  if (parentBoundary === undefined || parentBoundary === null) {
-  else return boundarys.filter((boundary) => boundary.parentBoundary === parentBoundary);
+    return boundarys;
+  } else {
+    return boundarys.filter((boundary) => boundary.parentBoundary === parentBoundary);
+  }
 };
 
 export const getRels = function () {

packages/mermaid/src/diagrams/c4/c4Renderer.js

@@ -414,7 +414,9 @@ export const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) {
     let relTextWrap = rel.wrap && conf.wrap;
     let relConf = messageFont(conf);
     let diagramType = diagObj.db.getC4Type();
-    if (diagramType === 'C4Dynamic') rel.label.text = i + ': ' + rel.label.text;
+    if (diagramType === 'C4Dynamic') {
+      rel.label.text = i + ': ' + rel.label.text;
+    }
     let textLimitWidth = calculateTextWidth(rel.label.text, relConf);
     calcC4ShapeTextWH('label', rel, relTextWrap, relConf, textLimitWidth);
 
@@ -441,20 +443,26 @@ export const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) {
  * @param diagram
  * @param parentBoundaryAlias
  * @param parentBounds
- * @param currentBoundarys
+ * @param currentBoundaries
  * @param diagObj
  */
-function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentBoundarys, diagObj) {
+function drawInsideBoundary(
+  diagram,
+  parentBoundaryAlias,
+  parentBounds,
+  currentBoundaries,
+  diagObj
+) {
   let currentBounds = new Bounds(diagObj);
-  // Calculate the width limit of the boundar.  label/type 的长度，
+  // Calculate the width limit of the boundary.  label/type 的长度，
   currentBounds.data.widthLimit =
-    parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundarys.length);
+    parentBounds.data.widthLimit / Math.min(c4BoundaryInRow, currentBoundaries.length);
   // Math.min(
   //   conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * conf.c4ShapeInRow * 2,
-  //   parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundarys.length)
+  //   parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundaries.length)
   // );
-  for (let i = 0; i < currentBoundarys.length; i++) {
+  for (let i = 0; i < currentBoundaries.length; i++) {
-    let currentBoundary = currentBoundarys[i];
+    let currentBoundary = currentBoundaries[i];
     let Y = 0;
     currentBoundary.image = { width: 0, height: 0, Y: 0 };
     if (currentBoundary.sprite) {
@@ -508,13 +516,13 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
     }
 
     if (i == 0 || i % c4BoundaryInRow === 0) {
-      // Calculate the drawing start point of the currentBoundarys.
+      // Calculate the drawing start point of the currentBoundaries.
       let _x = parentBounds.data.startx + conf.diagramMarginX;
       let _y = parentBounds.data.stopy + conf.diagramMarginY + Y;
 
       currentBounds.setData(_x, _x, _y, _y);
     } else {
-      // Calculate the drawing start point of the currentBoundarys.
+      // Calculate the drawing start point of the currentBoundaries.
       let _x =
         currentBounds.data.stopx !== currentBounds.data.startx
           ? currentBounds.data.stopx + conf.diagramMarginX
@@ -540,8 +548,6 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
 
     if (nextCurrentBoundarys.length > 0) {
       // draw boundary inside currentBoundary
-      // bounds.init();
-      // parentBoundaryWidthLimit = bounds.data.stopx - bounds.startx;
       drawInsideBoundary(
         diagram,
         parentBoundaryAlias,
@@ -551,7 +557,9 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
       );
     }
     // draw boundary
-    if (currentBoundary.alias !== 'global') drawBoundary(diagram, currentBoundary, currentBounds);
+    if (currentBoundary.alias !== 'global') {
+      drawBoundary(diagram, currentBoundary, currentBounds);
+    }
     parentBounds.data.stopy = Math.max(
       currentBounds.data.stopy + conf.c4ShapeMargin,
       parentBounds.data.stopy
@@ -576,7 +584,7 @@ function drawInsideBoundary(diagram, parentBoundaryAlias, parentBounds, currentB
 export const draw = function (_text, id, _version, diagObj) {
   conf = configApi.getConfig().c4;
   const securityLevel = configApi.getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -616,10 +624,10 @@ export const draw = function (_text, id, _version, diagObj) {
   globalBoundaryMaxY = conf.diagramMarginY;
 
   const title = diagObj.db.getTitle();
-  let currentBoundarys = diagObj.db.getBoundarys('');
+  let currentBoundaries = diagObj.db.getBoundarys('');
   // switch (c4type) {
   //   case 'C4Context':
-  drawInsideBoundary(diagram, '', screenBounds, currentBoundarys, diagObj);
+  drawInsideBoundary(diagram, '', screenBounds, currentBoundaries, diagObj);
   //     break;
   // }
 

packages/mermaid/src/diagrams/c4/svgDraw.js

@@ -13,7 +13,9 @@ export const drawRect = function (elem, rectData) {
   rectElem.attr('ry', rectData.ry);
 
   if (rectData.attrs !== 'undefined' && rectData.attrs !== null) {
-    for (let attrKey in rectData.attrs) rectElem.attr(attrKey, rectData.attrs[attrKey]);
+    for (let attrKey in rectData.attrs) {
+      rectElem.attr(attrKey, rectData.attrs[attrKey]);
+    }
   }
 
   if (rectData.class !== 'undefined') {
@@ -231,9 +233,12 @@ export const drawRels = (elem, rels, conf) => {
       line.attr('stroke-width', '1');
       line.attr('stroke', strokeColor);
       line.style('fill', 'none');
-      if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)');
+      if (rel.type !== 'rel_b') {
-      if (rel.type === 'birel' || rel.type === 'rel_b')
+        line.attr('marker-end', 'url(' + url + '#arrowhead)');
+      }
+      if (rel.type === 'birel' || rel.type === 'rel_b') {
         line.attr('marker-start', 'url(' + url + '#arrowend)');
+      }
       i = -1;
     } else {
       let line = relsElem.append('path');
@@ -256,10 +261,13 @@ export const drawRels = (elem, rels, conf) => {
             .replaceAll('stopx', rel.endPoint.x)
             .replaceAll('stopy', rel.endPoint.y)
         );
-      if (rel.type !== 'rel_b') line.attr('marker-end', 'url(' + url + '#arrowhead)');
+      if (rel.type !== 'rel_b') {
-      if (rel.type === 'birel' || rel.type === 'rel_b')
+        line.attr('marker-end', 'url(' + url + '#arrowhead)');
+      }
+      if (rel.type === 'birel' || rel.type === 'rel_b') {
         line.attr('marker-start', 'url(' + url + '#arrowend)');
       }
+    }
 
     let messageConf = conf.messageFont();
     _drawTextCandidateFunc(conf)(
@@ -314,7 +322,9 @@ const drawBoundary = function (elem, boundary, conf) {
   let fontColor = boundary.fontColor ? boundary.fontColor : 'black';
 
   let attrsValue = { 'stroke-width': 1.0, 'stroke-dasharray': '7.0,7.0' };
-  if (boundary.nodeType) attrsValue = { 'stroke-width': 1.0 };
+  if (boundary.nodeType) {
+    attrsValue = { 'stroke-width': 1.0 };
+  }
   let rectData = {
     x: boundary.x,
     y: boundary.y,

packages/mermaid/src/diagrams/class/classDb.js

@@ -16,6 +16,7 @@ const MERMAID_DOM_ID_PREFIX = 'classid-';
 
 let relations = [];
 let classes = {};
+let notes = [];
 let classCounter = 0;
 
 let funs = [];
@@ -49,7 +50,9 @@ const splitClassNameAndType = function (id) {
 export const addClass = function (id) {
   let classId = splitClassNameAndType(id);
   // Only add class if not exists
-  if (typeof classes[classId.className] !== 'undefined') return;
+  if (typeof classes[classId.className] !== 'undefined') {
+    return;
+  }
 
   classes[classId.className] = {
     id: classId.className,
@@ -82,6 +85,7 @@ export const lookUpDomId = function (id) {
 export const clear = function () {
   relations = [];
   classes = {};
+  notes = [];
   funs = [];
   funs.push(setupToolTips);
   commonClear();
@@ -98,6 +102,10 @@ export const getRelations = function () {
   return relations;
 };
 
+export const getNotes = function () {
+  return notes;
+};
+
 export const addRelation = function (relation) {
   log.debug('Adding relation: ' + JSON.stringify(relation));
   addClass(relation.id1);
@@ -168,6 +176,15 @@ export const addMembers = function (className, members) {
   }
 };
 
+export const addNote = function (text, className) {
+  const note = {
+    id: `note${notes.length}`,
+    class: className,
+    text: text,
+  };
+  notes.push(note);
+};
+
 export const cleanupLabel = function (label) {
   if (label.substring(0, 1) === ':') {
     return common.sanitizeText(label.substr(1).trim(), configApi.getConfig());
@@ -185,7 +202,9 @@ export const cleanupLabel = function (label) {
 export const setCssClass = function (ids, className) {
   ids.split(',').forEach(function (_id) {
     let id = _id;
-    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
+    if (_id[0].match(/\d/)) {
+      id = MERMAID_DOM_ID_PREFIX + id;
+    }
     if (typeof classes[id] !== 'undefined') {
       classes[id].cssClasses.push(className);
     }
@@ -220,7 +239,9 @@ export const setLink = function (ids, linkStr, target) {
   const config = configApi.getConfig();
   ids.split(',').forEach(function (_id) {
     let id = _id;
-    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
+    if (_id[0].match(/\d/)) {
+      id = MERMAID_DOM_ID_PREFIX + id;
+    }
     if (typeof classes[id] !== 'undefined') {
       classes[id].link = utils.formatUrl(linkStr, config);
       if (config.securityLevel === 'sandbox') {
@@ -369,7 +390,9 @@ export default {
   clear,
   getClass,
   getClasses,
+  getNotes,
   addAnnotation,
+  addNote,
   getRelations,
   addRelation,
   getDirection,

packages/mermaid/src/diagrams/class/classDetector-V2.ts

@@ -1,9 +1,13 @@
 import type { DiagramDetector } from '../../diagram-api/types';
 
 export const classDetectorV2: DiagramDetector = (txt, config) => {
-  // If we have confgured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram
+  // If we have configured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram
-  if (txt.match(/^\s*classDiagram/) !== null && config?.class?.defaultRenderer === 'dagre-wrapper')
+  if (
+    txt.match(/^\s*classDiagram/) !== null &&
+    config?.class?.defaultRenderer === 'dagre-wrapper'
+  ) {
     return true;
+  }
   // We have not opted to use the new renderer so we should return true if we detect a class diagram
   return txt.match(/^\s*classDiagram-v2/) !== null;
 };

packages/mermaid/src/diagrams/class/classDetector.ts

@@ -1,8 +1,10 @@
 import type { DiagramDetector } from '../../diagram-api/types';
 
 export const classDetector: DiagramDetector = (txt, config) => {
-  // If we have confgured to use dagre-wrapper then we should never return true in this function
+  // If we have configured to use dagre-wrapper then we should never return true in this function
-  if (config?.class?.defaultRenderer === 'dagre-wrapper') return false;
+  if (config?.class?.defaultRenderer === 'dagre-wrapper') {
+    return false;
+  }
   // We have not opted to use the new renderer so we should return true if we detect a class diagram
   return txt.match(/^\s*classDiagram/) !== null;
 };

packages/mermaid/src/diagrams/class/classDiagram.spec.js

@@ -529,6 +529,16 @@ foo()
 
       parser.parse(str);
     });
+
+    it('should handle "note for"', function () {
+      const str = 'classDiagram\n' + 'Class11 <|.. Class12\n' + 'note for Class11 "test"\n';
+      parser.parse(str);
+    });
+
+    it('should handle "note"', function () {
+      const str = 'classDiagram\n' + 'note "test"\n';
+      parser.parse(str);
+    });
   });
 
   describe('when fetching data from a classDiagram graph it', function () {

packages/mermaid/src/diagrams/class/classRenderer-v2.js

@@ -64,6 +64,7 @@ export const addClasses = function (classes, g, _id, diagObj) {
     // if (evaluate(getConfig().flowchart.htmlLabels)) {
     //   const node = {
     //     label: vertexText.replace(
+    // eslint-disable-next-line @cspell/spellchecker
     //       /fa[lrsb]?:fa-[\w-]+/g,
     //       s => `<i class='${s.replace(':', ' ')}'></i>`
     //     )
@@ -133,6 +134,99 @@ export const addClasses = function (classes, g, _id, diagObj) {
   });
 };
 
+/**
+ * Function that adds the additional vertices (notes) found during parsing to the graph to be rendered.
+ *
+ * @param {{text: string; class: string; placement: number}[]} notes
+ *   Object containing the additional vertices (notes).
+ * @param {SVGGElement} g The graph that is to be drawn.
+ * @param {number} startEdgeId starting index for note edge
+ * @param classes
+ */
+export const addNotes = function (notes, g, startEdgeId, classes) {
+  log.info(notes);
+
+  // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
+  notes.forEach(function (note, i) {
+    const vertex = note;
+
+    /**
+     * Variable for storing the classes for the vertex
+     *
+     * @type {string}
+     */
+    let cssNoteStr = '';
+
+    const styles = { labelStyle: '', style: '' };
+
+    // Use vertex id as text in the box if no text is provided by the graph definition
+    let vertexText = vertex.text;
+
+    let radious = 0;
+    let _shape = 'note';
+    // Add the node
+    g.setNode(vertex.id, {
+      labelStyle: styles.labelStyle,
+      shape: _shape,
+      labelText: sanitizeText(vertexText),
+      noteData: vertex,
+      rx: radious,
+      ry: radious,
+      class: cssNoteStr,
+      style: styles.style,
+      id: vertex.id,
+      domId: vertex.id,
+      tooltip: '',
+      type: 'note',
+      padding: getConfig().flowchart.padding,
+    });
+
+    log.info('setNode', {
+      labelStyle: styles.labelStyle,
+      shape: _shape,
+      labelText: vertexText,
+      rx: radious,
+      ry: radious,
+      style: styles.style,
+      id: vertex.id,
+      type: 'note',
+      padding: getConfig().flowchart.padding,
+    });
+
+    if (!vertex.class || !(vertex.class in classes)) {
+      return;
+    }
+    const edgeId = startEdgeId + i;
+    const edgeData = {};
+    //Set relationship style and line type
+    edgeData.classes = 'relation';
+    edgeData.pattern = 'dotted';
+
+    edgeData.id = `edgeNote${edgeId}`;
+    // Set link type for rendering
+    edgeData.arrowhead = 'none';
+
+    log.info(`Note edge: ${JSON.stringify(edgeData)}, ${JSON.stringify(vertex)}`);
+    //Set edge extra labels
+    edgeData.startLabelRight = '';
+    edgeData.endLabelLeft = '';
+
+    //Set relation arrow types
+    edgeData.arrowTypeStart = 'none';
+    edgeData.arrowTypeEnd = 'none';
+    let style = 'fill:none';
+    let labelStyle = '';
+
+    edgeData.style = style;
+    edgeData.labelStyle = labelStyle;
+
+    edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
+
+    // Add the edge to the graph
+    g.setEdge(vertex.id, vertex.class, edgeData, edgeId);
+  });
+};
+
 /**
  * Add edges to graph based on parsed graph definition
  *
@@ -304,10 +398,12 @@ export const draw = function (text, id, _version, diagObj) {
   // Fetch the vertices/nodes and edges/links from the parsed graph definition
   const classes = diagObj.db.getClasses();
   const relations = diagObj.db.getRelations();
+  const notes = diagObj.db.getNotes();
 
   log.info(relations);
   addClasses(classes, g, id, diagObj);
   addRelations(relations, g);
+  addNotes(notes, g, relations.length + 1, classes);
 
   // Add custom shapes
   // flowChartShapes.addToRenderV2(addShape);

packages/mermaid/src/diagrams/class/classRenderer.js

@@ -148,7 +148,7 @@ export const draw = function (text, id, _version, diagObj) {
   log.info('Rendering diagram ' + text);
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -208,12 +208,42 @@ export const draw = function (text, id, _version, diagObj) {
     );
   });
 
+  const notes = diagObj.db.getNotes();
+  notes.forEach(function (note) {
+    log.debug(`Adding note: ${JSON.stringify(note)}`);
+    const node = svgDraw.drawNote(diagram, note, conf, diagObj);
+    idCache[node.id] = node;
+
+    // Add nodes to the graph. The first argument is the node id. The second is
+    // metadata about the node. In this case we're going to add labels to each of
+    // our nodes.
+    g.setNode(node.id, node);
+    if (note.class && note.class in classes) {
+      g.setEdge(
+        note.id,
+        getGraphId(note.class),
+        {
+          relation: {
+            id1: note.id,
+            id2: note.class,
+            relation: {
+              type1: 'none',
+              type2: 'none',
+              lineType: 10,
+            },
+          },
+        },
+        'DEFAULT'
+      );
+    }
+  });
+
   dagre.layout(g);
   g.nodes().forEach(function (v) {
     if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
       log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
       root
-        .select('#' + diagObj.db.lookUpDomId(v))
+        .select('#' + (diagObj.db.lookUpDomId(v) || v))
         .attr(
           'transform',
           'translate(' +

packages/mermaid/src/diagrams/class/parser/classDiagram.jison

@@ -56,6 +56,8 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 "callback"            return 'CALLBACK';
 "link"                return 'LINK';
 "click"               return 'CLICK';
+"note for"            return 'NOTE_FOR';
+"note"                return 'NOTE';
 "<<"                  return 'ANNOTATION_START';
 ">>"                  return 'ANNOTATION_END';
 [~]                   this.begin("generic");
@@ -263,6 +265,7 @@ statement
     | annotationStatement
     | clickStatement
     | cssClassStatement
+    | noteStatement
     | directive
     | direction
     | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
@@ -300,6 +303,11 @@ relationStatement
     | className STR relation STR className  { $$ = {id1:$1, id2:$5, relation:$3, relationTitle1:$2, relationTitle2:$4} }
     ;
 
+noteStatement
+    : NOTE_FOR className noteText  { yy.addNote($3, $2); }
+    | NOTE noteText                { yy.addNote($2); }
+    ;
+
 relation
     : relationType lineType relationType { $$={type1:$1,type2:$3,lineType:$2}; }
     | lineType relationType { $$={type1:'none',type2:$2,lineType:$1}; }
@@ -351,4 +359,6 @@ alphaNumToken  : UNICODE_TEXT | NUM | ALPHA;
 
 classLiteralName : BQUOTE_STR;
 
+noteText : STR;
+
 %%

packages/mermaid/src/diagrams/class/styles.js

@@ -80,6 +80,10 @@ g.classGroup line {
   stroke-dasharray: 3;
 }
 
+.dotted-line{
+  stroke-dasharray: 1 2;
+}
+
 #compositionStart, .composition {
   fill: ${options.lineColor} !important;
   stroke: ${options.lineColor} !important;

packages/mermaid/src/diagrams/class/svgDraw.js

@@ -9,13 +9,13 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
     switch (type) {
       case diagObj.db.relationType.AGGREGATION:
         return 'aggregation';
-      case diagObj.db.EXTENSION:
+      case diagObj.db.relationType.EXTENSION:
         return 'extension';
-      case diagObj.db.COMPOSITION:
+      case diagObj.db.relationType.COMPOSITION:
         return 'composition';
-      case diagObj.db.DEPENDENCY:
+      case diagObj.db.relationType.DEPENDENCY:
         return 'dependency';
-      case diagObj.db.LOLLIPOP:
+      case diagObj.db.relationType.LOLLIPOP:
         return 'lollipop';
     }
   };
@@ -55,6 +55,9 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
   if (relation.relation.lineType == 1) {
     svgPath.attr('class', 'relation dashed-line');
   }
+  if (relation.relation.lineType == 10) {
+    svgPath.attr('class', 'relation dotted-line');
+  }
   if (relation.relation.type1 !== 'none') {
     svgPath.attr(
       'marker-start',
@@ -190,7 +193,9 @@ export const drawClass = function (elem, classDef, conf, diagObj) {
   let isFirst = true;
   classDef.annotations.forEach(function (member) {
     const titleText2 = title.append('tspan').text('«' + member + '»');
-    if (!isFirst) titleText2.attr('dy', conf.textHeight);
+    if (!isFirst) {
+      titleText2.attr('dy', conf.textHeight);
+    }
     isFirst = false;
   });
 
@@ -203,7 +208,9 @@ export const drawClass = function (elem, classDef, conf, diagObj) {
   const classTitle = title.append('tspan').text(classTitleString).attr('class', 'title');
 
   // If class has annotations the title needs to have an offset of the text height
-  if (!isFirst) classTitle.attr('dy', conf.textHeight);
+  if (!isFirst) {
+    classTitle.attr('dy', conf.textHeight);
+  }
 
   const titleHeight = title.node().getBBox().height;
 
@@ -284,6 +291,69 @@ export const drawClass = function (elem, classDef, conf, diagObj) {
   return classInfo;
 };
 
+/**
+ * Renders a note diagram
+ *
+ * @param {SVGSVGElement} elem The element to draw it into
+ * @param {{id: string; text: string; class: string;}} note
+ * @param conf
+ * @param diagObj
+ * @todo Add more information in the JSDOC here
+ */
+export const drawNote = function (elem, note, conf, diagObj) {
+  log.debug('Rendering note ', note, conf);
+
+  const id = note.id;
+  const noteInfo = {
+    id: id,
+    text: note.text,
+    width: 0,
+    height: 0,
+  };
+
+  // add class group
+  const g = elem.append('g').attr('id', id).attr('class', 'classGroup');
+
+  // add text
+  let text = g
+    .append('text')
+    .attr('y', conf.textHeight + conf.padding)
+    .attr('x', 0);
+
+  const lines = JSON.parse(`"${note.text}"`).split('\n');
+
+  lines.forEach(function (line) {
+    log.debug(`Adding line: ${line}`);
+    text.append('tspan').text(line).attr('class', 'title').attr('dy', conf.textHeight);
+  });
+
+  const noteBox = g.node().getBBox();
+
+  const rect = g
+    .insert('rect', ':first-child')
+    .attr('x', 0)
+    .attr('y', 0)
+    .attr('width', noteBox.width + 2 * conf.padding)
+    .attr(
+      'height',
+      noteBox.height + lines.length * conf.textHeight + conf.padding + 0.5 * conf.dividerMargin
+    );
+
+  const rectWidth = rect.node().getBBox().width;
+
+  // Center title
+  // We subtract the width of each text element from the class box width and divide it by 2
+  text.node().childNodes.forEach(function (x) {
+    x.setAttribute('x', (rectWidth - x.getBBox().width) / 2);
+  });
+
+  noteInfo.width = rectWidth;
+  noteInfo.height =
+    noteBox.height + lines.length * conf.textHeight + conf.padding + 0.5 * conf.dividerMargin;
+
+  return noteInfo;
+};
+
 export const parseMember = function (text) {
   const fieldRegEx = /^(\+|-|~|#)?(\w+)(~\w+~|\[\])?\s+(\w+) *(\*|\$)?$/;
   const methodRegEx = /^([+|\-|~|#])?(\w+) *\( *(.*)\) *(\*|\$)? *(\w*[~|[\]]*\s*\w*~?)$/;
@@ -347,7 +417,7 @@ const buildMethodDisplay = function (parsedText) {
 };
 
 const buildLegacyDisplay = function (text) {
-  // if for some reason we dont have any match, use old format to parse text
+  // if for some reason we don't have any match, use old format to parse text
   let displayText = '';
   let cssStyle = '';
   let memberText = '';
@@ -435,5 +505,6 @@ const parseClassifier = function (classifier) {
 export default {
   drawClass,
   drawEdge,
+  drawNote,
   parseMember,
 };

packages/mermaid/src/diagrams/common/common.ts

@@ -4,11 +4,13 @@ import { MermaidConfig } from '../../config.type';
 /**
  * Gets the rows of lines in a string
  *
- * @param {string | undefined} s The string to check the lines for
+ * @param s - The string to check the lines for
- * @returns {string[]} The rows in that string
+ * @returns The rows in that string
  */
 export const getRows = (s?: string): string[] => {
-  if (!s) return [''];
+  if (!s) {
+    return [''];
+  }
   const str = breakToPlaceholder(s).replace(/\\n/g, '#br#');
   return str.split('#br#');
 };
@@ -16,8 +18,8 @@ export const getRows = (s?: string): string[] => {
 /**
  * Removes script tags from a text
  *
- * @param {string} txt The text to sanitize
+ * @param txt - The text to sanitize
- * @returns {string} The safer text
+ * @returns The safer text
  */
 export const removeScript = (txt: string): string => {
   return DOMPurify.sanitize(txt);
@@ -39,7 +41,9 @@ const sanitizeMore = (text: string, config: MermaidConfig) => {
 };
 
 export const sanitizeText = (text: string, config: MermaidConfig): string => {
-  if (!text) return text;
+  if (!text) {
+    return text;
+  }
   if (config.dompurifyConfig) {
     text = DOMPurify.sanitize(sanitizeMore(text, config), config.dompurifyConfig).toString();
   } else {
@@ -52,7 +56,9 @@ export const sanitizeTextOrArray = (
   a: string | string[] | string[][],
   config: MermaidConfig
 ): string | string[] => {
-  if (typeof a === 'string') return sanitizeText(a, config);
+  if (typeof a === 'string') {
+    return sanitizeText(a, config);
+  }
   // TODO: Refactor to avoid flat.
   return a.flat().map((x: string) => sanitizeText(x, config));
 };
@@ -62,8 +68,8 @@ export const lineBreakRegex = /<br\s*\/?>/gi;
 /**
  * Whether or not a text has any line breaks
  *
- * @param {string} text The text to test
+ * @param text - The text to test
- * @returns {boolean} Whether or not the text has breaks
+ * @returns Whether or not the text has breaks
  */
 export const hasBreaks = (text: string): boolean => {
   return lineBreakRegex.test(text);
@@ -72,8 +78,8 @@ export const hasBreaks = (text: string): boolean => {
 /**
  * Splits on <br> tags
  *
- * @param {string} text Text to split
+ * @param text - Text to split
- * @returns {string[]} List of lines as strings
+ * @returns List of lines as strings
  */
 export const splitBreaks = (text: string): string[] => {
   return text.split(lineBreakRegex);
@@ -82,8 +88,8 @@ export const splitBreaks = (text: string): string[] => {
 /**
  * Converts placeholders to line breaks in HTML
  *
- * @param {string} s HTML with placeholders
+ * @param s - HTML with placeholders
- * @returns {string} HTML with breaks instead of placeholders
+ * @returns HTML with breaks instead of placeholders
  */
 const placeholderToBreak = (s: string): string => {
   return s.replace(/#br#/g, '<br/>');
@@ -92,8 +98,8 @@ const placeholderToBreak = (s: string): string => {
 /**
  * Opposite of `placeholderToBreak`, converts breaks to placeholders
  *
- * @param {string} s HTML string
+ * @param s - HTML string
- * @returns {string} String with placeholders
+ * @returns String with placeholders
  */
 const breakToPlaceholder = (s: string): string => {
   return s.replace(lineBreakRegex, '#br#');
@@ -102,8 +108,8 @@ const breakToPlaceholder = (s: string): string => {
 /**
  * Gets the current URL
  *
- * @param {boolean} useAbsolute Whether to return the absolute URL or not
+ * @param useAbsolute - Whether to return the absolute URL or not
- * @returns {string} The current URL
+ * @returns The current URL
  */
 const getUrl = (useAbsolute: boolean): string => {
   let url = '';
@@ -124,8 +130,8 @@ const getUrl = (useAbsolute: boolean): string => {
 /**
  * Converts a string/boolean into a boolean
  *
- * @param {string | boolean} val String or boolean to convert
+ * @param val - String or boolean to convert
- * @returns {boolean} The result from the input
+ * @returns The result from the input
  */
 export const evaluate = (val?: string | boolean): boolean =>
   val === false || ['false', 'null', '0'].includes(String(val).trim().toLowerCase()) ? false : true;
@@ -133,12 +139,15 @@ export const evaluate = (val?: string | boolean): boolean =>
 /**
  * Makes generics in typescript syntax
  *
- * @example <caption>Array of array of strings in typescript syntax</caption>
+ * @example
+ * Array of array of strings in typescript syntax
+ *
+ * ```js
  * // returns "Array<Array<string>>"
  * parseGenericTypes('Array~Array~string~~');
- *
+ * ```
- * @param {string} text The text to convert
+ * @param text - The text to convert
- * @returns {string} The converted string
+ * @returns The converted string
  */
 export const parseGenericTypes = function (text: string): string {
   let cleanedText = text;

packages/mermaid/src/diagrams/er/erRenderer.js

@@ -357,7 +357,7 @@ const drawEntities = function (svgNode, entities, graph) {
     const rectNode = groupNode
       .insert('rect', '#' + textId)
       .attr('class', 'er entityBox')
-      .attr('fill', conf.fill)
+      .style('fill', conf.fill)
       .attr('fill-opacity', '100%')
       .attr('stroke', conf.stroke)
       .attr('x', 0)
@@ -644,7 +644,7 @@ export const draw = function (text, id, _version, diagObj) {
   // inserted - this represents the insertion point for relationship paths
   const firstEntity = drawEntities(svg, diagObj.db.getEntities(), g);
 
-  // TODO: externalise the addition of entities to the graph - it's a bit 'buried' in the above
+  // TODO: externalize the addition of entities to the graph - it's a bit 'buried' in the above
 
   // Add all the relationships to the graph
   const relationships = addRelationships(diagObj.db.getRelationships(), g);

packages/mermaid/src/diagrams/er/parser/erDiagram.jison

@@ -36,15 +36,32 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <block>[\n]+                    /* nothing */
 <block>"}"                      { this.popState(); return 'BLOCK_STOP'; }
 <block>.                        return yytext[0];
+
+"one or zero"                   return 'ZERO_OR_ONE';
+"one or more"                   return 'ONE_OR_MORE';
+"one or many"                   return 'ONE_OR_MORE';
+"1+"                            return 'ONE_OR_MORE';
 \|o                             return 'ZERO_OR_ONE';
+"zero or one"                   return 'ZERO_OR_ONE';
+"zero or more"                  return 'ZERO_OR_MORE';
+"zero or many"                  return 'ZERO_OR_MORE';
+"0+"                            return 'ZERO_OR_MORE';
 \}o                             return 'ZERO_OR_MORE';
+"many(0)"                       return 'ZERO_OR_MORE';
+"many(1)"                       return 'ONE_OR_MORE';
+"many"                          return 'ZERO_OR_MORE';
 \}\|                            return 'ONE_OR_MORE';
+"one"                           return 'ONLY_ONE';
+"only one"                      return 'ONLY_ONE';
+"1"                             return 'ONLY_ONE';
 \|\|                            return 'ONLY_ONE';
 o\|                             return 'ZERO_OR_ONE';
 o\{                             return 'ZERO_OR_MORE';
 \|\{                            return 'ONE_OR_MORE';
 \.\.                            return 'NON_IDENTIFYING';
 \-\-                            return 'IDENTIFYING';
+"to"                            return 'IDENTIFYING';
+"optionally to"                 return 'NON_IDENTIFYING';
 \.\-                            return 'NON_IDENTIFYING';
 \-\.                            return 'NON_IDENTIFYING';
 [A-Za-z][A-Za-z0-9\-_]*         return 'ALPHANUM';

packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js

@@ -532,18 +532,100 @@ describe('when parsing ER diagram it...', function () {
     expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ONE_OR_MORE);
   });
 
+  it('should handle zero-or-one-to-zero-or-more relationships (aliases "one or zero" and "zero or many")', function () {
+    erDiagram.parser.parse('erDiagram\nA one or zero to many B : has');
+    const rels = erDb.getRelationships();
+
+    expect(Object.keys(erDb.getEntities()).length).toBe(2);
+    expect(rels.length).toBe(1);
+    expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_MORE);
+    expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_ONE);
+  });
+
+  it('should handle one-or-more-to-zero-or-one relationships (aliases "one or many" and "zero or one")', function () {
+    erDiagram.parser.parse('erDiagram\nA one or many optionally to zero or one B : has');
+    const rels = erDb.getRelationships();
+
+    expect(Object.keys(erDb.getEntities()).length).toBe(2);
+    expect(rels.length).toBe(1);
+    expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_ONE);
+    expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ONE_OR_MORE);
+  });
+
+  it('should handle zero-or-more-to-zero-or-more relationships (aliases "zero or more" and "zero or many")', function () {
+    erDiagram.parser.parse('erDiagram\nA zero or more to zero or many B : has');
+    const rels = erDb.getRelationships();
+
+    expect(Object.keys(erDb.getEntities()).length).toBe(2);
+    expect(rels.length).toBe(1);
+    expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_MORE);
+    expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE);
+  });
+
+  it('should handle zero-or-more-to-one-or-more relationships (aliases "many(0)" and "many(1)")', function () {
+    erDiagram.parser.parse('erDiagram\nA many(0) to many(1) B : has');
+    const rels = erDb.getRelationships();
+
+    expect(Object.keys(erDb.getEntities()).length).toBe(2);
+    expect(rels.length).toBe(1);
+    expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONE_OR_MORE);
+    expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE);
+  });
+
+  it('should handle zero-or-more-to-only-one relationships (aliases "many(0)" and "many(1)")', function () {
+    erDiagram.parser.parse('erDiagram\nA many optionally to one B : has');
+    const rels = erDb.getRelationships();
+
+    expect(Object.keys(erDb.getEntities()).length).toBe(2);
+    expect(rels.length).toBe(1);
+    expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONLY_ONE);
+    expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE);
+  });
+
+  it('should handle only-one-to-only-one relationships (aliases "only one" and  "1+")', function () {
+    erDiagram.parser.parse('erDiagram\nA only one optionally to 1+ B : has');
+    const rels = erDb.getRelationships();
+
+    expect(Object.keys(erDb.getEntities()).length).toBe(2);
+    expect(rels.length).toBe(1);
+    expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONE_OR_MORE);
+    expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ONLY_ONE);
+  });
+
+  it('should handle zero-or-more-to-only-one relationships (aliases "0+" and  "1")', function () {
+    erDiagram.parser.parse('erDiagram\nA 0+ optionally to 1 B : has');
+    const rels = erDb.getRelationships();
+
+    expect(Object.keys(erDb.getEntities()).length).toBe(2);
+    expect(rels.length).toBe(1);
+    expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ONLY_ONE);
+    expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.ZERO_OR_MORE);
+  });
+
   it('should represent identifying relationships properly', function () {
     erDiagram.parser.parse('erDiagram\nHOUSE ||--|{ ROOM : contains');
     const rels = erDb.getRelationships();
     expect(rels[0].relSpec.relType).toBe(erDb.Identification.IDENTIFYING);
   });
 
+  it('should represent identifying relationships properly (alias "to")', function () {
+    erDiagram.parser.parse('erDiagram\nHOUSE one to one ROOM : contains');
+    const rels = erDb.getRelationships();
+    expect(rels[0].relSpec.relType).toBe(erDb.Identification.IDENTIFYING);
+  });
+
   it('should represent non-identifying relationships properly', function () {
     erDiagram.parser.parse('erDiagram\n PERSON ||..o{ POSSESSION : owns');
     const rels = erDb.getRelationships();
     expect(rels[0].relSpec.relType).toBe(erDb.Identification.NON_IDENTIFYING);
   });
 
+  it('should represent non-identifying relationships properly (alias "optionally to")', function () {
+    erDiagram.parser.parse('erDiagram\n PERSON many optionally to many POSSESSION : owns');
+    const rels = erDb.getRelationships();
+    expect(rels[0].relSpec.relType).toBe(erDb.Identification.NON_IDENTIFYING);
+  });
+
   it('should not accept a syntax error', function () {
     const doc = 'erDiagram\nA xxx B : has';
     expect(() => {

packages/mermaid/src/diagrams/error/errorRenderer.ts

@@ -8,7 +8,7 @@ let conf = {};
 /**
  * Merges the value of `conf` with the passed `cnf`
  *
- * @param {object} cnf Config to merge
+ * @param cnf - Config to merge
  */
 export const setConf = function (cnf: any) {
   conf = { ...conf, ...cnf };
@@ -17,11 +17,11 @@ export const setConf = function (cnf: any) {
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
  *
- * @param text
+ * @param _text - Mermaid graph definition.
- * @param {string} id The text for the error
+ * @param id - The text for the error
- * @param {string} mermaidVersion The version
+ * @param mermaidVersion - The version
  */
-export const draw = (text: string, id: string, mermaidVersion: string) => {
+export const draw = (_text: string, id: string, mermaidVersion: string) => {
   try {
     log.debug('Renering svg for syntax error\n');
 

packages/mermaid/src/diagrams/flowchart/flowChartShapes.js

@@ -279,11 +279,15 @@ function cylinder(parent, bbox, node) {
         (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))
     ) {
       // ellipsis equation: x*x / a*a + y*y / b*b = 1
-      // solve for y to get adjustion value for pos.y
+      // solve for y to get adjusted value for pos.y
       let y = ry * ry * (1 - (x * x) / (rx * rx));
-      if (y != 0) y = Math.sqrt(y);
+      if (y != 0) {
+        y = Math.sqrt(y);
+      }
       y = ry - y;
-      if (point.y - node.y > 0) y = -y;
+      if (point.y - node.y > 0) {
+        y = -y;
+      }
 
       pos.y += y;
     }

packages/mermaid/src/diagrams/flowchart/flowDb.js

@@ -119,7 +119,11 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
   if (typeof dir !== 'undefined') {
     vertices[id].dir = dir;
   }
+  if (typeof vertices[id].props === 'undefined') {
     vertices[id].props = props;
+  } else if (typeof props !== 'undefined') {
+    Object.assign(vertices[id].props, props);
+  }
 };
 
 /**
@@ -699,7 +703,9 @@ const destructLink = (_str, _startStr) => {
       startInfo.type = info.type;
     } else {
       // x-- xyz -->  - not supported
-      if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' };
+      if (startInfo.type !== info.type) {
+        return { type: 'INVALID', stroke: 'INVALID' };
+      }
 
       startInfo.type = 'double_' + startInfo.type;
     }

packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts

@@ -1,8 +1,9 @@
 import type { DiagramDetector } from '../../diagram-api/types';
 
 export const flowDetectorV2: DiagramDetector = (txt, config) => {
-  // If we have confgured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram
+  // If we have configured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram
-  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper' && txt.match(/^\s*graph/) !== null)
+  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper' && txt.match(/^\s*graph/) !== null) {
     return true;
+  }
   return txt.match(/^\s*flowchart/) !== null;
 };

packages/mermaid/src/diagrams/flowchart/flowDetector.ts

@@ -1,8 +1,10 @@
 import type { DiagramDetector } from '../../diagram-api/types';
 
 export const flowDetector: DiagramDetector = (txt, config) => {
-  // If we have confired to only use new flow charts this function shohuld always return false
+  // If we have conferred to only use new flow charts this function should always return false
   // as in not signalling true for a legacy flowchart
-  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') return false;
+  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
+    return false;
+  }
   return txt.match(/^\s*graph/) !== null;
 };

packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js

@@ -2,11 +2,7 @@ import flowDb from '../flowDb';
 import flow from './flow';
 import filter from 'lodash/filter';
 import { setConfig } from '../../../config';
-// import DOMPurify from 'dompurify';
 
-// const domPurify = DOMPurify.createDOMPurify(window);
-
-// const clean = DOMPurify.sanitize(dirty);
 setConfig({
   securityLevel: 'strict',
 });

packages/mermaid/src/diagrams/gantt/ganttDb.js

@@ -153,7 +153,9 @@ export const isInvalidDate = function (date, dateFormat, excludes, includes) {
 };
 
 const checkTaskDates = function (task, dateFormat, excludes, includes) {
-  if (!excludes.length || task.manualEndTime) return;
+  if (!excludes.length || task.manualEndTime) {
+    return;
+  }
   let startTime = moment(task.startTime, dateFormat, true);
   startTime.add(1, 'd');
   let endTime = moment(task.endTime, dateFormat, true);
@@ -229,7 +231,7 @@ const getStartDate = function (prevTime, dateFormat, str) {
  * Parse a string as a moment duration.
  *
  * The string have to be compound by a value and a shorthand duration unit. For example `5d`
- * representes 5 days.
+ * represents 5 days.
  *
  * Shorthand unit supported are:
  *

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

@@ -27,7 +27,7 @@ export const draw = function (text, id, version, diagObj) {
   // parser.parse(text);
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -427,7 +427,9 @@ export const draw = function (text, id, version, diagObj) {
     );
     const maxTime = tasks.reduce((max, { endTime }) => (max ? Math.max(max, endTime) : endTime), 0);
     const dateFormat = diagObj.db.getDateFormat();
-    if (!minTime || !maxTime) return;
+    if (!minTime || !maxTime) {
+      return;
+    }
 
     const excludeRanges = [];
     let range = null;
@@ -552,7 +554,9 @@ export const draw = function (text, id, version, diagObj) {
           const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
           tspan.setAttribute('alignment-baseline', 'central');
           tspan.setAttribute('x', '10');
-          if (j > 0) tspan.setAttribute('dy', '1em');
+          if (j > 0) {
+            tspan.setAttribute('dy', '1em');
+          }
           tspan.textContent = rows[j];
           svgLabel.appendChild(tspan);
         }

packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js

@@ -65,17 +65,6 @@ describe('when parsing a gantt diagram it', function () {
 
     expect(parserFnConstructor(str)).not.toThrow();
   });
-  /**
-   * Beslutsflöde inligt nedan. Obs bla bla bla
-   *
-   *     graph TD
-   *     A[Hard pledge] -- text on link -->B(Round edge)
-   *     B --> C{to do or not to do}
-   *     C -->|Too| D[Result one]
-   *     C -->|Doo| E[Result two]
-   *
-   * Params bapa - a unique bapap
-   */
   it('should handle a task definition', function () {
     const str =
       'gantt\n' +

packages/mermaid/src/diagrams/git/gitGraphAst.js

@@ -39,6 +39,7 @@ export const parseDirective = function (statement, context, type) {
 //  * @param currentCommit
 //  * @param otherCommit
 //  */
+// eslint-disable-next-line @cspell/spellchecker
 // function isfastforwardable(currentCommit, otherCommit) {
 //   log.debug('Entering isfastforwardable:', currentCommit.id, otherCommit.id);
 //   let cnt = 0;
@@ -384,21 +385,23 @@ export const checkout = function (branch) {
 /**
  * @param arr
  * @param key
- * @param newval
+ * @param newVal
  */
-function upsert(arr, key, newval) {
+function upsert(arr, key, newVal) {
   const index = arr.indexOf(key);
   if (index === -1) {
-    arr.push(newval);
+    arr.push(newVal);
   } else {
-    arr.splice(index, 1, newval);
+    arr.splice(index, 1, newVal);
   }
 }
 
 /** @param commitArr */
 function prettyPrintCommitHistory(commitArr) {
   const commit = commitArr.reduce((out, commit) => {
-    if (out.seq > commit.seq) return out;
+    if (out.seq > commit.seq) {
+      return out;
+    }
     return commit;
   }, commitArr[0]);
   let line = '';
@@ -411,7 +414,9 @@ function prettyPrintCommitHistory(commitArr) {
   });
   const label = [line, commit.id, commit.seq];
   for (let branch in branches) {
-    if (branches[branch] === commit.id) label.push(branch);
+    if (branches[branch] === commit.id) {
+      label.push(branch);
+    }
   }
   log.debug(label.join(' '));
   if (commit.parents && commit.parents.length == 2) {
@@ -451,7 +456,9 @@ export const clear = function () {
 export const getBranchesAsObjArray = function () {
   const branchesArray = Object.values(branchesConfig)
     .map((branchConfig, i) => {
-      if (branchConfig.order !== null) return branchConfig;
+      if (branchConfig.order !== null) {
+        return branchConfig;
+      }
       return {
         ...branchConfig,
         order: parseFloat(`0.${i}`, 10),

packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js

@@ -218,18 +218,18 @@ function cloneNode(svg, selector) {
 
 /**
  * @param svg
- * @param commitid
+ * @param commitId
  * @param branches
  * @param direction
  */
-function renderCommitHistory(svg, commitid, branches, direction) {
+function renderCommitHistory(svg, commitId, branches, direction) {
   let commit;
   const numCommits = Object.keys(allCommitsDict).length;
-  if (typeof commitid === 'string') {
+  if (typeof commitId === 'string') {
     do {
-      commit = allCommitsDict[commitid];
+      commit = allCommitsDict[commitId];
       logger.debug('in renderCommitHistory', commit.id, commit.seq);
-      if (svg.select('#node-' + commitid).size() > 0) {
+      if (svg.select('#node-' + commitId).size() > 0) {
         return;
       }
       svg
@@ -291,15 +291,15 @@ function renderCommitHistory(svg, commitid, branches, direction) {
           .attr('class', 'commit-msg')
           .text(', ' + commit.message);
       }
-      commitid = commit.parent;
+      commitId = commit.parent;
-    } while (commitid && allCommitsDict[commitid]);
+    } while (commitId && allCommitsDict[commitId]);
   }
 
-  if (Array.isArray(commitid)) {
+  if (Array.isArray(commitId)) {
-    logger.debug('found merge commmit', commitid);
+    logger.debug('found merge commmit', commitId);
-    renderCommitHistory(svg, commitid[0], branches, direction);
+    renderCommitHistory(svg, commitId[0], branches, direction);
     branchNum++;
-    renderCommitHistory(svg, commitid[1], branches, direction);
+    renderCommitHistory(svg, commitId[1], branches, direction);
     branchNum--;
   }
 }
@@ -357,7 +357,9 @@ export const draw = function (txt, id, ver) {
       branchNum++;
     }
     svg.attr('height', function () {
-      if (direction === 'BT') return Object.keys(allCommitsDict).length * config.nodeSpacing;
+      if (direction === 'BT') {
+        return Object.keys(allCommitsDict).length * config.nodeSpacing;
+      }
       return (branches.length + 1) * config.branchOffset;
     });
   } catch (e) {

packages/mermaid/src/diagrams/git/gitGraphRenderer.js

@@ -496,7 +496,7 @@ const drawBranches = (svg, branches) => {
 export const draw = function (txt, id, ver, diagObj) {
   clear();
   const conf = getConfig();
-  const gitGraphConfig = getConfig().gitGraph;
+  const gitGraphConfig = conf.gitGraph;
   // try {
   log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
 
@@ -523,7 +523,12 @@ export const draw = function (txt, id, ver, diagObj) {
   drawCommits(diagram, allCommitsDict, true);
 
   // Setup the view box and size of the svg element
-  setupGraphViewbox(undefined, diagram, gitGraphConfig.diagramPadding, conf.useMaxWidth);
+  setupGraphViewbox(
+    undefined,
+    diagram,
+    gitGraphConfig.diagramPadding,
+    gitGraphConfig.useMaxWidth ?? conf.useMaxWidth
+  );
 };
 
 export default {

packages/mermaid/src/diagrams/git/layout.js

@@ -1,6 +1,6 @@
 import { getConfig } from '../../config';
 
-export default (dir, _branches, _commits) => {
+export default (dir, _branches) => {
   const config = getConfig().gitGraph;
   const branches = [];
   const commits = [];

packages/mermaid/src/diagrams/info/infoRenderer.js

@@ -9,16 +9,15 @@ import { getConfig } from '../../config';
  * @param {any} text
  * @param {any} id
  * @param {any} version
- * @param diagObj
  */
-export const draw = (text, id, version, diagObj) => {
+export const draw = (text, id, version) => {
   try {
     // const parser = infoParser.parser;
     // parser.yy = db;
     log.debug('Rendering info diagram\n' + text);
 
     const securityLevel = getConfig().securityLevel;
-    // Handle root and Document for when rendering in sanbox mode
+    // Handle root and Document for when rendering in sandbox mode
     let sandboxElement;
     if (securityLevel === 'sandbox') {
       sandboxElement = select('#i' + id);

packages/mermaid/src/diagrams/pie/pieRenderer.js

@@ -21,7 +21,7 @@ export const draw = (txt, id, _version, diagObj) => {
     log.debug('Rendering info diagram\n' + txt);
 
     const securityLevel = configApi.getConfig().securityLevel;
-    // Handle root and Document for when rendering in sanbox mode
+    // Handle root and Document for when rendering in sandbox mode
     let sandboxElement;
     if (securityLevel === 'sandbox') {
       sandboxElement = select('#i' + id);
@@ -94,10 +94,22 @@ export const draw = (txt, id, _version, diagObj) => {
     var color = scaleOrdinal().range(myGeneratedColors);
 
     // Compute the position of each group on the pie:
-    var pie = d3pie().value(function (d) {
+    var pieData = Object.entries(data).map(function (el, idx) {
-      return d[1];
+      return {
+        order: idx,
+        name: el[0],
+        value: el[1],
+      };
     });
-    var dataReady = pie(Object.entries(data));
+    var pie = d3pie()
+      .value(function (d) {
+        return d.value;
+      })
+      .sort(function (a, b) {
+        // Sort slices in clockwise direction
+        return a.order - b.order;
+      });
+    var dataReady = pie(pieData);
 
     // Shape helper to build arcs:
     var arcGenerator = arc().innerRadius(0).outerRadius(radius);
@@ -110,7 +122,7 @@ export const draw = (txt, id, _version, diagObj) => {
       .append('path')
       .attr('d', arcGenerator)
       .attr('fill', function (d) {
-        return color(d.data[0]);
+        return color(d.data.name);
       })
       .attr('class', 'pieCircle');
 
@@ -122,7 +134,7 @@ export const draw = (txt, id, _version, diagObj) => {
       .enter()
       .append('text')
       .text(function (d) {
-        return ((d.data[1] / sum) * 100).toFixed(0) + '%';
+        return ((d.data.value / sum) * 100).toFixed(0) + '%';
       })
       .attr('transform', function (d) {
         return 'translate(' + arcGenerator.centroid(d) + ')';
@@ -166,9 +178,9 @@ export const draw = (txt, id, _version, diagObj) => {
       .attr('y', legendRectSize - legendSpacing)
       .text(function (d) {
         if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) {
-          return d.data[0] + ' [' + d.data[1] + ']';
+          return d.data.name + ' [' + d.data.value + ']';
         } else {
-          return d.data[0];
+          return d.data.name;
         }
       });
   } catch (e) {

packages/mermaid/src/diagrams/requirement/requirementRenderer.js

@@ -311,7 +311,7 @@ export const draw = (text, id, _version, diagObj) => {
   diagObj.parser.parse(text);
 
   const securityLevel = conf.securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);

packages/mermaid/src/diagrams/sequence/sequenceDb.js

@@ -26,7 +26,9 @@ export const parseDirective = function (statement, context, type) {
 export const addActor = function (id, name, description, type) {
   // Don't allow description nulling
   const old = actors[id];
-  if (old && name === old.name && description == null) return;
+  if (old && name === old.name && description == null) {
+    return;
+  }
 
   // Don't allow null descriptions, either
   if (description == null || description.text == null) {

packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts

@@ -10,6 +10,7 @@ import assignWithDepth from '../../assignWithDepth';
 import utils from '../../utils';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import addSVGAccessibilityFields from '../../accessibility';
+import Diagram from '../../Diagram';
 
 let conf = {};
 
@@ -100,8 +101,8 @@ export const bounds = {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const _self = this;
     let cnt = 0;
-    /** @param {any} type */
+    /** @param type - Either `activation` or `undefined` */
-    function updateFn(type) {
+    function updateFn(type?: 'activation') {
       return function updateItemBounds(item) {
         cnt++;
         // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
@@ -200,15 +201,25 @@ export const bounds = {
   },
 };
 
+/** Options for drawing a note in {@link drawNote} */
+interface NoteModel {
+  /** x axis start position */
+  startx: number;
+  /** y axis position */
+  starty: number;
+  /** the message to be shown */
+  message: string;
+  /** Set this with a custom width to override the default configured width. */
+  width: number;
+}
+
 /**
  * Draws an note in the diagram with the attached line
  *
- * @param {any} elem - The diagram to draw to.
+ * @param elem - The diagram to draw to.
- * @param {{ x: number; y: number; message: string; width: number }} noteModel - Startx: x axis
+ * @param noteModel - Note model options.
- *   start position, verticalPos: y axis position, messsage: the message to be shown, width: Set
- *   this with a custom width to override the default configured width.
  */
-const drawNote = function (elem, noteModel) {
+const drawNote = function (elem: any, noteModel: NoteModel) {
   bounds.bumpVerticalPos(conf.boxMargin);
   noteModel.height = conf.boxMargin;
   noteModel.starty = bounds.getVerticalPos();
@@ -278,11 +289,11 @@ const actorFont = (cnf) => {
  * message so it can be drawn later. We do not draw the message at this point so the arrowhead can
  * be on top of the activation box.
  *
- * @param {any} diagram - The parent of the message element
+ * @param _diagram - The parent of the message element.
- * @param {any} msgModel - The model containing fields describing a message
+ * @param msgModel - The model containing fields describing a message
- * @returns {number} LineStarty - The Y coordinate at which the message line starts
+ * @returns `lineStartY` - The Y coordinate at which the message line starts
  */
-const boundMessage = function (diagram, msgModel) {
+function boundMessage(_diagram, msgModel): number {
   bounds.bumpVerticalPos(10);
   const { startx, stopx, message } = msgModel;
   const lines = common.splitBreaks(message).length;
@@ -292,15 +303,15 @@ const boundMessage = function (diagram, msgModel) {
 
   bounds.bumpVerticalPos(lineHeight);
 
-  let lineStarty;
+  let lineStartY;
   let totalOffset = textDims.height - 10;
   const textWidth = textDims.width;
 
   if (startx === stopx) {
-    lineStarty = bounds.getVerticalPos() + totalOffset;
+    lineStartY = bounds.getVerticalPos() + totalOffset;
     if (!conf.rightAngles) {
       totalOffset += conf.boxMargin;
-      lineStarty = bounds.getVerticalPos() + totalOffset;
+      lineStartY = bounds.getVerticalPos() + totalOffset;
     }
     totalOffset += 30;
     const dx = Math.max(textWidth / 2, conf.width / 2);
@@ -312,26 +323,26 @@ const boundMessage = function (diagram, msgModel) {
     );
   } else {
     totalOffset += conf.boxMargin;
-    lineStarty = bounds.getVerticalPos() + totalOffset;
+    lineStartY = bounds.getVerticalPos() + totalOffset;
-    bounds.insert(startx, lineStarty - 10, stopx, lineStarty);
+    bounds.insert(startx, lineStartY - 10, stopx, lineStartY);
   }
   bounds.bumpVerticalPos(totalOffset);
   msgModel.height += totalOffset;
   msgModel.stopy = msgModel.starty + msgModel.height;
   bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy);
 
-  return lineStarty;
+  return lineStartY;
-};
+}
 
 /**
  * Draws a message. Note that the bounds have previously been updated by boundMessage.
  *
- * @param {any} diagram - The parent of the message element
+ * @param diagram - The parent of the message element
- * @param {any} msgModel - The model containing fields describing a message
+ * @param msgModel - The model containing fields describing a message
- * @param {number} lineStarty - The Y coordinate at which the message line starts
+ * @param lineStartY - The Y coordinate at which the message line starts
- * @param diagObj
+ * @param diagObj - The diagram object.
  */
-const drawMessage = function (diagram, msgModel, lineStarty, diagObj) {
+const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Diagram) {
   const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel;
   const textDims = utils.calculateTextDimensions(message, messageFont(conf));
   const textObj = svgDraw.getTextObj();
@@ -360,8 +371,8 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) {
         .append('path')
         .attr(
           'd',
-          `M  ${startx},${lineStarty} H ${startx + Math.max(conf.width / 2, textWidth / 2)} V ${
+          `M  ${startx},${lineStartY} H ${startx + Math.max(conf.width / 2, textWidth / 2)} V ${
-            lineStarty + 25
+            lineStartY + 25
           } H ${startx}`
         );
     } else {
@@ -372,27 +383,27 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) {
           'M ' +
             startx +
             ',' +
-            lineStarty +
+            lineStartY +
             ' C ' +
             (startx + 60) +
             ',' +
-            (lineStarty - 10) +
+            (lineStartY - 10) +
             ' ' +
             (startx + 60) +
             ',' +
-            (lineStarty + 30) +
+            (lineStartY + 30) +
             ' ' +
             startx +
             ',' +
-            (lineStarty + 20)
+            (lineStartY + 20)
         );
     }
   } else {
     line = diagram.append('line');
     line.attr('x1', startx);
-    line.attr('y1', lineStarty);
+    line.attr('y1', lineStartY);
     line.attr('x2', stopx);
-    line.attr('y2', lineStarty);
+    line.attr('y2', lineStartY);
   }
   // Make an SVG Container
   // Draw the line
@@ -440,7 +451,7 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) {
     diagram
       .append('text')
       .attr('x', startx)
-      .attr('y', lineStarty + 4)
+      .attr('y', lineStartY + 4)
       .attr('font-family', 'sans-serif')
       .attr('font-size', '12px')
       .attr('text-anchor', 'middle')
@@ -554,13 +565,6 @@ const activationBounds = function (actor, actors) {
   return [left, right];
 };
 
-/**
- * @param {any} loopWidths
- * @param {any} msg
- * @param {any} preMargin
- * @param {any} postMargin
- * @param {any} addLoopFn
- */
 function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoopFn) {
   bounds.bumpVerticalPos(preMargin);
   let heightAdjust = postMargin;
@@ -584,15 +588,15 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
  *
- * @param {any} _text The text of the diagram
+ * @param _text - The text of the diagram
- * @param {any} id The id of the diagram which will be used as a DOM element id¨
+ * @param id - The id of the diagram which will be used as a DOM element id¨
- * @param {any} _version Mermaid version from package.json
+ * @param _version - Mermaid version from package.json
- * @param {any} diagObj A stanard diagram containing the db and the text and type etc of the diagram
+ * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
  */
-export const draw = function (_text, id, _version, diagObj) {
+export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) {
   const { securityLevel, sequence } = configApi.getConfig();
   conf = sequence;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -632,10 +636,10 @@ export const draw = function (_text, id, _version, diagObj) {
   svgDraw.insertSequenceNumber(diagram);
 
   /**
-   * @param {any} msg
+   * @param msg - The message to draw.
-   * @param {any} verticalPos
+   * @param verticalPos - The vertical position of the message.
    */
-  function activeEnd(msg, verticalPos) {
+  function activeEnd(msg: any, verticalPos: number) {
     const activationData = bounds.endActivation(msg);
     if (activationData.starty + 18 > verticalPos) {
       activationData.starty = verticalPos - 6;
@@ -762,8 +766,11 @@ export const draw = function (_text, id, _version, diagObj) {
       case diagObj.db.LINETYPE.AUTONUMBER:
         sequenceIndex = msg.message.start || sequenceIndex;
         sequenceIndexStep = msg.message.step || sequenceIndexStep;
-        if (msg.message.visible) diagObj.db.enableSequenceNumbers();
+        if (msg.message.visible) {
-        else diagObj.db.disableSequenceNumbers();
+          diagObj.db.enableSequenceNumbers();
+        } else {
+          diagObj.db.disableSequenceNumbers();
+        }
         break;
       case diagObj.db.LINETYPE.CRITICAL_START:
         adjustLoopHeightForWrap(
@@ -811,8 +818,8 @@ export const draw = function (_text, id, _version, diagObj) {
           msgModel.starty = bounds.getVerticalPos();
           msgModel.sequenceIndex = sequenceIndex;
           msgModel.sequenceVisible = diagObj.db.showSequenceNumbers();
-          const lineStarty = boundMessage(diagram, msgModel);
+          const lineStartY = boundMessage(diagram, msgModel);
-          messagesToDraw.push({ messageModel: msgModel, lineStarty: lineStarty });
+          messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY });
           bounds.models.addMessage(msgModel);
         } catch (e) {
           log.error('error while drawing message', e);
@@ -836,7 +843,7 @@ export const draw = function (_text, id, _version, diagObj) {
     }
   });
 
-  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStarty, diagObj));
+  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
 
   if (conf.mirrorActors) {
     // Draw actors below diagram
@@ -907,12 +914,16 @@ export const draw = function (_text, id, _version, diagObj) {
  * It will enumerate each given message, and will determine its text width, in relation to the actor
  * it originates from, and destined to.
  *
- * @param {any} actors - The actors map
+ * @param actors - The actors map
- * @param {Array} messages - A list of message objects to iterate
+ * @param messages - A list of message objects to iterate
- * @param diagObj
+ * @param diagObj - The diagram object.
- * @returns {any}
+ * @returns The max message width of each actor.
  */
-const getMaxMessageWidthPerActor = function (actors, messages, diagObj) {
+function getMaxMessageWidthPerActor(
+  actors: { [id: string]: any },
+  messages: any[],
+  diagObj: Diagram
+): { [id: string]: number } {
   const maxMessageWidthPerActor = {};
 
   messages.forEach(function (msg) {
@@ -1005,7 +1016,7 @@ const getMaxMessageWidthPerActor = function (actors, messages, diagObj) {
 
   log.debug('maxMessageWidthPerActor:', maxMessageWidthPerActor);
   return maxMessageWidthPerActor;
-};
+}
 
 const getRequiredPopupWidth = function (actor) {
   let requiredPopupWidth = 0;
@@ -1022,15 +1033,19 @@ const getRequiredPopupWidth = function (actor) {
 };
 
 /**
- * This will calculate the optimal margin for each given actor, for a given actor->messageWidth map.
+ * This will calculate the optimal margin for each given actor,
+ * for a given actor → messageWidth map.
  *
  * An actor's margin is determined by the width of the actor, the width of the largest message that
  * originates from it, and the configured conf.actorMargin.
  *
- * @param {any} actors - The actors map to calculate margins for
+ * @param actors - The actors map to calculate margins for
- * @param {any} actorToMessageWidth - A map of actor key -> max message width it holds
+ * @param actorToMessageWidth - A map of actor key → max message width it holds
  */
-const calculateActorMargins = function (actors, actorToMessageWidth) {
+function calculateActorMargins(
+  actors: { [id: string]: any },
+  actorToMessageWidth: ReturnType<typeof getMaxMessageWidthPerActor>
+) {
   let maxHeight = 0;
   Object.keys(actors).forEach((prop) => {
     const actor = actors[prop];
@@ -1071,7 +1086,7 @@ const calculateActorMargins = function (actors, actorToMessageWidth) {
   }
 
   return Math.max(maxHeight, conf.height);
-};
+}
 
 const buildNoteModel = function (msg, actors, diagObj) {
   const startx = actors[msg.from].x;

packages/mermaid/src/diagrams/sequence/svgDraw.js

@@ -31,7 +31,9 @@ const addPopupInteraction = (id, actorCnt) => {
   addFunction(() => {
     const arr = document.querySelectorAll(id);
     // This will be the case when running in sandboxed mode
-    if (arr.length === 0) return;
+    if (arr.length === 0) {
+      return;
+    }
     arr[0].addEventListener('mouseover', function () {
       popupMenuUpFunc('actor' + actorCnt + '_popup');
     });
@@ -322,7 +324,9 @@ export const drawLabel = function (elem, txtObject) {
 let actorCnt = -1;
 
 export const fixLifeLineHeights = (diagram, bounds) => {
-  if (!diagram.selectAll) return;
+  if (!diagram.selectAll) {
+    return;
+  }
   diagram
     .selectAll('.actor-line')
     .attr('class', '200')
@@ -509,7 +513,7 @@ export const anchorElement = function (elem) {
  *
  * @param {any} elem - Element to append activation rect.
  * @param {any} bounds - Activation box bounds.
- * @param {any} verticalPos - Precise y cooridnate of bottom activation box edge.
+ * @param {any} verticalPos - Precise y coordinate of bottom activation box edge.
  * @param {any} conf - Sequence diagram config object.
  * @param {any} actorActivations - Number of activations on the actor.
  */
@@ -527,10 +531,10 @@ export const drawActivation = function (elem, bounds, verticalPos, conf, actorAc
 /**
  * Draws a loop in the diagram
  *
- * @param {any} elem - Elemenet to append the loop to.
+ * @param {any} elem - Element to append the loop to.
  * @param {any} loopModel - LoopModel of the given loop.
  * @param {any} labelText - Text within the loop.
- * @param {any} conf - Diagrom configuration
+ * @param {any} conf - Diagram configuration
  * @returns {any}
  */
 export const drawLoop = function (elem, loopModel, labelText, conf) {

packages/mermaid/src/diagrams/state/parser/state-style.spec.js

@@ -36,7 +36,7 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
         expect(styleClasses['exampleClass'].styles[2]).toEqual('font-style:italic');
       });
 
-      // need to look at what the lexer is doing.  see the work on the chevotrain parser
+      // need to look at what the lexer is doing
       it('an attribute can have a dot in the style', function () {
         stateDiagram.parser.parse(
           'stateDiagram-v2\n classDef exampleStyleClass background:#bbb,border:1.5px solid red;'

packages/mermaid/src/diagrams/state/shapes.js

@@ -137,7 +137,7 @@ export const drawDescrState = (g, stateDef) => {
 
 /** Adds the creates a box around the existing content and adds a panel for the id on top of the content. */
 /**
- * Function that creates an title row and a frame around a substate for a composit state diagram.
+ * Function that creates an title row and a frame around a substate for a composite state diagram.
  * The function returns a new d3 svg object with updated width and height properties;
  *
  * @param {any} g The d3 svg object for the substate to framed
@@ -178,7 +178,7 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
   // descrLine.attr('x2', graphBox.width + getConfig().state.padding);
 
   if (stateDef.doc) {
-    // cnsole.warn(
+    // console.warn(
     //   stateDef.id,
     //   'orgX: ',
     //   orgX,
@@ -217,7 +217,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
     .attr('rx', '0');
 
   title.attr('x', startX + pad);
-  if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);
+  if (titleWidth <= orgWidth) {
+    title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);
+  }
 
   // Title background
   g.insert('rect', ':first-child')
@@ -379,14 +381,27 @@ export const drawState = function (elem, stateDef) {
 
   const g = elem.append('g').attr('id', id).attr('class', 'stateGroup');
 
-  if (stateDef.type === 'start') drawStartState(g);
+  if (stateDef.type === 'start') {
-  if (stateDef.type === 'end') drawEndState(g);
+    drawStartState(g);
-  if (stateDef.type === 'fork' || stateDef.type === 'join') drawForkJoinState(g, stateDef);
+  }
-  if (stateDef.type === 'note') drawNote(stateDef.note.text, g);
+  if (stateDef.type === 'end') {
-  if (stateDef.type === 'divider') drawDivider(g);
+    drawEndState(g);
-  if (stateDef.type === 'default' && stateDef.descriptions.length === 0)
+  }
+  if (stateDef.type === 'fork' || stateDef.type === 'join') {
+    drawForkJoinState(g, stateDef);
+  }
+  if (stateDef.type === 'note') {
+    drawNote(stateDef.note.text, g);
+  }
+  if (stateDef.type === 'divider') {
+    drawDivider(g);
+  }
+  if (stateDef.type === 'default' && stateDef.descriptions.length === 0) {
     drawSimpleState(g, stateDef);
-  if (stateDef.type === 'default' && stateDef.descriptions.length > 0) drawDescrState(g, stateDef);
+  }
+  if (stateDef.type === 'default' && stateDef.descriptions.length > 0) {
+    drawDescrState(g, stateDef);
+  }
 
   const stateBox = g.node().getBBox();
   stateInfo.width = stateBox.width + 2 * getConfig().state.padding;

packages/mermaid/src/diagrams/state/stateDb.js

@@ -228,7 +228,9 @@ export const addState = function (
 
   if (descr) {
     log.info('Setting state description', id, descr);
-    if (typeof descr === 'string') addDescription(id, descr.trim());
+    if (typeof descr === 'string') {
+      addDescription(id, descr.trim());
+    }
 
     if (typeof descr === 'object') {
       descr.forEach((des) => addDescription(id, des.trim()));
@@ -437,7 +439,7 @@ const getDividerId = () => {
 
 /**
  * Called when the parser comes across a (style) class definition
- * @example classDef someclass fill:#f96;
+ * @example classDef my-style fill:#f96;
  *
  * @param {string} id - the id of this (style) class
  * @param  {string} styleAttributes - the string with 1 or more style attributes (each separated by a comma)

packages/mermaid/src/diagrams/state/stateDetector-V2.ts

@@ -1,8 +1,11 @@
 import type { DiagramDetector } from '../../diagram-api/types';
 
 export const stateDetectorV2: DiagramDetector = (text, config) => {
-  if (text.match(/^\s*stateDiagram-v2/) !== null) return true;
+  if (text.match(/^\s*stateDiagram-v2/) !== null) {
-  if (text.match(/^\s*stateDiagram/) && config?.state?.defaultRenderer === 'dagre-wrapper')
     return true;
+  }
+  if (text.match(/^\s*stateDiagram/) && config?.state?.defaultRenderer === 'dagre-wrapper') {
+    return true;
+  }
   return false;
 };

packages/mermaid/src/diagrams/state/stateDetector.ts

@@ -1,8 +1,10 @@
 import type { DiagramDetector } from '../../diagram-api/types';
 
 export const stateDetector: DiagramDetector = (txt, config) => {
-  // If we have confired to only use new state diagrams this function should always return false
+  // If we have confirmed to only use new state diagrams this function should always return false
   // as in not signalling true for a legacy state diagram
-  if (config?.state?.defaultRenderer === 'dagre-wrapper') return false;
+  if (config?.state?.defaultRenderer === 'dagre-wrapper') {
+    return false;
+  }
   return txt.match(/^\s*stateDiagram/) !== null;
 };

packages/mermaid/src/diagrams/state/stateRenderer-v2.js

@@ -89,7 +89,9 @@ export const setConf = function (cnf) {
  */
 export const getClasses = function (text, diagramObj) {
   log.trace('Extracting classes');
-  if (diagramClasses.length > 0) return diagramClasses; // we have already extracted the classes
+  if (diagramClasses.length > 0) {
+    return diagramClasses; // we have already extracted the classes
+  }
 
   diagramObj.db.clear();
   try {
@@ -113,11 +115,14 @@ export const getClasses = function (text, diagramObj) {
  * @returns {string}
  */
 function getClassesFromDbInfo(dbInfoItem) {
-  if (typeof dbInfoItem === 'undefined' || dbInfoItem === null) return '';
+  if (typeof dbInfoItem === 'undefined' || dbInfoItem === null) {
-  else {
+    return '';
+  } else {
     if (dbInfoItem.classes) {
       return dbInfoItem.classes.join(' ');
-    } else return '';
+    } else {
+      return '';
+    }
   }
 }
 
@@ -151,9 +156,15 @@ const setupNode = (g, parent, parsedItem, diagramDb, altFlag) => {
 
   if (itemId !== 'root') {
     let shape = SHAPE_STATE;
-    if (parsedItem.start === true) shape = SHAPE_START;
+    if (parsedItem.start === true) {
-    if (parsedItem.start === false) shape = SHAPE_END;
+      shape = SHAPE_START;
-    if (parsedItem.type !== DEFAULT_STATE_TYPE) shape = parsedItem.type;
+    }
+    if (parsedItem.start === false) {
+      shape = SHAPE_END;
+    }
+    if (parsedItem.type !== DEFAULT_STATE_TYPE) {
+      shape = parsedItem.type;
+    }
 
     // Add the node to our list (nodeDb)
     if (!nodeDb[itemId]) {
@@ -382,7 +393,9 @@ export const draw = function (text, id, _version, diag) {
   nodeDb = {};
   // Fetch the default direction, use TD if none was found
   let dir = diag.db.getDirection();
-  if (typeof dir === 'undefined') dir = DEFAULT_DIAGRAM_DIRECTION;
+  if (typeof dir === 'undefined') {
+    dir = DEFAULT_DIAGRAM_DIRECTION;
+  }
 
   const { securityLevel, state: conf } = getConfig();
   const nodeSpacing = conf.nodeSpacing || 50;

packages/mermaid/src/diagrams/state/stateRenderer.js

@@ -47,7 +47,7 @@ const insertMarkers = function (elem) {
 export const draw = function (text, id, _version, diagObj) {
   conf = getConfig().state;
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -120,7 +120,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
   }
 
   // Set an object for the graph label
-  if (parentId)
+  if (parentId) {
     graph.setGraph({
       rankdir: 'LR',
       multigraph: true,
@@ -133,7 +133,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
       // ranksep: 5,
       // nodesep: 1
     });
-  else {
+  } else {
     graph.setGraph({
       rankdir: 'TB',
       multigraph: true,
@@ -268,7 +268,9 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
         let pWidth = 0;
         let pShift = 0;
         if (parent) {
-          if (parent.parentElement) pWidth = parent.parentElement.getBBox().width;
+          if (parent.parentElement) {
+            pWidth = parent.parentElement.getBBox().width;
+          }
           pShift = parseInt(parent.getAttribute('data-x-shift'), 10);
           if (Number.isNaN(pShift)) {
             pShift = 0;

packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts

@@ -15,7 +15,7 @@ export const setConf = function (cnf) {
 
 const actors = {};
 
-/** @param {any} diagram */
+/** @param diagram - The diagram to draw to. */
 function drawActorLegend(diagram) {
   const conf = getConfig().journey;
   // Draw the actors
@@ -54,7 +54,7 @@ export const draw = function (text, id, version, diagObj) {
   diagObj.parser.parse(text + '\n');
 
   const securityLevel = getConfig().securityLevel;
-  // Handle root and Document for when rendering in sanbox mode
+  // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -74,7 +74,9 @@ export const draw = function (text, id, version, diagObj) {
   const title = diagObj.db.getDiagramTitle();
 
   const actorNames = diagObj.db.getActors();
-  for (const member in actors) delete actors[member];
+  for (const member in actors) {
+    delete actors[member];
+  }
   let actorPos = 0;
   actorNames.forEach((actorName) => {
     actors[actorName] = {
@@ -155,8 +157,8 @@ export const bounds = {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const _self = this;
     let cnt = 0;
-    /** @param {any} type */
+    /** @param type - Set to `activation` if activation */
-    function updateFn(type) {
+    function updateFn(type?: 'activation') {
       return function updateItemBounds(item) {
         cnt++;
         // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
@@ -261,7 +263,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
 
     // Draw the box with the attached line
     svgDraw.drawTask(diagram, task, conf);
-    bounds.insert(task.x, task.y, task.x + task.width + conf.taskMargin, 300 + 5 * 30); // stopy is the length of the descenders.
+    bounds.insert(task.x, task.y, task.x + task.width + conf.taskMargin, 300 + 5 * 30); // stopY is the length of the descenders.
   }
 };
 

packages/mermaid/src/diagrams/user-journey/svgDraw.js

@@ -218,7 +218,7 @@ export const drawSection = function (elem, section, conf) {
 
 let taskCount = -1;
 /**
- * Draws an actor in the diagram with the attaced line
+ * Draws an actor in the diagram with the attached line
  *
  * @param {any} elem The HTML element
  * @param {any} task The task to render

packages/mermaid/src/docs.mts

@@ -35,7 +35,7 @@ import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
 import type { Code, Root } from 'mdast';
-import { join, dirname } from 'path';
+import { posix, dirname } from 'path';
 import prettier from 'prettier';
 import { remark } from 'remark';
 // @ts-ignore No typescript declaration file
@@ -210,30 +210,28 @@ const transformHtml = (filename: string) => {
   copyTransformedContents(filename, !verifyOnly, formattedHTML);
 };
 
+const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
+  return await globby(globs, { dot: true });
+};
+
 /** Main method (entry point) */
 (async () => {
   if (verifyOnly) {
     console.log('Verifying that all files are in sync with the source files');
   }
-  const sourceDirGlob = join('.', SOURCE_DOCS_DIR, '**');
+  const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
-  const includeFilesStartingWithDot = true;
+  const action = verifyOnly ? 'Verifying' : 'Transforming';
 
-  console.log('Transforming markdown files...');
+  const mdFiles = await getFilesFromGlobs([posix.join(sourceDirGlob, '*.md')]);
-  const mdFiles = await globby([join(sourceDirGlob, '*.md')], {
+  console.log(`${action} ${mdFiles.length} markdown files...`);
-    dot: includeFilesStartingWithDot,
-  });
   mdFiles.forEach(transformMarkdown);
 
-  console.log('Transforming html files...');
+  const htmlFiles = await getFilesFromGlobs([posix.join(sourceDirGlob, '*.html')]);
-  const htmlFiles = await globby([join(sourceDirGlob, '*.html')], {
+  console.log(`${action} ${htmlFiles.length} html files...`);
-    dot: includeFilesStartingWithDot,
-  });
   htmlFiles.forEach(transformHtml);
 
-  console.log('Transforming all other files...');
+  const otherFiles = await getFilesFromGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']);
-  const otherFiles = await globby([sourceDirGlob, '!**/*.md', '!**/*.html'], {
+  console.log(`${action} ${otherFiles.length} other files...`);
-    dot: includeFilesStartingWithDot,
-  });
   otherFiles.forEach((file: string) => {
     copyTransformedContents(file, !verifyOnly); // no transformation
   });
@@ -244,7 +242,7 @@ const transformHtml = (filename: string) => {
       process.exit(1);
     }
     if (git) {
-      console.log('Adding changes in ${FINAL_DOCS_DIR} folder to git');
+      console.log(`Adding changes in ${FINAL_DOCS_DIR} folder to git`);
       exec('git add docs');
     }
   }

packages/mermaid/src/docs/classDiagram.md

@@ -9,7 +9,9 @@ Mermaid can render class diagrams.
 
 ```mermaid-example
 classDiagram
+    note "From Duck till Zebra"
     Animal <|-- Duck
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -375,6 +377,10 @@ click className href "url" "tooltip"
 - (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
 - note: callback function will be called with the nodeId as parameter.
 
+## Notes
+
+It is possible to add notes on digram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+
 ### Examples
 
 _URL Link:_

packages/mermaid/src/docs/entityRelationshipDiagram.md

@@ -85,10 +85,34 @@ Cardinality is a property that describes how many elements of another entity can
 |     `}o`     |     `o{`      | Zero or more (no upper limit) |
 |    `}\|`     |     `\|{`     | One or more (no upper limit)  |
 
+**Aliases**
+
+| Value (left) | Value (right) | Alias for    |
+| :----------: | :-----------: | ------------ |
+| one or zero  |  one or zero  | Zero or one  |
+| zero or one  |  zero or one  | Zero or one  |
+| one or more  |  one or more  | One or more  |
+| one or many  |  one or many  | One or more  |
+|   many(1)    |    many(1)    | One or more  |
+|      1+      |      1+       | One or more  |
+| zero or more | zero or more  | Zero or more |
+| zero or many | zero or many  | Zero or more |
+|   many(0)    |    many(1)    | Zero or more |
+|      0+      |      0+       | Zero or more |
+|   only one   |   only one    | Exactly one  |
+|      1       |       1       | Exactly one  |
+
 ### Identification
 
 Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
 
+**Aliases**
+
+|     Value     |     Alias for     |
+| :-----------: | :---------------: |
+|      to       |   _identifying_   |
+| optionally to | _non-identifying_ |
+
 ```mmd
 erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
@@ -155,6 +179,7 @@ erDiagram
         string lastName
         int age
     }
+    MANUFACTURER only one to zero or more CAR
 ```
 
 ### Other Things

packages/mermaid/src/docs/flowchart.md

@@ -198,8 +198,8 @@ flowchart LR
 ### Dotted link
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
-   A-.->B;
+   A-.->B
 ```
 
 ### Dotted link with text
@@ -587,7 +587,7 @@ A shorter form of adding a class is to attach the classname to the node using th
 ```mermaid-example
 flowchart LR
     A:::someclass --> B
-    classDef someclass fill:#f96;
+    classDef someclass fill:#f96
 ```
 
 ### Css classes
@@ -610,7 +610,7 @@ below:
 **Example definition**
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
     A-->B[AAA<span>BBB</span>]
     B-->D
     class A cssClass
@@ -634,7 +634,7 @@ The icons are accessed via the syntax fa:#icon class name#.
 flowchart TD
     B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 

packages/mermaid/src/docs/index.html

@@ -15,6 +15,14 @@
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
     />
+    <meta property="og:title" content="Mermaid" />
+    <meta property="og:url" content="https://mermaid-js.github.io/mermaid/" />
+    <meta property="og:image" content="https://mermaid-js.github.io/mermaid/img/header.png" />
+    <meta
+      property="og:description"
+      content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
+    />
+    <meta property="og:type" content="website" />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
     <link
@@ -28,12 +36,27 @@
     ></script>
     <script>
       const require = {
-        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
+        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' },
       };
     </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
+    <script
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
+      integrity="sha512-6bIYsGqvLpAiEBXPdRQeFf5cueeBECtAKJjIHer3BhBZNTV3WLcLA8Tm3pDfxUwTMIS+kAZwTUvJ1IrMdX8C5w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.nls.min.js"
+      integrity="sha512-CCv+DKWw+yZhxf4Z+ExT6HC5G+3S45TeMTYcJyYbdrv4BpK2vyALJ4FoVR/KGWDIPu7w4tNCOC9MJQIkYPR5FA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.js"
+      integrity="sha512-u4eMtetNbBJvHXdLXs2kWZvJiVlg3cmkVcxrLzSPa1eNFuHygPYvyMWyK9PsD6Eq2MZSo+mTyjds8uuhPzVxHA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
     <script>
       exports = {};
     </script>
@@ -57,6 +80,7 @@
       let parser = new DOMParser();
       let currentCodeExample = 0;
       let colorize = [];
+      let num = 0;
 
       function colorizeEverything(html) {
         initEditor(monaco);
@@ -127,8 +151,9 @@
             hook.afterEach(function (html, next) {
               next(html);
               (async () => {
-                while (!window.hasOwnProperty('monaco'))
+                while (!window.hasOwnProperty('monaco')) {
                   await new Promise((resolve) => setTimeout(resolve, 1000));
+                }
                 colorizeEverything(html).then(
                   (newHTML) =>
                     (document.querySelector('article.markdown-section').innerHTML = newHTML)
@@ -146,7 +171,9 @@
         startOnLoad: false,
         themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
       };
-      if (isDarkMode) conf.theme = 'dark';
+      if (isDarkMode) {
+        conf.theme = 'dark';
+      }
       mermaid.initialize(conf);
     </script>
     <script>

packages/mermaid/src/docs/pie.md

@@ -19,7 +19,7 @@ Drawing a pie chart is really simple in mermaid.
 - Start with `pie` keyword to begin the diagram
   - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
 - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
-- Followed by dataSet
+- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
   - `label` for a section in the pie diagram within `" "` quotes.
   - Followed by `:` colon as separator
   - Followed by `positive numeric value` (supported upto two decimal places)

packages/mermaid/src/docs/sequenceDiagram.md

@@ -66,7 +66,7 @@ Messages can be of two displayed either solid or with a dotted line.
 [Actor][Arrow][Actor]:Message text
 ```
 
-There are six types of arrows currently supported:
+There are eight types of arrows currently supported:
 
 | Type | Description                                      |
 | ---- | ------------------------------------------------ |

packages/mermaid/src/logger.ts

@@ -27,7 +27,7 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
 /**
  * Sets a log level
  *
- * @param {LogLevel} [level="fatal"] The level to set the logging to. Default is `"fatal"`
+ * @param level - The level to set the logging to. Default is `"fatal"`
  */
 export const setLogLevel = function (level: keyof typeof LEVELS | number | string = 'fatal') {
   let numericLevel: number = LEVELS.fatal;
@@ -80,10 +80,10 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin
 /**
  * Returns a format with the timestamp and the log level
  *
- * @param {LogLevel} level The level for the log format
+ * @param level - The level for the log format
- * @returns {string} The format with the timestamp and log level
+ * @returns The format with the timestamp and log level
  */
-const format = (level: string): string => {
+const format = (level: Uppercase<LogLevel>): string => {
   const time = moment().format('ss.SSS');
   return `%c${time} : ${level} : `;
 };

packages/mermaid/src/mermaid.ts

@@ -8,6 +8,7 @@ import utils from './utils';
 import { mermaidAPI } from './mermaidAPI';
 import { addDetector } from './diagram-api/detectType';
 import { isDetailedError } from './utils';
+import type { ParseErrorFunction } from './Diagram';
 
 /**
  * ## init
@@ -18,12 +19,6 @@ import { isDetailedError } from './utils';
  * elements with the attribute already set. This way the init function can be triggered several
  * times.
  *
- * Optionally, `init` can accept in the second argument one of the following:
- *
- * - A DOM Node
- * - An array of DOM nodes (as would come from a jQuery selector)
- * - A W3C selector, a la `.mermaid`
- *
  * ```mermaid
  * graph LR;
  *  a(Find elements)-->b{Processed}
@@ -33,9 +28,12 @@ import { isDetailedError } from './utils';
  *
  * Renders the mermaid diagrams
  *
- * @param config
+ * @param config - **Deprecated**, please set configuration in {@link initialize}.
- * @param nodes
+ * @param nodes - **Default**: `.mermaid`. One of the following:
- * @param callback
+ * - A DOM Node
+ * - An array of DOM nodes (as would come from a jQuery selector)
+ * - A W3C selector, a la `.mermaid`
+ * @param callback - Called once for each rendered diagram's id.
  */
 const init = async function (
   config?: MermaidConfig,
@@ -62,7 +60,7 @@ const init = async function (
       log.warn(e.str);
     }
     if (mermaid.parseError) {
-      mermaid.parseError(e);
+      mermaid.parseError(e as string);
     }
   }
 };
@@ -142,7 +140,9 @@ const initThrowsErrors = async function (
           if (typeof callback !== 'undefined') {
             callback(id);
           }
-          if (bindFunctions) bindFunctions(element);
+          if (bindFunctions) {
+            bindFunctions(element);
+          }
         },
         element
       );
@@ -199,7 +199,7 @@ if (typeof document !== 'undefined') {
  * This is provided for environments where the mermaid object can't directly have a new member added
  * to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).
  *
- * @param {function (err, hash)} newParseErrorHandler New parseError() callback.
+ * @param newParseErrorHandler - New parseError() callback.
  */
 const setParseErrorHandler = function (newParseErrorHandler: (err: any, hash: any) => void) {
   mermaid.parseError = newParseErrorHandler;
@@ -212,8 +212,7 @@ const parse = (txt: string) => {
 const mermaid: {
   startOnLoad: boolean;
   diagrams: any;
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  parseError?: ParseErrorFunction;
-  parseError?: Function;
   mermaidAPI: typeof mermaidAPI;
   parse: typeof parse;
   render: typeof mermaidAPI.render;

packages/mermaid/src/mermaidAPI.ts

@@ -9,8 +9,6 @@
  * page or do something completely different.
  *
  * In addition to the render function, a number of behavioral configuration options are available.
- *
- * @name mermaidAPI
  */
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
@@ -21,7 +19,7 @@ import { addDiagrams } from './diagram-api/diagram-orchestration';
 import classDb from './diagrams/class/classDb';
 import flowDb from './diagrams/flowchart/flowDb';
 import ganttDb from './diagrams/gantt/ganttDb';
-import Diagram, { getDiagramFromText } from './Diagram';
+import Diagram, { getDiagramFromText, type ParseErrorFunction } from './Diagram';
 import errorRenderer from './diagrams/error/errorRenderer';
 import { attachFunctions } from './interactionDb';
 import { log, setLogLevel } from './logger';
@@ -36,11 +34,10 @@ import { evaluate } from './diagrams/common/common';
 const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram'];
 
 /**
- * @param text
+ * @param text - The mermaid diagram definition.
- * @param parseError
+ * @param parseError - If set, handles errors.
  */
-// eslint-disable-next-line @typescript-eslint/ban-types
+function parse(text: string, parseError?: ParseErrorFunction): boolean {
-function parse(text: string, parseError?: Function): boolean {
   addDiagrams();
   const diagram = new Diagram(text, parseError);
   return diagram.parse(text, parseError);
@@ -103,14 +100,13 @@ export const decodeEntities = function (text: string): string {
  * });
  * ```
  *
- * @param {string} id The id of the element to be rendered
+ * @param id - The id of the element to be rendered
- * @param {string} text The graph definition
+ * @param text - The graph definition
- * @param {(svgCode: string, bindFunctions?: (element: Element) => void) => void} cb Callback which
+ * @param cb - Callback which is called after rendering is finished with the svg code as param.
- *   is called after rendering is finished with the svg code as inparam.
+ * @param container - Selector to element in which a div with the graph temporarily will be
- * @param {Element} container Selector to element in which a div with the graph temporarily will be
  *   inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
  *   element will be removed when rendering is completed.
- * @returns {void}
+ * @returns - Resolves when finished rendering.
  */
 const render = async function (
   id: string,
@@ -145,7 +141,7 @@ const render = async function (
     }
 
     if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
+      // IF we are in sandboxed mode, we do everything mermaid related
       // in a sandboxed div
       const iframe = select(container)
         .append('iframe')
@@ -194,7 +190,7 @@ const render = async function (
     // d+id it will contain a svg with the id "id"
 
     if (cnf.securityLevel === 'sandbox') {
-      // IF we are in sandboxed mode, we do everyting mermaid related
+      // IF we are in sandboxed mode, we do everything mermaid related
       // in a sandboxed div
       const iframe = select('body')
         .append('iframe')
@@ -243,7 +239,7 @@ const render = async function (
   let userStyles = '';
   // user provided theme CSS
   // If you add more configuration driven data into the user styles make sure that the value is
-  // sanitized bye the santiizeCSS function
+  // sanitized bye the sanitizeCSS function
   if (cnf.themeCSS !== undefined) {
     userStyles += `\n${cnf.themeCSS}`;
   }
@@ -392,11 +388,15 @@ const parseDirective = function (p: any, statement: string, context: string, typ
           currentDirective = {};
           break;
         case 'type_directive':
-          if (!currentDirective) throw new Error('currentDirective is undefined');
+          if (!currentDirective) {
+            throw new Error('currentDirective is undefined');
+          }
           currentDirective.type = statement.toLowerCase();
           break;
         case 'arg_directive':
-          if (!currentDirective) throw new Error('currentDirective is undefined');
+          if (!currentDirective) {
+            throw new Error('currentDirective is undefined');
+          }
           currentDirective.args = JSON.parse(statement);
           break;
         case 'close_directive':
@@ -454,7 +454,7 @@ const handleDirective = function (p: any, directive: any, type: string): void {
   }
 };
 
-/** @param {MermaidConfig} options */
+/** @param options - Initial Mermaid options */
 async function initialize(options: MermaidConfig) {
   // Handle legacy location of font-family configuration
   if (options?.fontFamily) {

packages/mermaid/src/setupGraphViewbox.js

@@ -1,7 +1,7 @@
 import { log } from './logger';
 
 /**
- * Applys d3 attributes
+ * Applies d3 attributes
  *
  * @param {any} d3Elem D3 Element to apply the attributes onto
  * @param {[string, string][]} attrs Object.keys equivalent format of key to value mapping of attributes
@@ -26,6 +26,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
     attrs.set('width', '100%');
     attrs.set('style', `max-width: ${width}px;`);
   } else {
+    attrs.set('height', height);
     attrs.set('width', width);
   }
   return attrs;

packages/mermaid/src/themes/erDiagram-oldHardcodedValues.ts

@@ -1,5 +1,5 @@
 /**
- * @file Values that have been hardcoded in src/diagrams/er/styles.js. These can be used by
+ * Values that have been hardcoded in src/diagrams/er/styles.js. These can be used by
  *   theme-_._ files to maintain display styles until themes, styles, renderers are revised. --
  *   2022-09-22
  */

packages/mermaid/src/themes/theme-base.js

@@ -126,7 +126,7 @@ class Theme {
     this.specialStateColor = this.lineColor;
 
     /* Color Scale */
-    /* Each color-set will have a background, a forgroupnd and a border color */
+    /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
     this.cScale2 = this.cScale2 || this.tertiaryColor;