fix(typos): Fix minor typos in the source code

Signed-off-by: Marcel Ribeiro-Dantas <mribeirodantas@seqera.io>

CHANGELOG.md

@@ -68,7 +68,7 @@ try {
 
 ### Init deprecated and InitThrowsErrors removed
 
-The config passed to `init` was not being used eariler.
+The config passed to `init` was not being used earlier.
 It will now be used.
 The `init` function is deprecated and will be removed in the next major release.
 init currently works as a wrapper to `initialize` and `run`.
@@ -195,7 +195,7 @@ mermaid.run({
 - "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
 - Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
 - How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
-- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
+- The live editor can't show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
 - import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
 - Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
 - Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
@@ -504,7 +504,7 @@ mermaid.run({
 
 - Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
 - About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
-- How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
+- How to link backwards in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
 - Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
 - +1 [\#293](https://github.com/knsv/mermaid/issues/293)
 - Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
@@ -619,7 +619,7 @@ mermaid.run({
 - render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
 - Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
 - comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
-- Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
+- Add a reversed asymmetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
 - Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
 - Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
 
@@ -659,7 +659,7 @@ mermaid.run({
 - Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
 - Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
 - Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
-- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
+- Problem with click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
 - How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
 - it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
 - UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
@@ -762,7 +762,7 @@ mermaid.run({
 - subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
 - Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
 - Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
-- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
+- Asymmetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
 - NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
 - Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
 
@@ -908,7 +908,7 @@ mermaid.run({
 
 - Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
 - Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
-- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
+- Provide parse function in browser without `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
 - Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
 - Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
 

cypress/integration/rendering/gitGraph.spec.js

@@ -26,7 +26,7 @@ describe('Git Graph diagram', () => {
       `gitGraph
        commit id: "Normal Commit"
        commit id: "Reverse Commit" type: REVERSE
-       commit id: "Hightlight Commit" type: HIGHLIGHT
+       commit id: "Highlight Commit" type: HIGHLIGHT
       `,
       {}
     );
@@ -36,7 +36,7 @@ describe('Git Graph diagram', () => {
       `gitGraph
        commit id: "Normal Commit with tag" tag: "v1.0.0"
        commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
-       commit id: "Hightlight Commit" type: HIGHLIGHT  tag: "8.8.4"
+       commit id: "Highlight Commit" type: HIGHLIGHT  tag: "8.8.4"
       `,
       {}
     );
@@ -102,7 +102,7 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
-  it('8: should render a simple gitgraph with more than 8 branchs &  overriding variables', () => {
+  it('8: should render a simple gitgraph with more than 8 branches &  overriding variables', () => {
     imgSnapshotTest(
       `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
         'gitBranchLabel0': '#ffffff',
@@ -358,7 +358,7 @@ gitGraph
       `gitGraph TB:
        commit id: "Normal Commit"
        commit id: "Reverse Commit" type: REVERSE
-       commit id: "Hightlight Commit" type: HIGHLIGHT
+       commit id: "Highlight Commit" type: HIGHLIGHT
       `,
       {}
     );
@@ -368,7 +368,7 @@ gitGraph
       `gitGraph TB:
        commit id: "Normal Commit with tag" tag: "v1.0.0"
        commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
-       commit id: "Hightlight Commit" type: HIGHLIGHT  tag: "8.8.4"
+       commit id: "Highlight Commit" type: HIGHLIGHT  tag: "8.8.4"
       `,
       {}
     );
@@ -434,7 +434,7 @@ gitGraph
       {}
     );
   });
-  it('22: should render a simple gitgraph with more than 8 branchs &  overriding variables | Vertical Branch', () => {
+  it('22: should render a simple gitgraph with more than 8 branches &  overriding variables | Vertical Branch', () => {
     imgSnapshotTest(
       `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
         'gitBranchLabel0': '#ffffff',

cypress/integration/rendering/timeline.spec.ts

@@ -57,7 +57,7 @@ describe('Timeline diagram', () => {
       {}
     );
   });
-  it('5: should render a simple timeline with directive overriden colors', () => {
+  it('5: should render a simple timeline with directive overridden colors', () => {
     imgSnapshotTest(
       ` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
               'cScale0': '#ff0000',

demos/c4context.html

@@ -173,7 +173,7 @@
         Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
     }
 
-    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+    Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
         Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
             Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
         }

demos/flowchart.html

@@ -22,7 +22,7 @@
     ---
     graph LR
       accTitle: This is a complicated flow
-      accDescr: This is the descriptoin for the complicated flow.
+      accDescr: This is the description for the complicated flow.
 
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 

demos/requirements.html

@@ -17,7 +17,7 @@
     <h1>Requirement diagram demos</h1>
     <pre class="mermaid">
 	requirementDiagram
-	  accTitle: Requirments demo in black and white
+	  accTitle: Requirements demo in black and white
 		accDescr: A series of requirement boxes showing relationships among them. Has meaningless task names
 
 	requirement test_req {

demos/state.html

@@ -183,7 +183,7 @@
     </pre>
     <hr />
 
-    <h2>Compsite states can link to themselves</h2>
+    <h2>Composite states can link to themselves</h2>
     <pre class="mermaid">
       stateDiagram-v2
             state Active {
@@ -199,7 +199,7 @@
       stateDiagram-v2
       [*] --> S1
       S1 --> S2: This long line uses a br tag<br />to create multiple<br />lines.
-      S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
+      S1 --> S3: This transition description uses \na newline character\nto create multiple\nlines.
 
     </pre>
     <hr />

docs/config/accessibility.md

@@ -97,7 +97,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
   graph LR
       accTitle: Big Decisions
       accDescr: Bob's Burgers process for making big decisions
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
@@ -105,7 +105,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
   graph LR
       accTitle: Big Decisions
       accDescr: Bob's Burgers process for making big decisions
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
@@ -137,7 +137,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
         for making very, very big decisions.
         This is actually a very simple flow: identify the big decision and then make the big decision.
          }
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
@@ -149,7 +149,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
         for making very, very big decisions.
         This is actually a very simple flow: identify the big decision and then make the big decision.
          }
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 

docs/syntax/flowchart.md

@@ -764,7 +764,7 @@ flowchart LR
     end
     %% ^ These subgraphs are identical, except for the links to them:
 
-    %% Link *to* subgraph1: subgraph1 direction is mantained
+    %% Link *to* subgraph1: subgraph1 direction is maintained
     outside --> subgraph1
     %% Link *within* subgraph2:
     %% subgraph2 inherits the direction of the top-level graph (LR)
@@ -783,7 +783,7 @@ flowchart LR
     end
     %% ^ These subgraphs are identical, except for the links to them:
 
-    %% Link *to* subgraph1: subgraph1 direction is mantained
+    %% Link *to* subgraph1: subgraph1 direction is maintained
     outside --> subgraph1
     %% Link *within* subgraph2:
     %% subgraph2 inherits the direction of the top-level graph (LR)
@@ -1112,7 +1112,7 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
 
 ## Graph declarations with spaces between vertices and link and without semicolon
 

docs/syntax/quadrantChart.md

@@ -115,7 +115,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
 | quadrantExternalBorderStrokeWidth | Quadrant external border stroke width                                                             |       2       |
 | xAxisLabelPadding                 | Top and bottom padding of x-axis text                                                             |       5       |
 | xAxisLabelFontSize                | X-axis texts font size                                                                            |      16       |
-| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom |     'top'     |
+| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom |     'top'     |
 | yAxisLabelPadding                 | Left and Right padding of y-axis text                                                             |       5       |
 | yAxisLabelFontSize                | Y-axis texts font size                                                                            |      16       |
 | yAxisPosition                     | Position of y-axis (left , right)                                                                 |    'left'     |

docs/syntax/timeline.md

@@ -217,7 +217,7 @@ Note that there are no sections defined, and each time period and its correspond
 
 2.  Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
 
-You will need to add this option either via mermaid.intialize function or directives.
+You will need to add this option either via mermaid.initialize function or directives.
 
 ```javascript
 mermaid.initialize({

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

@@ -231,12 +231,12 @@ export const adjustClustersAndEdges = (graph, depth) => {
     if (children.length > 0) {
       log.debug('Cluster identified', id, descendants);
       edges.forEach((edge) => {
-        // log.debug('Edge, decendants: ', edge, decendants[id]);
+        // log.debug('Edge, descendants: ', edge, descendants[id]);
 
         // 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 descending to the cluster but not the other
-          // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) {
+          // if (descendants[id].indexOf(edge.v) < 0 && descendants[id].indexOf(edge.w) < 0) {
 
           const d1 = isDescendant(edge.v, id);
           const d2 = isDescendant(edge.w, id);

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

@@ -419,7 +419,7 @@ describe('extractDescendants', function () {
       return {};
     });
   });
-  it('Simple case of one level decendants GLB9', function () {
+  it('Simple case of one level descendants GLB9', function () {
     /*
     subgraph A
       a

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

@@ -202,7 +202,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
     let attribStyle = 'attributeBoxOdd'; // We will flip the style on alternate rows to achieve a banded effect
 
     attributeNodes.forEach((attributeNode) => {
-      // Calculate the alignment y co-ordinate for the type/name of the attribute
+      // Calculate the alignment y coordinate for the type/name of the attribute
       const alignY = heightOffset + heightPadding + attributeNode.height / 2;
 
       // Position the type attribute
@@ -579,8 +579,8 @@ export const draw = function (text, id, _version, diagObj) {
   // 2. Make sure they are all added to the graph
   // 3. Add all the edges (relationships) to the graph as well
   // 4. Let dagre do its magic to lay out the graph.  This assigns:
-  //    - the centre co-ordinates for each node, bearing in mind the dimensions and edge relationships
+  //    - the centre coordinates for each node, bearing in mind the dimensions and edge relationships
-  //    - the path co-ordinates for each edge
+  //    - the path coordinates for each edge
   //    But it has no impact on the svg child nodes - the diagram remains with every entity rooted at 0,0
   // 5. Now assign a transform to each entity in the svg node so that it gets drawn in the correct place, as determined by
   //    its centre point, which is obtained from the graph, and it's width and height

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

@@ -92,7 +92,7 @@ describe('when parsing ER diagram it...', function () {
       });
     });
 
-    it('cannot contain % because it interfers with parsing comments', function () {
+    it('cannot contain % because it interferes with parsing comments', function () {
       expect(() => {
         erDiagram.parser.parse(`erDiagram\n "Blo%rf"\n`);
         const entities = erDb.getEntities();

packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js

@@ -561,7 +561,7 @@ export const addEdges = function (edges, diagObj, graph, svg) {
 };
 
 // TODO: break out and share with dagre wrapper. The current code in dagre wrapper also adds
-// adds the line to the graph, but we don't need that here. This is why we cant use the dagre
+// adds the line to the graph, but we don't need that here. This is why we can't use the dagre
 // wrapper directly for this
 /**
  * Add the markers to the edge depending on the type of arrow is

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-genrated reandom ID', function () {
+  it('should handle a gitGraph commit with NO pararms, get auto-generated reandom ID', function () {
     const str = `gitGraph:
     commit
     `;

packages/mermaid/src/diagrams/mindmap/mindmap.spec.js

@@ -129,7 +129,7 @@ root
       expect(child.nodeId).toEqual('theId');
       expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT);
     });
-    it('MMP-10 mutiple types (circle)', function () {
+    it('MMP-10 multiple types (circle)', function () {
       let str = `mindmap
  root((the root))
  `;
@@ -141,7 +141,7 @@ root
       expect(mm.type).toEqual(mindmap.yy.nodeType.CIRCLE);
     });
 
-    it('MMP-11 mutiple types (cloud)', function () {
+    it('MMP-11 multiple types (cloud)', function () {
       let str = `mindmap
  root)the root(
 `;
@@ -152,7 +152,7 @@ root
       expect(mm.children.length).toEqual(0);
       expect(mm.type).toEqual(mindmap.yy.nodeType.CLOUD);
     });
-    it('MMP-12 mutiple types (bang)', function () {
+    it('MMP-12 multiple types (bang)', function () {
       let str = `mindmap
  root))the root((
 `;
@@ -164,7 +164,7 @@ root
       expect(mm.type).toEqual(mindmap.yy.nodeType.BANG);
     });
 
-    it('MMP-12-a mutiple types (hexagon)', function () {
+    it('MMP-12-a multiple types (hexagon)', function () {
       let str = `mindmap
  root{{the root}}
 `;

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/state/stateDiagram.spec.js

@@ -212,14 +212,14 @@ describe('state diagram, ', function () {
 
       parser.parse(str);
     });
-    it('should handle state defintions with separation of id', function () {
+    it('should handle state definitions with separation of id', function () {
       const str = `stateDiagram\n
         state "Long state description" as state1
         `;
 
       parser.parse(str);
     });
-    it('should handle state defintions with separation of id', function () {
+    it('should handle state definitions with separation of id', function () {
       const str = `stateDiagram
       state "Not Shooting State" as NotShooting {
         state "Idle mode" as Idle
@@ -360,7 +360,7 @@ describe('state diagram, ', function () {
 
       parser.parse(str);
     });
-    it('should handle notes for composit states', function () {
+    it('should handle notes for composite states', function () {
       const str = `stateDiagram\n
         [*] --> NotShooting
 

packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts

@@ -386,7 +386,7 @@ describe('Testing xychart jison file', () => {
       'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space"   [  +23 , -4aa5  , 56.6 ]   ';
     expect(parserFnConstructor(str)).toThrow();
   });
-  it('parse multiple bar and line varient 1', () => {
+  it('parse multiple bar and line variant 1', () => {
     const str =
       'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]';
     expect(parserFnConstructor(str)).not.toThrow();
@@ -409,7 +409,7 @@ describe('Testing xychart jison file', () => {
       [45, 99, 12]
     );
   });
-  it('parse multiple bar and line varient 2', () => {
+  it('parse multiple bar and line variant 2', () => {
     const str = `
     xychart-beta horizontal
     title Basic xychart

packages/mermaid/src/diagrams/xychart/xychartDb.ts

@@ -78,8 +78,8 @@ function textSanitizer(text: string) {
 function setTmpSVGG(SVGG: Group) {
   tmpSVGGroup = SVGG;
 }
-function setOrientation(oriantation: string) {
+function setOrientation(orientation: string) {
-  if (oriantation === 'horizontal') {
+  if (orientation === 'horizontal') {
     xyChartConfig.chartOrientation = 'horizontal';
   } else {
     xyChartConfig.chartOrientation = 'vertical';

packages/mermaid/src/docs/config/accessibility.md

@@ -91,7 +91,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
   graph LR
       accTitle: Big Decisions
       accDescr: Bob's Burgers process for making big decisions
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
@@ -123,7 +123,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
         for making very, very big decisions.
         This is actually a very simple flow: identify the big decision and then make the big decision.
          }
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 

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

@@ -487,7 +487,7 @@ flowchart LR
     end
     %% ^ These subgraphs are identical, except for the links to them:
 
-    %% Link *to* subgraph1: subgraph1 direction is mantained
+    %% Link *to* subgraph1: subgraph1 direction is maintained
     outside --> subgraph1
     %% Link *within* subgraph2:
     %% subgraph2 inherits the direction of the top-level graph (LR)
@@ -757,7 +757,7 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
 
 ## Graph declarations with spaces between vertices and link and without semicolon
 

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

@@ -96,7 +96,7 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
 | quadrantExternalBorderStrokeWidth | Quadrant external border stroke width                                                             |       2       |
 | xAxisLabelPadding                 | Top and bottom padding of x-axis text                                                             |       5       |
 | xAxisLabelFontSize                | X-axis texts font size                                                                            |      16       |
-| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom |     'top'     |
+| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom |     'top'     |
 | yAxisLabelPadding                 | Left and Right padding of y-axis text                                                             |       5       |
 | yAxisLabelFontSize                | Y-axis texts font size                                                                            |      16       |
 | yAxisPosition                     | Position of y-axis (left , right)                                                                 |    'left'     |

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

@@ -143,7 +143,7 @@ Note that there are no sections defined, and each time period and its correspond
 
 2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
 
-You will need to add this option either via mermaid.intialize function or directives.
+You will need to add this option either via mermaid.initialize function or directives.
 
 ```javascript
 mermaid.initialize({

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

packages/mermaid/src/schemas/config.schema.yaml

@@ -221,7 +221,7 @@ properties:
     type: number
     default: 16
 
-$defs: # JSON Schema definition (maybe we should move these to a seperate file)
+$defs: # JSON Schema definition (maybe we should move these to a separate file)
   BaseDiagramConfig:
     # TODO: More config needs to be moved here
     title: Base Diagram Config

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

@@ -165,7 +165,7 @@ class Theme {
       }
     }
 
-    // Setup teh label color for the set
+    // Setup the label color for the set
     this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor;
 
     for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {

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

@@ -203,7 +203,7 @@ class Theme {
         this['surfacePeer' + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(-7 + i * 4) });
     }
 
-    // Setup teh label color for the set
+    // Setup the label color for the set
     this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
 
     for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {

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

@@ -128,7 +128,7 @@ class Theme {
       this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 });
     }
 
-    // Setup teh label color for the set
+    // Setup the label color for the set
     this.scaleLabelColor =
       this.scaleLabelColor !== 'calculated' && this.scaleLabelColor
         ? this.scaleLabelColor

packages/mermaid/src/utils.spec.ts

@@ -450,7 +450,7 @@ describe('when parsing font sizes', function () {
     expect(utils.parseFontSize(undefined)).toEqual([undefined, undefined]);
   });
 
-  it('handles unparseable input', function () {
+  it('handles unparsable input', function () {
     // @ts-expect-error Explicitly testing unparsable input
     expect(utils.parseFontSize({ fontSize: 14 })).toEqual([undefined, undefined]);
   });

tests/webpack/src/index.js

@@ -22,7 +22,7 @@ const load = async () => {
       Popularisation
         British popular psychology author Tony Buzan
     Research
-      On effectivness<br/>and features
+      On effectiveness<br/>and features
       On Automatic creation
         Uses
             Creative techniques