Merge pull request #1664 from saowang/develop

Fixed broken links and syntax in the document

docs/.debug.yml

@@ -0,0 +1,5 @@
+remote_theme: false
+
+baseurl: /mermaid
+
+theme: jekyll-rtd-theme

docs/Makefile

@@ -1,5 +1,5 @@
 default:
-	@bundle install
+	@gem install jekyll bundler && bundle install
 
 update:
 	@bundle update
@@ -7,8 +7,8 @@ update:
 clean:
 	@bundle exec jekyll clean
 
-server: clean
-	@bundle exec jekyll server
-
 build: clean
-	@bundle exec jekyll build --profile
+	@bundle exec jekyll build --profile --config _config.yml,.debug.yml
+
+server: clean
+	@bundle exec jekyll server --livereload --config _config.yml,.debug.yml

docs/README.md

@@ -19,19 +19,19 @@ Mermaid addresses this problem by cutting the time, effort and tooling that is r
 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 to 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), visit [Mermaid Overview](./n00b-overview.md) for the video tutorials.
+Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor), visit [Mermaid Overview](overview/n00b-overview.md) for the video tutorials.
 
-Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](./integrations.md).
+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).
 
-For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
+For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](overview/n00b-overview.md) and [Usage](getting-started/usage.md).
 
-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Version Log](./CHANGELOG.md)
+🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Version Log](tutorials-and-community/CHANGELOG.md)
 
 > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
 
 # Diagrams that mermaid can render:
 
-### [Flowchart](https://mermaid-js.github.io/mermaid/#/flowchart)
+### [Flowchart](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/flowchart.html)
 
 ```
 graph TD;
@@ -43,7 +43,7 @@ graph TD;
 
 ![Flowchart](assets/img/flow.png)
 
-### [Sequence diagram](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)
+### [Sequence diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/sequenceDiagram.html)
 
 ```
 sequenceDiagram
@@ -61,7 +61,7 @@ sequenceDiagram
 
 ![Sequence diagram](assets/img/sequence.png)
 
-### [Gantt diagram](https://mermaid-js.github.io/mermaid/#/gantt)
+### [Gantt diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/gantt.html)
 
 ```
 gantt
@@ -78,7 +78,7 @@ Future task2               :         des4, after des3, 5d
 
 ![Gantt diagram](assets/img/gantt.png)
 
-### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/classDiagram)
+### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/classDiagram.html)
 
 ```
 classDiagram
@@ -122,7 +122,7 @@ merge newbranch
 ```
 ![Git graph](assets/img/git.png)
 
-### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram)
+### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/entityRelationshipDiagram.html)
 
 ```
 erDiagram
@@ -134,7 +134,7 @@ erDiagram
 
 ![ER diagram](assets/img/simple-er.png)
 
-### [User Journey Diagram](https://mermaid-js.github.io/mermaid/#/user-journey)
+### [User Journey Diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/user-journey.html)
 
 ```markdown
 journey
@@ -150,9 +150,9 @@ journey
 ![Journey diagram](assets/img/user-journey.png)
 
 # Installation
-## In depth guides and examples can be found in [Getting Started](./n00b-gettingStarted.md) and [Usage](./usage.md).
+## In depth guides and examples can be found in [Getting Started](getting-started/n00b-gettingStarted.md) and [Usage](getting-started/usage.md).
 
-## It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).
+## It would also be helpful to learn more about mermaid's [Syntax](diagrams-and-syntax-and-examples/n00b-syntaxReference.md).
 
 ### CDN
 
@@ -166,7 +166,7 @@ Replace `<version>` with the desired version number.
 
 Alternatively, you can also adjust the version number in the page itself.
 
-Latest Version: [https://unpkg.com/browse/mermaid@8.6.0/](https://unpkg.com/browse/mermaid@8.6.0/)
+Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
 
 ## Incorporating mermaid to a website
 To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
@@ -191,7 +191,7 @@ To support mermaid on your website, all you have to do is add Mermaid’s JavaSc
 ```
 ## Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.
 
-## Examples can be found in [Getting Started](./n00b-gettingStarted.md)
+## Examples can be found in [Getting Started](getting-started/n00b-gettingStarted.md)
 
 # Sibling projects
 - [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor)

docs/_config.yml

@@ -2,13 +2,13 @@ title: mermaid
 lang: en
 description: Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
 
