Fixed broken links and syntax in the document

docs/getting-started/8.6.0_docs.md

@@ -79,15 +79,15 @@ When deployed within code, init is called before the graph/diagram description.
 
 **for example**:
 ```
- %%{init: {"theme": "default", "logLevel": 1 }}%%
-  graph LR
-   a-->b
-   b-->c
-   c-->d
-   d-->e
-   e-->f
-   f-->g
-   g-->
+%%{init: {"theme": "default", "logLevel": 1 }}%%
+ graph LR
+  a-->b
+  b-->c
+  c-->d
+  d-->e
+  e-->f
+  f-->g
+  g-->
 ```
 # Wrap
 
@@ -214,4 +214,4 @@ Ensures options parameter does not attempt to override siteConfig secure keys.
 default: current siteConfig  (optional, default `getSiteConfig()`)
 ```
 
-## For more information, read [Setup](https://mermaid-js.github.io/mermaid/#/Setup).
+## For more information, read [Setup](Setup.md).

docs/getting-started/Setup.md

@@ -146,9 +146,8 @@ mermaidAPI.initialize({
 
 ## mermaidAPI configuration defaults
 
-<pre>
-
-&lt;script>
+```html
+<script>
   var config = {
     theme:'default',
     logLevel:'fatal',
@@ -203,7 +202,7 @@ mermaidAPI.initialize({
     }
   };
   mermaid.initialize(config);
-&lt;/script>
-</pre>
+</script>
+```
 
 [1]: Setup.md?id=render

docs/getting-started/Tutorials.md

@@ -1,12 +1,12 @@
-# Tutorials 
+# Tutorials
 
 This is  list of publicly available Tutorials in Mermaid. This is intended as a basic introduction for the use of the Live Editor and HTML with mermaid.  
 
-For the purposes, the Live-Editor is capable of taking care of all diagramming needs, and these are the most common use cases for it. 
+For the purposes, the Live-Editor is capable of taking care of all diagramming needs, and these are the most common use cases for it.
 
 
-# Live-Editor Tutorials
-The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0. 
+## Live-Editor Tutorials
+The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
 
 https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s
 
@@ -20,10 +20,10 @@ https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
 
 https://www.youtube.com/watch?v=9HZzKkAqrX8
 
-# Mermaid with HTML: 
-Examples are provided in [Gettting Started](./docs/n00b-gettingStarted.md)
+## Mermaid with HTML:
+Examples are provided in [Gettting Started](n00b-gettingStarted.md)
 
-**CodePen Examples:** 
+**CodePen Examples:**
 
 https://codepen.io/CarlBoneri/pen/BQwZzq
 
@@ -32,7 +32,6 @@ https://codepen.io/tdkn/pen/vZxQzd
 https://codepen.io/janzeteachesit/pen/OWWZKN
 
 
-## Mermaid with Text Area: 
-
-https://codepen.io/Ryuno-Ki/pen/LNxwgR 
+## Mermaid with Text Area:
 
+https://codepen.io/Ryuno-Ki/pen/LNxwgR

docs/getting-started/n00b-gettingStarted.md

@@ -14,13 +14,13 @@ This then renders a diagram based on that code in SVG, alternatively it
 Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot.
 
 ## For beginners, there are four relatively easy ways you can use mermaid:
-1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md).
-2. Using one of the many [mermaid plugins](https://mermaid-js.github.io/mermaid/#/integrations).
+1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](../overview/n00b-overview.md).
+2. Using one of the many [mermaid plugins](../overview/integrations.md).
 3. Hosting mermaid on a webpage, with an absolute link.
 4. Downloading mermaid and hosting it on your Web Page.
 
 **Notes**: More in depth information can be found on [Usage](./usage.md).
-.
+
 # Following any of these examples, you can get started with creating your own diagrams using mermaid code.
 
 ## 1. The mermaid live editor:
@@ -31,7 +31,7 @@ In the `Code` section one can write or edit raw mermaid code, and instantly `Pre
 
 **This is a great way to learn how to define a mermaid diagram.**
 
-For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md).
+For some popular video tutorials on the live editor go to [Overview](../overview/n00b-overview.md).
 
 ![Flowchart](../assets/img/n00b-liveEditor.png)
 
@@ -41,12 +41,12 @@ You can also click "Copy Markdown" to copy the markdown code for the diagram, th
 
 ![Flowchart](../assets/img/liveEditorOptions.png)
 
