Merge pull request #1727 from deining/fix_links

Fixing broken links and misspellings

README.md

@@ -19,7 +19,7 @@ But not having diagrams or docs ruins productivity and hurts organizational lear
 Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content.
 The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code).
 So less time needs be spent on documenting, as a separate and laborious task. <br/>
-Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor). <br/>
+Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor).<br/>
 [Tutorials](./docs/getting-started/Tutorials.md) has video tutorials.
 Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/overview/integrations.md).
 

docs/README.md

@@ -21,7 +21,7 @@ With Mermaid less time needs to be spent on making diagrams, as a separate docum
 
 > Mermaid is a Diagramming tool for everyone. 
 
-Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor), Visit the [Tutorials Page](href='https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md) for the Live Editor video tutorials.
+Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](https://github.com/mermaid-js/mermaid/blob/develop/docs/getting-started/Tutorials.md) for the Live Editor video tutorials.
 
 Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](overview/integrations.md).
 

docs/diagrams-and-syntax-and-examples/classDiagram.md

@@ -231,7 +231,7 @@ To specify the visibility of a class member (i.e. any attribute or method), thes
 - `#` Protected
 - `~` Package/Internal
 
-> _note_ you can also include additional _classifers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
+> _note_ you can also include additional _classifiers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
 
 > - `*` Abstract e.g.: `someAbstractMethod()*`
 > - `$` Static e.g.: `someStaticMethod()$`
@@ -349,7 +349,7 @@ The different cardinality options are :
 - `0..n` zero to n {where n>1}
 - `1..n` one to n {where n>1}
 
-Cardinality can be easily defined by placing cardinality text within qoutes `"` before(optional) and after(optional) a given arrow.
+Cardinality can be easily defined by placing cardinality text within quotes `"` before(optional) and after(optional) a given arrow.
 
 ```
 [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
@@ -606,7 +606,7 @@ The main styling of the class diagram is done with a preset number of css classe
 | g.classGroup line  | Styles for class diagram line                                     |
 | .classLabel .box   | Styles for class label box                                        |
 | .classLabel .label | Styles for class label text                                       |
-| composition        | Styles for componsition arrow head and arrow line                 |
+| composition        | Styles for composition arrow head and arrow line                  |
 | aggregation        | Styles for aggregation arrow head and arrow line(dashed or solid) |
 | dependency         | Styles for dependency arrow head and arrow line                   |
 

docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -139,7 +139,7 @@ graph LR
     id1((This is the text in the circle))
 ```
 
-### A node in an asymetric shape
+### A node in an asymmetric shape
 
 ```
 graph LR
@@ -356,7 +356,7 @@ graph LR
    a --> b & c--> d
 ```
 
-You can then describe dependencies in a very expressive way. Like the onliner below:
+You can then describe dependencies in a very expressive way. Like the oneliner below:
 ```
 graph TB
     A & B--> C & D
@@ -493,7 +493,7 @@ graph LR
 
 ### Entity codes to escape characters
 
-It is possible to escape characters using the syntax examplified here.
+It is possible to escape characters using the syntax exemplified here.
 
 ```
     graph LR
@@ -541,7 +541,7 @@ graph TB
     end
  ```
 
- You can also set an excplicit id for the subgraph.
+ You can also set an explicit id for the subgraph.
 
 ```
 graph TB
@@ -808,7 +808,7 @@ If a class is named default it will be assigned to all classes without specific
 
 It is possible to add icons from fontawesome.
 
-The icons are acessed via the syntax fa:#icon class name#.
+The icons are accessed via the syntax fa:#icon class name#.
 
 ```
 graph TD

docs/diagrams-and-syntax-and-examples/gantt.md

@@ -10,7 +10,7 @@ title: Gantt
  ## A note to users
  Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.   
 
- It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accomodate those changes by extending an equal number of day, towards the right, not by creating a gap inside the task.
+ It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of day, towards the right, not by creating a gap inside the task.
  As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/img/Gantt-excluded-days-within.png)
 
  However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.   
@@ -107,7 +107,7 @@ gantt
     Add another diagram to demo page    :48h
 ```
 
-It is possible to set multiple depenendenies separated by space:
+It is possible to set multiple dependencies separated by space:
 ```
     gantt
         apple :a, 2017-07-20, 1w
@@ -339,7 +339,7 @@ mermaid.ganttConfig = {
 Param | Descriotion | Default value
 --- | --- | ---
 mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
-bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.|1
+bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1
 
 ## Interaction
 

docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md

@@ -8,7 +8,7 @@ title: Diagram syntax intro
 If you are new to mermaid, read the [Getting Started](../getting-started/n00b-gettingStarted.md) and [Overview](../overview/n00b-overview.md) sections, to learn the basics of mermaid.
 Video Tutorials can be found at the bottom of the Overview Section.
 
-This section is a list of diagram types supported by mermaid. Below is a list of links to aricles that explain the syntax of the diagrams or charts that can be called.
+This section is a list of diagram types supported by mermaid. Below is a list of links to articles that explain the syntax of the diagrams or charts that can be called.
 
 They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.
 

docs/diagrams-and-syntax-and-examples/sequenceDiagram.md

@@ -508,11 +508,11 @@ mermaid.sequenceConfig = {
 };
 ```
 
-### Possible configuration params:
+### Possible configuration parameters:
 