-# theme: jekyll-rtd-theme
 remote_theme: rundocs/jekyll-rtd-theme
 
 mermaid:
   custom: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
 
 copyright:
+  since: 2014
   revision: true
 
 edit: true

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

@@ -612,7 +612,7 @@ The main styling of the class diagram is done with a preset number of css classe
 
 #### Sample stylesheet
 
-```css
+```scss
 body {
     background: white;
 }

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

@@ -4,7 +4,7 @@ sort: 10
 
 ## Directives
 
-## Directives were added in [Version 8.6.0](/8.6.0_docs.md). Please Read it for more information.
+## Directives were added in [Version 8.6.0](../getting-started/8.6.0_docs.md). Please Read it for more information.
 
 ## Directives
 With this version, directives are supported. Directives are divided in two sets, by priority. the first set, containing 'init' or 'initialize' directives take priority. While the other set, containing all other kinds of directives are considered only after 'init' and the graph-type declared.

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

@@ -6,9 +6,9 @@ sort: 2
 
 This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
 
-## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
+## If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../getting-started/n00b-gettingStarted.md).
 
-## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) section.
+## If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](n00b-syntaxReference.md) section.
 
 ## Basic Pie Chart
 

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

@@ -609,7 +609,7 @@ click nodeId callback
 
 Examples of tooltip usage below:
 
