Merge branch 'develop' into fix-typo

docs/Configuration.md

@@ -5,7 +5,7 @@ Configuration is the second half of Mermaid, after deployment. Together Deployme
 This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams. 
 The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. 
 
-## Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
+## Configuration Section in the [Live Editor](https://mermaid.live/).
 
 
 ## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag. 

docs/README.md

@@ -26,7 +26,7 @@ Diagramming and documentation costs precious developer time and gets outdated qu
 But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
 Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
  <br/>
-Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).<br/>
+Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./docs/Tutorials.md) has video tutorials.
 Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
 

docs/classDiagram.md

@@ -48,7 +48,7 @@ classDiagram
     BankAccount : +String owner
     BankAccount : +Bigdecimal balance
     BankAccount : +deposit(amount)
-    BankAccount : +withdrawl(amount)
+    BankAccount : +withdrawal(amount)
 
 ```
 
@@ -94,7 +94,7 @@ class BankAccount{
     +String owner
     +BigDecimal balance
     +deposit(amount)
-    +withdrawl(amount)
+    +withdrawal(amount)
 }
 ```
 
@@ -109,7 +109,7 @@ class BankAccount{
     +String owner
     +BigDecimal balance
     +deposit(amount) bool
-    +withdrawl(amount) int
+    +withdrawal(amount) int
 }
 ```
 

docs/development.md

@@ -98,7 +98,6 @@ it('should render forks and joins', () => {
     );
     cy.get('svg');
 });
-
 ```
 
 ### Any Questions or Suggestions?

docs/entityRelationshipDiagram.md

@@ -18,7 +18,7 @@ Entity names are often capitalised, although there is no accepted standard on th
 
 Relationships between entities are represented by lines with end markers representing cardinality.  Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
 
-ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables.  It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities.  These do not necessarily need to be exhaustive; often a small subset of attributes is enough.  Mermaid allows to be defined in terms of their *type* and *name*.
+ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables.  It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities.  These do not necessarily need to be exhaustive; often a small subset of attributes is enough.  Mermaid allows them to be defined in terms of their *type* and *name*.
 
 ```mermaid-example
 erDiagram

docs/flowchart.md

@@ -640,8 +640,7 @@ flowchart LR
 
 Is it possible to adjust the width of the rendered flowchart.
 
-This is done by defining **mermaid.flowchartConfig** or by the CLI to use a json file with the configuration. How to use
-the CLI is described in the mermaidCLI page.
+This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.
 mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
 
 ```javascript

docs/gitgraph.md

@@ -32,7 +32,7 @@ Entity names are often capitalized, although there is no accepted standard on th
 
 
 ## Syntax
-Mermaid syntax for Gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.
+Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.
 
 First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly.
 
@@ -48,11 +48,11 @@ A simple gitgraph showing three commits on the default (***main***) branch:
        commit
        commit
 ```
-If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random Id. What if you would want to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.
+If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.
 
 ### Adding custom commit id
 
-For a given commit you may specify a custom id at the time of declaring it using the `id` attribute, followed by `:` and your custom value within `""` quote. For example: `commit id: "your_custom_id"`
+For a given commit you may specify a custom ID at the time of declaring it using the `id` attribute, followed by `:` and your custom value within a `""` quote. For example: `commit id: "your_custom_id"`
 
 Let us see how this works with the help of the following diagram:
 
@@ -126,13 +126,13 @@ Let see this in an example:
        commit
        commit
 ```
-In this example, see how we started with default `main` branch, and pushed to commits on that.
+In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.
 
 ### Checking out an existing branch
-In Mermaid, in-order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop`
+In Mermaid, in order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop`
 
-When Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to  checking out a branch in Git world.
+When Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world.
 
 Let see modify our previous example:
 
@@ -148,18 +148,18 @@ Let see modify our previous example:
        commit
        commit
 ```
-In this example, see how we started with default `main` branch, and pushed to commits on that.
+In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
 After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.
 
 ### Merging two branches
-In Mermaid, in-order to merge or join  to an existing branch, you make use of the `merge` keyword. You also need to provide a name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, if you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
+In Mermaid, in order to merge or join  to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw.
 
 Usage example: `merge develop`
 
-When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge result in a ***merge commit***, represented in the diagram with **filled double circle**.
+When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a ***merge commit***, represented in the diagram with **filled double circle**.
 
-Let see modify our previous example to merge our two branches:
+Let us modify our previous example to merge our two branches:
 
 ```mermaid-example
     gitGraph
@@ -176,25 +176,25 @@ Let see modify our previous example to merge our two branches:
        commit
        commit
 ```
-In this example, see how we started with default `main` branch, and pushed to commits on that.
+In this example, see how we started with default `main` branch, and pushed two commits on that.
 Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
 After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`.
 After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit.
 Since the current branch at this point is still `main`, the last two commits are registered against that.
 
 ### Cherry Pick commit from another branch