-The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](https://mermaid-js.github.io/mermaid/#/Setup) page.
+The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page.
 
 
 ## 2. Using mermaid plugins:
 
-Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](./integrations.md).
+Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](../overview/integrations.md).
 
 One example in the list is the [Atlassian Confluence mermaid plugin](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
 
@@ -75,11 +75,11 @@ When the mermaid plugin is installed on a Confluence server, one can insert a me
 
 - Save the page and the diagram appears.
 
-![Flowchart](../../assets/img/n00b-Confluence4.png)
+![Flowchart](../assets/img/n00b-Confluence4.png)
 
 ---
 ## The following are two ways of hosting mermaid on a webpage.  
-**This is covered in greater detail in the [Usage section](https://mermaid-js.github.io/mermaid/#/usage)**
+**This is covered in greater detail in the [Usage section](usage.md)**
 
 ## 3. Using the Mermaid API: The quick and dirty way of deploying mermaid
 
@@ -106,7 +106,7 @@ c. The `mermaid.initialize()` API call to start the rendering process.
 
 ### a. A reference to the address of the `mermaid.js` or the `mermaid.min.js` file has to be contained in a `<script src>` tag like so:
 
-```
+```html
 <body>
   <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 </body>
@@ -114,7 +114,7 @@ c. The `mermaid.initialize()` API call to start the rendering process.
 
 ### b. The embedded mermaid diagram definition needs to be contained inside a `<div>` tag that signifies that it is a mermaid diagram:
 
-```
+```html
 <body>
   Here is a mermaid diagram:
   <div class="mermaid">
@@ -131,7 +131,7 @@ c. The `mermaid.initialize()` API call to start the rendering process.
 
 `mermaid.initialize()` calls take all the definitions contained in `<div class="mermaid">` tags it can find in the html body and starts to render them one by one. It is called this way:
 
-```
+```html
 <body>
   <script>mermaid.initialize({startOnLoad:true});</script>
 </body>
@@ -142,7 +142,7 @@ c. The `mermaid.initialize()` API call to start the rendering process.
 ### If the three steps mentioned are followed you will end up with something like this:
 
 
-```
+```html
 <html>
   <body>
     <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
@@ -190,14 +190,14 @@ This method is similar to 3, if only a little more involved. The difference may
     c. select copy as path from the options.
 
 6. Paste it within the `script` tag as the `src`.
-```
+```html
 <script src="Paste the mermaid.min.js file address here"></script>
- <script>mermaid.initialize({startOnLoad:true});</script>
+<script>mermaid.initialize({startOnLoad:true});</script>
 ```
 7. It should look something like this
-```
-  <script src="C:\Users\myPC\mermaid\dist\mermaid.js"></script>
-  <script>mermaid.initialize({startOnLoad:true});</script>
+```html
+<script src="C:\Users\myPC\mermaid\dist\mermaid.js"></script>
+<script>mermaid.initialize({startOnLoad:true});</script>
 ```
 8. Add the graph and diagram definitions as you would in number 3.
     a. be mindful of the `div` tags.
@@ -208,7 +208,7 @@ This method is similar to 3, if only a little more involved. The difference may
 **Note** placing the HTML file on the same folder the `mermaid` file you've downloaded is a good practice and allows you to shorten the address on the `src` section.
 
 **As seen here, in this full example:**
-```
+```html
 <html lang="en">
 <head>
   <meta charset="utf-8">

docs/getting-started/usage.md

@@ -47,23 +47,24 @@ This topic explored in greater depth in the [User Guide for Beginners](./n00b-ge
 The easiest way to integrate mermaid on a web page requires three elements:
 
 1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
-
-  `<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>`
+    ```html
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    ```
 
 2. The `mermaidAPI` call, in a separate `script` tag. Example:
-
-  `<script>mermaid.initialize({startOnLoad:true});</script>`
+    ```html
+    <script>mermaid.initialize({startOnLoad:true});</script>
+    ```
 
 3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
-
-```html
-<div class="mermaid">
-     graph LR
-      A --- B
-      B-->C[fa:fa-ban forbidden]
-      B-->D(fa:fa-spinner);
-</div>
-```
+    ```html
+    <div class="mermaid">
+         graph LR
+          A --- B
+          B-->C[fa:fa-ban forbidden]
+          B-->D(fa:fa-spinner);
+    </div>
+    ```
 
 **If these things are in place mermaid starts at the page load event and when fired (when the page has loaded) it will
 locate the graph definitions inside the `div` tags with `class="mermaid"` on the page and transform them to svg charts or diagrams.**
@@ -125,9 +126,9 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, if t
 ## To chage `securityLevel` with `mermaidAPI.initialize`:
 
 ```javascript
-    mermaidAPI.initialize({
-        securityLevel: 'loose'
-    });
+mermaidAPI.initialize({
+    securityLevel: 'loose'
+});
 ```
 
 
@@ -153,11 +154,13 @@ $(document).ready(function() {
 Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering.
 
 If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
+
+```css
+div.mermaid {
+    font-family: 'trebuchet ms', verdana, arial;
+}
 ```
-    div.mermaid {
-        font-family: 'trebuchet ms', verdana, arial;
-    }
-```
+
 # This likely requires a `script.js` file, separate from the `HTML`.
 
 ### Calling `mermaid.init`
@@ -335,7 +338,7 @@ setting the options in mermaid.
 4. Instantiation of the configuration using the **mermaid.init** call
 
 The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
-configuration objects are described [in the mermaidAPI documentation](mermaidAPI.html).
+configuration objects are described [in the mermaidAPI documentation](Setup.md).
 
 
 ## Using the `mermaidAPI.initialize`/`mermaid.initialize` call