-| Param             | Description                                                                                                                                | Default value                  |
+| Parameter         | Description                                                                                                                                | Default value                  |
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
-| mirrorActors       | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
+| mirrorActors      | Turns on/off the rendering of actors below the diagram as well as above it                                                                 | false                          |
 | bottomMarginAdj   | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1                              |
 | actorFontSize     | Sets the font size for the actor's description                                                                                             | 14                             |
 | actorFontFamily   | Sets the font family for the actor's description                                                                                           | "Open-Sans", "sans-serif"      |

docs/getting-started/Tutorials.md

@@ -8,13 +8,13 @@ For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/me
 ## Live-Editor Tutorials
 The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
 
-[GitLab Unfiltered:How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)
+[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)
 
-[GitLab Unfiltered:Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)
+[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)
 
-[World of Zero:I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s)
+[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s)
 
-[Eddie Jaoude:Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
+[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
 
 
 ## Mermaid with HTML:

docs/getting-started/n00b-gettingStarted.md

@@ -235,7 +235,7 @@ This method is similar to 3, if only a little more involved. The difference may
 
 
 **Three additional comments from Knut Sveidqvist, creator of mermaid:**
-- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowdays we can place it directly in `<body>` as seen above. However, older parts of the documentation frequently reflects the previous way which still works.
+- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it directly in `<body>` as seen above. However, older parts of the documentation frequently reflects the previous way which still works.
 
 - We initialize the mermaid rendering with `mermaid.initialize()` directly in the html code. In principle this could be done through placing `mermaid.initialize()` inside of `mermaid.min.js`. We would then eliminate the need for this explicit line in the html. However, there are use cases where we do want to separate the two steps. Sometimes we want full control over when we start looking for `<div>`tags inside the web page with `mermaid.initialize()`, for example when we think that all `<div>` tags may not have been loaded by the time `mermaid.min.js` runs.
 

docs/getting-started/theming.md

@@ -108,7 +108,7 @@ Leaving it empty will set all variable values to default.
 
 Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability.
 
-**The Default Value Column** to the right of the Variable coloumn will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
+**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
 
 You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
 
@@ -129,14 +129,14 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 | secondaryColor       | based on primaryColor          | *    |                                                                                                                                  |
 | tertiaryColor        | based on primaryColor          | *    |                                                                                                                                  |
 | primaryBorderColor   | based on primaryColor          | *    | Color to be used as border in nodes using primaryColor                                                                           |
-| primaryTextColor     | based on darkMode #ddd/#333    | *    | Color to be used as text color in nodesusing primaryColor                                                                        |
+| primaryTextColor     | based on darkMode #ddd/#333    | *    | Color to be used as text color in nodes using primaryColor                                                                        |
 | secondaryBorderColor | based on secondaryColor        | *    | Color to be used as border in nodes using secondaryColor                                                                         |
-| secondaryTextColor   | based on secondaryColor        | *    | Color to be used as text color in nodesusing secondaryColor                                                                      |
+| secondaryTextColor   | based on secondaryColor        | *    | Color to be used as text color in nodes using secondaryColor                                                                      |
 | tertiaryBorderColor  | based on tertiaryColor         | *    | Color to be used as border in nodes using tertiaryColor                                                                          |
-| tertiaryTextColor    | based on tertiaryColor         | *    | Color to be used as text color in nodesusing tertiaryColor                                                                       |
+| tertiaryTextColor    | based on tertiaryColor         | *    | Color to be used as text color in nodes using tertiaryColor                                                                       |
 | noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |
-| noteTextColor        | #333                           |      | Text color in note rectangless.                                                                                                        |
-| noteBorderColor      | based on noteBkgColor          | *    | Border color in note rectangless.                                                                                                      |
+| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                        |
+| noteBorderColor      | based on noteBkgColor          | *    | Border color in note rectangles.                                                                                                      |
 | lineColor            | based on background            | *    |                                                                                                                                  |
 | textColor            | based on primaryTextColor      | *    | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
 | mainBkg              | based on primaryColor          | *    | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram  etc                                 |
@@ -247,7 +247,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 **This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
 
 * Make the primary color a little lighter
-* set the teriary color to a redish shade as well
+* set the tertiary color to a reddish shade as well
 * make the edge label background differ from the subgraph by setting the edgeLabelBackground
 
 

docs/getting-started/usage.md

@@ -17,14 +17,14 @@ Please note that you can switch versions through the dropdown box at the top rig
 
 ## Using mermaid
 
-For the majority of beginners, using the live editor or suppoting mermaid on a webpage would cover their uses for mermaid.
+For the majority of beginners, using the live editor or supporting mermaid on a webpage would cover their uses for mermaid.
 
 ## Installing and Hosting mermaid on a webpage
 
 ### Using the npm package
 
 ```
-1.You will need to insall node v10 or 12, which would have npm.
+1.You will need to install node v10 or 12, which would have npm.
 
 2. download yarn using npm.
 
@@ -121,9 +121,9 @@ Mermaid can load multiple diagrams, in the same page.
 This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
 ```
 
-**If you are taking resposibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are allowed.**
+**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are allowed.**
 
-## To chage `securityLevel` with `mermaidAPI.initialize`:
+## To change `securityLevel` with `mermaidAPI.initialize`:
 
 ```javascript
 mermaidAPI.initialize({
@@ -198,7 +198,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 ## API usage
 
-The main idea of the API is to be able to call a render function with the graph defintion as a string. The render function
+The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
 will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
 fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 

docs/overview/integrations.md

@@ -7,7 +7,7 @@ title: Use-Cases and Integrations
 
 The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions
 
-They also serve as proof of concept, for the variety of things that cen be built with mermaid.
+They also serve as proof of concept, for the variety of things that can be built with mermaid.
 
 
 ## Productivity