-Similar to how 'git' allows you to cherry pick a commit from **another branch** onto the **current** branch, Mermaid also suports this functionality. You can also cherry pick a commit from another branch using the `cherry-pick` keyword.
+Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword.
 
-To use the `cherry-pick` keyword, you must specify the id  using the `id` attribute, followed by `:` and your desired commit id within `""` quote. For example:
+To use the `cherry-pick` keyword, you must specify the id  using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example:
 
  `cherry-pick id: "your_custom_id"`
 
-Here, a new commit representing the cherry pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry picked from.
+Here, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry-picked from.
 
-Few Important rules to note here are:
-1. You need to provide the `id` for an existing commit to be cherry picked. If given commit id does not exist it will result in an error. For this make use of the `commit id:$value` format of declaring commits. See the examples from above.
-2. The given commit must not exist on the current branch. Cherry picked commit must always be a different branch than the current branch.
-3. Current branch must have at least one commit, before you can cherry pick a commit, otherwise it will cause an error is throw.
+A few important rules to note here are:
+1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
+2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
+3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
 
 Let see an example:
 ```mermaid-example
@@ -222,7 +222,7 @@ In Mermaid, you have the option to configure the gitgraph diagram. You can confi
 
 Let's look at them one by one.
 ## Hiding Branch names and lines
-Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. Bye default its value is `true`. You can set it to false using directives
+Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. By default its value is `true`. You can set it to `false` using directives.
 
 Usage example:
 ```mermaid-example
@@ -450,7 +450,7 @@ Here, we have changed the default main branch name to `MetroLine1`.
 ## Themes
 Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](./theming.md).
 
-Following are the different pre-defined theme options:
+The following are the different pre-defined theme options:
 - `base`
 - `forest`
 - `dark`
@@ -458,7 +458,7 @@ Following are the different pre-defined theme options:
 - `neutral`
 
 **NOTE**: To change theme you can either use the `initialize` call or *directives*. Learn more about [directives](./directives.md)
-Let's put them to use, add see how our sample diagram looks like in different themes:
+Let's put them to use, and see how our sample diagram looks in different themes:
 
 ### Base Theme
 
@@ -721,7 +721,7 @@ See how the default theme is used to set the colors for the branches:
        commit
 ```
 > #### IMPORTANT:
-> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches,  the theme variables are reused in the cyclic manner, i.e. 9th branch will use the color/styling of 1st  branch, or branch at index position '8' will use the color/styling of branch at index position '0'.
+> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches,  the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
  *More on this in the next section. See examples on **Customizing branch label colors** below*
 ### Customizing branch colors
 You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on.
@@ -870,7 +870,7 @@ Now let's override the default values for the `git0` to `git3` variables:
        commit
 
 ```
-See how the highlight commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.
+See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.
 
 
 

docs/n00b-gettingStarted.md

@@ -53,9 +53,9 @@ Editing is as easy as pasting your **Diagram code**, into the `code` section of
 
 The Gist you create should have a code.mmd file and optionally a config.json. [Example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a)
 
-To load a gist into the Editor, you can use https://mermaid-js.github.io/mermaid-live-editor/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
+To load a gist into the Editor, you can use https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
 
-and to View, https://mermaid-js.github.io/mermaid-live-editor/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
+and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a
 
 ## 2. Using Mermaid Plugins:
 

docs/n00b-overview.md

@@ -64,6 +64,6 @@ Being based on markdown, Mermaid can be used, not only by accomplished front-end
 In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials available in the internet.
 
 ## Mermaid is for everyone.
-Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/).
+Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/).
 
 Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs. 

docs/newDiagram.md

@@ -243,24 +243,26 @@ This function will in turn call a function *your diagram should provide* returni
 
 ```js
 const getStyles = (options) =>
-  `
-  .line {
-    stroke-width: 1;
-    stroke: ${options.lineColor};
-    stroke-dasharray: 2;
-  }
-	// ...
+    `
+    .line {
+      stroke-width: 1;
+      stroke: ${options.lineColor};
+      stroke-dasharray: 2;
+    }
+    // ...
+    `;
 ```
 
 Note that you need to provide your function to the main getStyles by adding it into the themes object in  **src/styles.js** like in the xyzDiagram in the provided example:
 
 ```js
 const themes = {
-	flowchart,
-	'flowchart-v2': flowchart,
-	sequence,
-	xyzDiagram
-	//...
+    flowchart,
+    'flowchart-v2': flowchart,
+    sequence,
+    xyzDiagram,
+    //...
+};
 ```
 
 The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.

docs/usage.md

@@ -14,7 +14,7 @@ Please note that you can switch versions through the dropdown box at the top rig
 
 ## Using mermaid
 
-For the majority of users, Using the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./Setup.md).
+For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./Setup.md).
 
 We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
 
@@ -314,7 +314,7 @@ var textFieldUpdated = function(){
 bindEventHandler('change', 'code', textFieldUpdated);
 ```
 **Alternative to mermaid.parse():**
-One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version. 
+One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version. 
 
 
 ## Configuration