Add codespell: configuration, workflow (to detect new typos) and have it fixed some typos

.codespellrc

@@ -0,0 +1,7 @@
+# Ref: https://github.com/codespell-project/codespell#using-a-config-file
+[codespell]
+skip = .git,*.pdf,*.svg,go.sum,*.css,.codespellrc,*-lock.yaml
+check-hidden = true
+# Python regex.  Ignore some variable
+ignore-regex = \b(classE|curveLinear|afterAll|totalY)\b|.*\bpragma: codespell-ignore.*
+ignore-words-list = fo,ot,thi,te,implementors,cript,composit,lightening

.github/workflows/codespell.yml

@@ -0,0 +1,23 @@
+# Codespell configuration is within .codespellrc
+---
+name: Codespell
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [develop]
+
+permissions:
+  contents: read
+
+jobs:
+  codespell:
+    name: Check for spelling errors
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Codespell
+        uses: codespell-project/actions-codespell@v2

CHANGELOG.md

@@ -133,7 +133,7 @@ mermaid.run({
 - Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814)
 - How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813)
 - How to set the spacing between the text of the flowchart node and the border? [\#812](https://github.com/knsv/mermaid/issues/812)
-- no triming participant name and the name following spaces is as another actor in sequence [\#809](https://github.com/knsv/mermaid/issues/809)
+- no trimming participant name and the name following spaces is as another actor in sequence [\#809](https://github.com/knsv/mermaid/issues/809)
 - uml Class as shape type [\#807](https://github.com/knsv/mermaid/issues/807)
 - Force-directed graph Layout Style [\#806](https://github.com/knsv/mermaid/issues/806)
 - how can I start a newLine in FlowChart [\#805](https://github.com/knsv/mermaid/issues/805)
@@ -254,7 +254,7 @@ mermaid.run({
 - issue when using sphinxcontrib-mermaid extension for sphinx [\#507](https://github.com/knsv/mermaid/issues/507)
 - layout of docs page looks broken [\#504](https://github.com/knsv/mermaid/issues/504)
 - Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
-- logLevel's option doesnt work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
+- logLevel's option doesn't work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
 - How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
 - Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
 - Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
@@ -336,7 +336,7 @@ mermaid.run({
 - IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
 - mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
 - Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
-- some WARN about installion [\#222](https://github.com/knsv/mermaid/issues/222)
+- some WARN about installation [\#222](https://github.com/knsv/mermaid/issues/222)
 - Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
 - suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
 - Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)

cypress/platform/class.html

@@ -37,7 +37,7 @@ <h1>info below</h1>
         +String owner
         +BigDecimal balance
         +deposit(amount) bool
-        +withdrawl(amount) int
+        +withdrawal(amount) int
        }
        cssClass "BankAccount" customCss
 
@@ -56,7 +56,7 @@ <h1>info below</h1>
           +String owner
           +BigDecimal balance
           +deposit(amount) bool
-          +withdrawl(amount) int
+          +withdrawal(amount) int
         }
           Class01~T~ <|-- AveryLongClass : Cool
           Class03~T~ *-- Class04~T~

cypress/platform/current.html

@@ -31,7 +31,7 @@ <h1>info below</h1>
         flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
       </div>
       <div class="mermaid2" style="width: 50%; height: 200px">
-        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
+        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had previously
         overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
         though
       </div>

cypress/platform/git-graph.html

@@ -38,7 +38,7 @@ <h1>info below</h1>
         +String owner
         +BigDecimal balance
         +deposit(amount) bool
-        +withdrawl(amount) int
+        +withdrawal(amount) int
        }
        cssClass "BankAccount" customCss
     </pre>

cypress/platform/xss4.html

@@ -88,7 +88,7 @@
       let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
       diagram += 'flowchart\n';
       diagram += 'A["<ifra';
-      diagram += "me srcdoc='<scrip";
+      diagram += "me srcdoc='<scrip";  // pragma: codespell-ignore
       diagram += 't src=http://localhost:9000/exploit.js>';
       diagram += '</scr';
       diagram += 'ipt>\'></iframe>"]';

docs/news/blog.md

@@ -106,7 +106,7 @@ Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched wi
 
 8 March 2023 · 9 mins
 
-The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
+The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the through of disillusionment.
 
 ## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
 

docs/syntax/c4.md

@@ -320,7 +320,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
 
     Container_Boundary(c1, "Internet Banking") {
-        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
+        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
         Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
         Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
         ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
@@ -360,7 +360,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
 
     Container_Boundary(c1, "Internet Banking") {
-        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
+        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
         Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
         Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
         ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")

docs/syntax/classDiagram.md

@@ -240,7 +240,7 @@ class BankAccount{
 
 #### Generic Types
 
-Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
+Generics can be represented as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
 
 > _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
 

docs/syntax/gantt.md

@@ -275,7 +275,7 @@ gantt
 
 ## Output in compact mode
 
-The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
+The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.
 
 ```mermaid-example
 ---

packages/mermaid/src/dagre-wrapper/GraphObjects.md

@@ -24,7 +24,7 @@ flowchart
 
 The new nodes C1 and C2 are a special type of nodes, clusterNodes. ClusterNodes have have the nodes in the cluster including the cluster attached in a graph object.
 
-When rendering this diagram it it beeing rendered recursively. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
+When rendering this diagram it it being rendered recursively. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
 
 ```
 { clusterNode: true, graph }

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

@@ -11,7 +11,7 @@ let c4ShapeArray = [];
 let boundaryParseStack = [''];
 let currentBoundaryParse = 'global';
 let parentBoundaryParse = '';
-let boundarys = [
+let boundaries = [
   {
     alias: 'global',
     label: { text: 'global' },
@@ -312,12 +312,12 @@ export const addPersonOrSystemBoundary = function (alias, label, type, tags, lin
   }
 
   let boundary = {};
-  const old = boundarys.find((boundary) => boundary.alias === alias);
+  const old = boundaries.find((boundary) => boundary.alias === alias);
   if (old && alias === old.alias) {
     boundary = old;
   } else {
     boundary.alias = alias;
-    boundarys.push(boundary);
+    boundaries.push(boundary);
   }
 
   // Don't allow null labels, either
@@ -368,12 +368,12 @@ export const addContainerBoundary = function (alias, label, type, tags, link) {
   }
 
   let boundary = {};
-  const old = boundarys.find((boundary) => boundary.alias === alias);
+  const old = boundaries.find((boundary) => boundary.alias === alias);
   if (old && alias === old.alias) {
     boundary = old;
   } else {
     boundary.alias = alias;
-    boundarys.push(boundary);
+    boundaries.push(boundary);
   }
 
   // Don't allow null labels, either
@@ -433,12 +433,12 @@ export const addDeploymentNode = function (
   }
 
   let boundary = {};
-  const old = boundarys.find((boundary) => boundary.alias === alias);
+  const old = boundaries.find((boundary) => boundary.alias === alias);
   if (old && alias === old.alias) {
     boundary = old;
   } else {
     boundary.alias = alias;
-    boundarys.push(boundary);
+    boundaries.push(boundary);
   }
 
   // Don't allow null labels, either
@@ -514,7 +514,7 @@ export const updateElStyle = function (
 ) {
   let old = c4ShapeArray.find((element) => element.alias === elementName);
   if (old === undefined) {
-    old = boundarys.find((element) => element.alias === elementName);
+    old = boundaries.find((element) => element.alias === elementName);
     if (old === undefined) {
       return;
     }
@@ -699,9 +699,9 @@ export const getC4ShapeKeys = function (parentBoundary) {
 
 export const getBoundarys = function (parentBoundary) {
   if (parentBoundary === undefined || parentBoundary === null) {
-    return boundarys;
+    return boundaries;
   } else {
-    return boundarys.filter((boundary) => boundary.parentBoundary === parentBoundary);
+    return boundaries.filter((boundary) => boundary.parentBoundary === parentBoundary);
   }
 };
 
@@ -723,7 +723,7 @@ export const autoWrap = function () {
 
 export const clear = function () {
   c4ShapeArray = [];
-  boundarys = [
+  boundaries = [
     {
       alias: 'global',
       label: { text: 'global' },

packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts

@@ -167,7 +167,7 @@ describe('when using the ganttDb', function () {
     ganttDb.addTask('test3', 'id3,after id2,7d');
     ganttDb.addTask('test4', 'id4,2019-02-01,2019-02-20'); // Fixed endTime
     ganttDb.addTask('test5', 'id5,after id4,1d');
-    ganttDb.addSection('full ending taks on last day');
+    ganttDb.addSection('full ending task on last day');
     ganttDb.addTask('test6', 'id6,2019-02-13,2d');
     ganttDb.addTask('test7', 'id7,after id6,1d');
 

packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js

@@ -6,7 +6,7 @@ describe('when parsing a gitGraph', function () {
     parser.yy = gitGraphAst;
     parser.yy.clear();
   });
-  it('should handle a gitGraph commit with NO pararms, get auto-generated reandom ID', function () {
+  it('should handle a gitGraph commit with NO params, get auto-generated reandom ID', function () {
     const str = `gitGraph:
     commit
     `;

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

@@ -126,7 +126,7 @@ export const addSignal = function (
     const cnt = activationCount(idFrom.actor);
     if (cnt < 1) {
       // Bail out as there is an activation signal from an inactive participant
-      let error = new Error('Trying to inactivate an inactive participant (' + idFrom.actor + ')');
+      let error = new Error('Trying to deactivate an inactive participant (' + idFrom.actor + ')');
       error.hash = {
         text: '->>-',
         token: '->>-',

packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js

@@ -1540,7 +1540,7 @@ describe('when checking the bounds in a sequenceDiagram', function () {
     expect(bounds.stopx).toBe(300);
     expect(bounds.stopy).toBe(400);
   });
-  it('should handle multiple loops withtout expanding the bounds', async () => {
+  it('should handle multiple loops without expanding the bounds', async () => {
     diagram.renderer.bounds.insert(100, 100, 1000, 1000);
     diagram.renderer.bounds.verticalPos = 200;
     diagram.renderer.bounds.newLoop();

packages/mermaid/src/docs/news/blog.md

@@ -100,7 +100,7 @@ Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched wi
 
 8 March 2023 · 9 mins
 
-The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
+The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the through of disillusionment.
 
 ## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
 

packages/mermaid/src/docs/syntax/c4.md

@@ -218,7 +218,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
 
     Container_Boundary(c1, "Internet Banking") {
-        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
+        Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
         Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
         Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
         ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")

packages/mermaid/src/docs/syntax/classDiagram.md

@@ -143,7 +143,7 @@ class BankAccount{
 
 #### Generic Types
 
-Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
+Generics can be represented as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
 
 > _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
 

packages/mermaid/src/docs/syntax/gantt.md

@@ -203,7 +203,7 @@ gantt
 
 ## Output in compact mode
 
-The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
+The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.
 
 ```mermaid
 ---

packages/mermaid/src/mermaid.spec.ts

@@ -174,7 +174,7 @@ describe('when using mermaid and ', () => {
       await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects
         .toThrowErrorMatchingInlineSnapshot(`
         "Lexical error on line 1. Unrecognized text.
-        graph TQ;A--x|text includ
+        graph TQ;A--x|text include
         -----^"
       `);
     });