-```
+```html
 <script>
   var callback = function(){
       alert('A callback was triggered');
@@ -654,7 +654,7 @@ graph LR;
 ```
 
 Beginners tip, a full example using interactive links in a html context:
-```
+```html
 <body>
   <div class="mermaid">
     graph LR;

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

@@ -354,7 +354,7 @@ click taskId href URL
 * callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified..
 
 Beginners tip, a full example using interactive links in an html context:
-```
+```html
 <body>
   <div class="mermaid">
     gantt

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

@@ -5,7 +5,7 @@ title: Diagram syntax intro
 
 ## Diagram syntax
 
-If you are new to mermaid, read the [Getting Started](n00b-gettingStarted.md) and [Overview](n00b-overview.md) sections, to learn the basics of mermaid.
+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 0can be called.
@@ -30,12 +30,4 @@ These definitions can also be entered into the [mermaid live editor](https://mer
 This would then offer
 
 
-- [Flowchart](flowchart.md)
-- [Sequence diagram](sequenceDiagram.md)
-- [Class Diagram](classDiagram.md)
-- [State Diagram](stateDiagram.md)
-- [Gantt](gantt.md)
-- [Pie Chart](pie.md)
-- [Entity Relationship Diagram](entityRelationshipDiagram.md)
-- [User Journey Diagram](user-journey.md)
-- [Directives](directives.md)
+{% include list.liquid %}

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

@@ -20,9 +20,11 @@ sequenceDiagram
     John-->>Alice: Great!
 ```
 
-## A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
-## If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
+```note
+A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
 
+If unavoidable, one must use parentheses(), quotation marks "", or brackets {},[], to enclose the word "end". i.e : (end), [end], {end}.
+```
 
 ## Syntax
 

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

@@ -8,7 +8,7 @@ sort: 6
 
 Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
 
-```markdown
+```
 stateDiagram-v2
     [*] --> Still
     Still --> [*]
@@ -86,7 +86,7 @@ Transitions are path/edges when one state passes into another. This is represent
 
 When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
 
-```markdown
+```
 stateDiagram-v2
     s1 --> s2
 ```
@@ -98,7 +98,7 @@ stateDiagram-v2
 
 It is possible to add text to a transition. To describe what it represents.
 
-```markdown
+```
 stateDiagram-v2
     s1 --> s2: A transition
 ```
@@ -112,7 +112,7 @@ stateDiagram-v2
 
 There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
 
-```markdown
+```
 stateDiagram-v2
     [*] --> s1
     s1 --> [*]
@@ -131,7 +131,7 @@ have several internal states. These are called composite states in this terminol
 
 In order to define a composite state you need to use the state keyword followed by and id and the body of the composite state between \{\}. See the example below:
 
-```markdown
+```
 stateDiagram-v2
     [*] --> First
     state First {
@@ -151,7 +151,7 @@ stateDiagram-v2
 
 You can do this in several layers:
 
-```markdown
+```
 stateDiagram-v2
     [*] --> First
 
@@ -190,7 +190,7 @@ stateDiagram-v2
 
 You can also define transitions also between composite states:
 
-```markdown
+```
 stateDiagram-v2
     [*] --> First
     First --> Second
@@ -236,7 +236,7 @@ stateDiagram-v2
 
 It is possible to specify a fork in the diagram using <<fork>> <<join>>.
 
-```markdown
+```
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -271,7 +271,7 @@ Sometimes nothing says it better then a Post-it note. That is also the case in s
 
 Here you can choose to put the note to the *right of* or to the *left of* a node.
 
-```markdown
+```
     stateDiagram-v2
         State1: The state with a note
         note right of State1
@@ -298,7 +298,7 @@ Here you can choose to put the note to the *right of* or to the *left of* a node
 
 As in plantUml you can specify concurrency using the -- symbol.
 
-```markdown
+```
 stateDiagram-v2
     [*] --> Active
 

docs/getting-started/8.6.0_docs.md

@@ -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

@@ -5,7 +5,7 @@ This is  list of publicly available Tutorials in Mermaid. This is intended as a
 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
+## 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,8 +20,8 @@ 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:**
 
@@ -35,4 +35,3 @@ https://codepen.io/janzeteachesit/pen/OWWZKN
 ## 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,12 +190,12 @@ 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>
 ```
 7. It should look something like this
-```
+```html
 <script src="C:\Users\myPC\mermaid\dist\mermaid.js"></script>
 <script>mermaid.initialize({startOnLoad:true});</script>
 ```
@@ -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,15 +47,16 @@ 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
@@ -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;
 }
 ```
+
 # 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

docs/overview/n00b-overview.md

@@ -28,7 +28,8 @@ mermaid seeks to change that. mermaid is a javascript based tool that utilizes a
 **Mermaid definitions**
 
 >These are the instrunctions for how the diagram is to rendered, written in mermaid, which is based on Markdown. These can be found inside `<div>` tags, with the `class=mermaid`.
-```
+
+```html
  <div class="mermaid">
     graph TD
     A[Client] --> B[Load Balancer]

docs/tutorials-and-community/CHANGELOG.md

@@ -19,7 +19,7 @@ Here is the list of the newest versions in Descending Order, beginning from the
 This version brings with it a system for [dynamic and integrated configuration of the diagram themes](./theming.md).
 The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.
 
-Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
+Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](../getting-started/8.6.0_docs.md).
 
 **These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.**
 
@@ -86,7 +86,7 @@ Leaving it empty will set all variable values to default.
 
 🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.6.0)
 
-[Version 8.6.0](./8.6.0_docs.md) introduces New Configuration Protocols and Directives and a Beta for the [New Mermaid Live-Editor](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
+[Version 8.6.0](../getting-started/8.6.0_docs.md) introduces New Configuration Protocols and Directives and a Beta for the [New Mermaid Live-Editor](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
 
 **With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.**
 
@@ -990,4 +990,3 @@ By doing this clicks and tags are again allowed.
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.0...0.1.1)
 
 ## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
-

docs/tutorials-and-community/development.md

@@ -7,9 +7,18 @@ title: Development and Contribution
 
 ## Updating the documentation
 
-Please continue writing documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs).
+Please continue writing documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [jekyll-rtd-theme](https://github.com/rundocs/jekyll-rtd-theme).
 
-We publish documentation using GitHub Pages.
+1. Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/)
+2. Change into docs directory
+```sh
+make
+```
+3. Build the site and make it available on a local server
+```sh
+make server
+```
+4. Browse to [http://localhost:4000/mermaid/](http://localhost:4000/mermaid/)
 
 
 ### Questions and/or suggestions ?

src/mermaidAPI.js

@@ -616,9 +616,9 @@ configApi.reset(configApi.getConfig());
 export default mermaidAPI;
 /**
  * ## mermaidAPI configuration defaults
- * <pre>
  *
- * &lt;script>
+ * ```html
+ * <script>
  *   var config = {
  *     theme:'default',
  *     logLevel:'fatal',
@@ -673,6 +673,6 @@ export default mermaidAPI;
  *     }
  *   };
  *   mermaid.initialize(config);
- * &lt;/script>
- *</pre>
+ * </script>
+ * ```
  */