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

Signed-off-by: Marcel Ribeiro-Dantas <[email protected]>

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 @@ <h1>C4 context diagram demos</h1>
         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 @@ <h3>graph</h3>
     ---
     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 @@ <h2>This shows Composite states</h2>
     </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 @@ <h2>transition labels can span multiple lines using "br" tags or \n</h2>
       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,15 +97,15 @@ 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]
 ```
 
 ```mermaid
   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 path co-ordinates for each edge
+  //    - the centre coordinates for each node, bearing in mind the dimensions and edge relationships
+  //    - 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