Prettier

2025-01-28 07:03:17 +08:00 · 2022-09-03 13:30:16 +05:30 · 2022-09-03 13:30:16 +05:30 · f6d69b33b3
commit f6d69b33b3
parent 661f283dab
78 changed files with 7227 additions and 2379 deletions
--- a/mocks/d3.js
+++ b/mocks/d3.js
@ -1,4 +1,7 @@
 let NewD3 = function () {
+  /**
+   *
+   */
  function returnThis() {
    return this;
  }
--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@ -597,8 +597,8 @@ Beginner's tip—a full example using interactive links in an HTML page:
  <div class="mermaid">
    classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal :
    +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim()
-        +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }
-        callback Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link"
+    +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } callback
+    Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link"
  </div>

  <script>
--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/docs/diagrams-and-syntax-and-examples/flowchart.md
@ -708,9 +708,9 @@ Beginner's tip—here's a full example of using interactive links in HTML:
 ```html
 <body>
  <div class="mermaid">
-        graph LR; A-->B; B-->C; C-->D; click A callback "Tooltip" click B "https://www.github.com"
-        "This is a link" click C call callback() "Tooltip" click D href "https://www.github.com"
-        "This is a link"
+    graph LR; A-->B; B-->C; C-->D; click A callback "Tooltip" click B "https://www.github.com" "This
+    is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a
+    link"
  </div>

  <script>
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@ -750,9 +750,9 @@ Beginner's tip—a full example using interactive links in a html context:
 ```html
 <body>
  <div class="mermaid">
-        flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com"
-        "This is a link" click C call callback() "Tooltip" click D href "https://www.github.com"
-        "This is a link"
+    flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com" "This
+    is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a
+    link"
  </div>

  <script>
--- a/docs/gantt.md
+++ b/docs/gantt.md
@ -254,14 +254,14 @@ Styling of the a gantt diagram is done by defining a number of css classes. Duri

 ### Classes used

-Class | Description
-\--- | ---
-grid.tick | Styling for the Grid Lines
-grid.path | Styling for the Grid's borders
-.taskText | Task Text Styling
-.taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right.
-.taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left.
-todayMarker | Toggle and Styling for the "Today Marker"
+| Class                 | Description                                                            |
+| --------------------- | ---------------------------------------------------------------------- |
+| grid.tick             | Styling for the Grid Lines                                             |
+| grid.path             | Styling for the Grid's borders                                         |
+| .taskText             | Task Text Styling                                                      |
+| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. |
+| .taskTextOutsideLeft  | Styling for Task Text that exceeds the activity bar, towards the left. |
+| todayMarker           | Toggle and Styling for the "Today Marker"                              |

 ### Sample stylesheet

@ -343,10 +343,10 @@ mermaid.ganttConfig = {

 ### Possible configuration params:

-Param | Description | 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 unwanted clipping which is why this config param exists.|1
+| Param           | Description                                                                                                                                | 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 unwanted clipping which is why this config param exists. | 1             |

 ## Interaction

@ -363,10 +363,10 @@ Beginner's tip—a full example using interactive links in an html context:
 ```html
 <body>
  <div class="mermaid">
-        gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d
-        Print arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href
-        "https://mermaidjs.github.io/" click cl2 call printArguments("test1", "test2", test3) click
-        cl3 call printTask()
+    gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d Print
+    arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href
+    "https://mermaidjs.github.io/" click cl2 call printArguments("test1", "test2", test3) click cl3
+    call printTask()
  </div>

  <script>
--- a/docs/landing/index.html
+++ b/docs/landing/index.html
@ -49,16 +49,7 @@
    <div class="pt-24">
      <div
        style=""
-        class="
-          container
-          lg:px-24
-          max-w-5xl
-          px-4
-          mx-auto
-          flex flex-wrap flex-col
-          md:flex-row
-          items-center
-        "
+        class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center"
      >
        <!--Left Col-->
        <div class="w-full md:w-1/2">
@ -77,24 +68,7 @@
              >
                <button
                  style="background: #ffa41c; border: 1px solid #ff8f00"
-                  class="
-                    mx-auto
-                    lg:mx-0
-                    hover:underline
-                    text-black
-                    font-bold
-                    rounded-full
-                    my-6
-                    py-4
-                    px-8
-                    shadow-lg
-                    focus:outline-none focus:shadow-outline
-                    transform
-                    transition
-                    hover:scale-105
-                    duration-300
-                    ease-in-out
-                  "
+                  class="mx-auto lg:mx-0 hover:underline text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
                >
                  Purchase on Amazon
                </button>
@ -352,25 +326,7 @@
      >
        <button
          style="background: #ffa41c; border: 1px solid #ff8f00"
-          class="
-            mx-auto
-            lg:mx-0
-            hover:underline
-            bg-white
-            text-gray-800
-            font-bold
-            rounded-full
-            my-6
-            py-4
-            px-8
-            shadow-lg
-            focus:outline-none focus:shadow-outline
-            transform
-            transition
-            hover:scale-105
-            duration-300
-            ease-in-out
-          "
+          class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
        >
          Purchase Now on Amazon
        </button>
--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@ -144,8 +144,8 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac

    And here is another:
    <div class="mermaid">
-            graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B
-            -->|tcp_456| D[Server2]
+      graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456|
+      D[Server2]
    </div>
  </body>
 </html>
--- a/docs/theme.css
+++ b/docs/theme.css
--- a/docs/theme_themed.css
+++ b/docs/theme_themed.css
--- a/package.json
+++ b/package.json
@ -32,7 +32,7 @@
    "build:watch": "yarn build:dev --watch",
    "release": "yarn build",
    "lint": "eslint --cache --ignore-path .gitignore .; prettier --check .",
-    "lint:fix": "eslint --cache --fix --ignore-path .gitignore .; prettier --write .",
+    "lint:fix": "eslint --fix --ignore-path .gitignore .; prettier --write ./src",
    "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
    "cypress": "cypress run",
    "cypress:open": "cypress open",
--- a/src/dagre-wrapper/GraphObjects.md
+++ b/src/dagre-wrapper/GraphObjects.md
@ -16,6 +16,7 @@ flowchart
 ```

 In this case the dagre-wrapper will transform the graph to the graph below.
+
 ```mermaid
 flowchart
  C1 --> C2
@ -28,7 +29,8 @@ When rendering this diagram it it beeing rendered recursively. The diagram is re
 ```
 { clusterNode: true, graph }
 ```
-*Data for a clusterNode*
+
+_Data for a clusterNode_

 When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering can not be used as the layout of the graph needs to take responsibility for nodes outside of the cluster.

@ -49,7 +51,6 @@ In the diagram above the root diagram would be rendered with C1 whereas C2 would

 Of these two approaches the top one renders better and is used when possible. When this is not possible, ie an edge is added crossing the border the non recursive approach is used.

-
 # Graph objects and their properties

 Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper.
@ -57,6 +58,7 @@ Explains the representation of various objects used to render the flow charts an
 ## node

 Sample object:
+
 ```json
 {
  "shape": "rect",
@ -67,13 +69,14 @@ Sample object:
  "style": "",
  "id": "Test",
  "type": "group",
-  "padding":15}
+  "padding": 15
+}
 ```

 This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering.

 | property   | description                                                                                      |
-| ---------- | ----------------------------------------------------------------------------------------------------------- |
+| ---------- | ------------------------------------------------------------------------------------------------ |
 | labelStyle | Css styles for the label. User for instance for styling the labels for clusters                  |
 | shape      | The shape of the node.                                                                           |
 | labelText  | The text on the label                                                                            |
@ -82,11 +85,10 @@ This is set by the renderer of the diagram and insert the data that the wrapper
 | classes    | Classes to be set for the shape. Not used                                                        |
 | style      | Css styles for the actual shape                                                                  |
 | id         | id of the shape                                                                                  |
-| type       | if set to group then this node indicates *a cluster*.                                                       |
+| type       | if set to group then this node indicates _a cluster_.                                            |
 | padding    | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete. |
 | data       | Non-generic data specific to the shape.                                                          |

-
 # edge

 arrowType sets the type of arrows to use. The following arrow types are currently supported:
@ -100,11 +102,10 @@ double_arrow_circle

 Lets try to make these types semantic free so that diagram type semantics does not find its way in to this more generic layer.

-
 Required edgeData for proper rendering:

 | property   | description                                                          |
-| ---------- | ---------------------------------------- |
+| ---------- | -------------------------------------------------------------------- |
 | id         | Id of the edge                                                       |
 | arrowHead  | overlap between arrowHead and arrowType?                             |
 | arrowType  | overlap between arrowHead and arrowType?                             |
@ -116,7 +117,6 @@ Required edgeData for proper rendering:
 | thickness  | Sets the thinkess of the edge. Can be \['normal', 'thick'\]          |
 | pattern    | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] |

-
 # Markers

 Define what markers that should be included in the diagram with the insert markers function. The function takes two arguments, first the element in which the markers should be included and a list of the markers that should be added.
@ -127,12 +127,13 @@ insertMarkers(el, \['point', 'circle'\])
 The example above adds the markers point and cross. This means that edges with the arrowTypes arrow_cross, double_arrow_cross, arrow_point and double_arrow_cross will get the corresponding markers but arrowType arrow_cross will have no impact.

 Current markers:
-* point - the standard arrow from flowcharts
-* circle - Arrows ending with circle
-* cross - arrows starting and ending with a cross

+- point - the standard arrow from flowcharts
+- circle - Arrows ending with circle
+- cross - arrows starting and ending with a cross

 // Todo - in case of common renderer
+
 # Common functions used by the renderer to be implemented by the Db

 getDirection
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@ -240,7 +240,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
  const Q = Math.abs(outsidePoint.y - insidePoint.y);
  const R = Math.abs(outsidePoint.x - insidePoint.x);
  // log.warn();
-  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // eslint-disable-line
+  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
    // Intersection is top or bottom of rect.
    // let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
    let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
--- a/src/diagrams/flowchart/flowChartShapes.spec.js
+++ b/src/diagrams/flowchart/flowChartShapes.spec.js
@ -94,6 +94,9 @@ describe('flowchart shapes', function () {
  });
 });

+/**
+ *
+ */
 function MockRender() {
  const shapes = {};
  return {
@ -103,6 +106,11 @@ function MockRender() {
  };
 }

+/**
+ *
+ * @param tag
+ * @param {...any} args
+ */
 function MockSvg(tag, ...args) {
  const children = [];
  const attributes = {};
@ -139,6 +147,11 @@ function useWidth(w, h) {
  return w;
 }

+/**
+ *
+ * @param w
+ * @param h
+ */
 function useHeight(w, h) {
  return h;
 }
--- a/src/diagrams/git/gitGraphAst.js
+++ b/src/diagrams/git/gitGraphAst.js
@ -24,6 +24,9 @@ let curBranch = mainBranchName;
 let direction = 'LR';
 let seq = 0;

+/**
+ *
+ */
 function getId() {
  // eslint-disable-line
  return random({ length: 7 });
--- a/src/diagrams/git/layout.js
+++ b/src/diagrams/git/layout.js
@ -1,6 +1,6 @@
 import { getConfig } from '../../config';

-export default (dir, _branches, _commits) => { // eslint-disable-line
+export default (dir, _branches, _commits) => {
  const config = getConfig().gitGraph;
  const branches = [];
  const commits = [];
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@ -918,7 +918,7 @@ const _drawTextCandidateFunc = (function () {
   */
  function _setTextAttrs(toText, fromTextAttrsDict) {
    for (const key in fromTextAttrsDict) {
-      if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line
+      if (fromTextAttrsDict.hasOwnProperty(key)) {
        toText.attr(key, fromTextAttrsDict[key]);
      }
    }
@ -1026,7 +1026,8 @@ const _drawMenuItemTextCandidateFunc = (function () {
   */
  function _setTextAttrs(toText, fromTextAttrsDict) {
    for (const key in fromTextAttrsDict) {
-      if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line
+      if (fromTextAttrsDict.hasOwnProperty(key)) {
+        // eslint-disable-line
        toText.attr(key, fromTextAttrsDict[key]);
      }
    }
--- a/src/docs.mts
+++ b/src/docs.mts
@ -53,7 +53,7 @@ const transform = (file: string) => {
    prettier.format(transformed, {
      parser: 'markdown',
      useTabs: false,
-      tabWidth: 4,
+      tabWidth: 2,
      endOfLine: 'auto',
      printWidth: 100,
      singleQuote: true,
--- a/src/docs/8.6.0_docs.md
+++ b/src/docs/8.6.0_docs.md
@ -16,17 +16,17 @@ the `init` directive is the main method of configuration for Site and Current Le
 The three levels of are Configuration, Global, Site and Current.

 | Level of Configuration | Description                         |
-| --- | --- |
+| ---------------------- | ----------------------------------- |
 | Global Configuration   | Default Mermaid Configurations      |
 | Site Configuration     | Configurations made by site owner   |
 | Current Configuration  | Configurations made by Implementors |

-
 # Limits to Modifying Configurations
+
 **secure Array**

 | Parameter | Description                                      | Type  | Required | Values         |
-| --- | --- | --- | --- | --- |
+| --------- | ------------------------------------------------ | ----- | -------- | -------------- |
 | secure    | Array of parameters excluded from init directive | Array | Required | Any parameters |

 The modifiable parts of the Configuration are limited by the secure array, which is an array of immutable parameters, this array can be expanded by site owners.
@ -43,6 +43,7 @@ Default values for the `secure array` consists of: ['secure', 'securityLevel', '
 Implementors can only modify configurations using directives, and cannot change the `secure` array.

 # Modifying Configurations and directives:
+
 The Two types of directives: are `init` (or `initialize`) and `wrap`.

 ```note
@ -52,13 +53,13 @@ All directives are enclosed in `%%{ }%%`
 Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible.

 # Init
+
 `init`, or `initialize`: this directive gives the user the ability to overwrite and change the values for any configuration parameters not set in the secure array.

 | Parameter | Description             | Type      | Required | Values                                          |
-| --- | --- | --- | --- | --- |
+| --------- | ----------------------- | --------- | -------- | ----------------------------------------------- |
 | init      | modifies configurations | Directive | Optional | Any parameters not included in the secure array |

-
 ```note
 init would be an argument-directive: `%%{init: { **insert argument here**}}%%`

@ -73,6 +74,7 @@ When deployed within code, init is called before the graph/diagram description.
 ```

 **for example**:
+
 ```mmd
 %%{init: {"theme": "default", "logLevel": 1 }}%%
 graph LR
@ -84,10 +86,11 @@ When deployed within code, init is called before the graph/diagram description.
  f-->g
  g-->
 ```
+
 # Wrap

 | Parameter | Description                   | Type      | Required | Values     |
-| --- | --- | --- | --- | --- |
+| --------- | ----------------------------- | --------- | -------- | ---------- |
 | wrap      | a callable text-wrap function | Directive | Optional | %%{wrap}%% |

 ```note
@ -104,8 +107,8 @@ It is a non-argument directive and can be executed thusly:

 ![Image showing wrapped text](img/wrapped%20text.png)

-
 # Resetting Configurations:
+
 There are two more functions in the mermaidAPI that can be called by site owners: **reset** and **globalReset**.

 **reset**: resets the configuration to whatever the last configuration was. This can be done to undo more recent changes set from the last mermaidAPI.initialize({...}) configuration.
@ -115,6 +118,7 @@ There are two more functions in the mermaidAPI that can be called by site owners
 **Notes**: Both `reset` and `globalReset` are only available to site owners, and as such implementors have to edit their configs using `init`.

 # Additional Utils to mermaid
+
 • **memoize**: simple caching for computationally expensive functions, reducing rendering time by about 90%.

 • **assignWithDepth** - an improvement on previous functions with config.js and `Object.assign`. The purpose of this function is to provide a sane mechanism for merging objects, similar to `object.assign`, but with depth.
@ -123,7 +127,6 @@ Example of **assignWithDepth**:

 ![Image showing assignWithDepth](img/assignWithDepth.png)

-
 Example of **object.Assign**:

 ![Image showing object.assign without depth](img/object.assign%20without%20depth.png)
@ -132,13 +135,12 @@ Example of **object.Assign**:

 **Notes**: For more information on usage, parameters, and return info for these new functions take a look at the jsdocs for them in the utils package.

-
 # New API Requests Introduced in Version 8.6.0

 ## setSiteConfig

 | Function        | Description                           | Type        | Values                                  | Parameters | Returns    |
-| --------- | ------------------- | ------- | ------------------ | ------------------ | ------------------ |
+| --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- |
 | `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf       | siteConfig |

 ```note
@ -152,7 +154,7 @@ Default value: will mirror Global Config
 ## getSiteConfig

 | Function        | Description                                         | Type        | Values                             |
-| --------- | ------------------- | ------- |  ------------------ |
+| --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
 | `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |

 ```note
@ -162,7 +164,7 @@ Returns   any   values in siteConfig.
 ## setConfig

 | Function    | Description                                | Type        | Values                            | Parameters | Returns                                        |
-| --------- | ------------------- | ------- | ------------------ |----------|-------|
+| ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- |
 | `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf       | `currentConfig` merged with the sanitized conf |

 ```note
@ -174,10 +176,9 @@ siteConfig value.
 ## getConfig

 | Function    | Description                 | Type        | Return Values                   |
-| --------- | ------------------- | ------- | ------------------ |
+| ----------- | --------------------------- | ----------- | ------------------------------- |
 | `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` |

-
 ```note
 Returns any values in currentConfig.
 ```
@ -185,7 +186,7 @@ Returns any values in currentConfig.
 ## sanitize

 | Function   | Description                              | Type           | Values |
-| --------- | ------------------- | ------- | ------------------ |
+| ---------- | ---------------------------------------- | -------------- | ------ |
 | `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None   |

 ```note
@ -196,13 +197,13 @@ Ensures options parameter does not attempt to override siteConfig secure keys.
 ## reset

 | Function | Description                    | Type        | Required | Values | Parameter |
-| --------- | -------------------| ------- | -------- | ------------------ |---------|
+| -------- | ------------------------------ | ----------- | -------- | ------ | --------- |
 | `reset`  | Resets `currentConfig` to conf | Put Request | Required | None   | conf      |

 ## conf

 | Parameter | Description                                                  | Type       | Required | Values                                       |
-| --- | --- | --- | --- | --- |
+| --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- |
 | `conf`    | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array |

 ```note
--- a/src/docs/CHANGELOG.md
+++ b/src/docs/CHANGELOG.md
@ -26,7 +26,8 @@ Example of `Initalize` call setting `theme` to `base`:

 ```javascript
 mermaidAPI.initialize({
-    'securityLevel': 'loose', 'theme': 'base'
+  securityLevel: 'loose',
+  theme: 'base',
 });
 ```

@ -53,7 +54,6 @@ The easiest way to make a custom theme is to start with the base theme, and just
 | -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
 | themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |

-
 Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.

 ```mmd
@ -130,7 +130,7 @@ By doing this clicks and tags are again allowed.

 ```javascript
 mermaidAPI.initialize({
-        securityLevel: 'loose'
+  securityLevel: 'loose',
 });
 ```

@ -221,7 +221,7 @@ By doing this clicks and tags are again allowed.
 - TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
 - A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
 - Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
- classdiagram not works in mermaid live\_editor  [\#553](https://github.com/knsv/mermaid/issues/553)
+- classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
 - font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
 - q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
 - Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
@ -353,6 +353,7 @@ By doing this clicks and tags are again allowed.
 - Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))

 ## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.3...7.0.5)

 **Closed issues:**
@ -376,6 +377,7 @@ By doing this clicks and tags are again allowed.
 - New documentation - need improved logo [\#216](https://github.com/knsv/mermaid/issues/216)

 ## [7.0.3](https://github.com/knsv/mermaid/tree/7.0.3) (2017-06-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.2...7.0.3)

 **Closed issues:**
@ -384,6 +386,7 @@ By doing this clicks and tags are again allowed.
 - Good example of interactivity with mermaidAPI [\#514](https://github.com/knsv/mermaid/issues/514)

 ## [7.0.2](https://github.com/knsv/mermaid/tree/7.0.2) (2017-06-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/7.0.0...7.0.2)

 **Closed issues:**
@ -421,6 +424,7 @@ By doing this clicks and tags are again allowed.
 - add par statement to sequenceDiagram [\#470](https://github.com/knsv/mermaid/pull/470) ([u-minor](https://github.com/u-minor))

 ## [7.0.0](https://github.com/knsv/mermaid/tree/7.0.0) (2017-01-29)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/6.0.0...7.0.0)

 **Implemented enhancements:**
@ -474,6 +478,7 @@ By doing this clicks and tags are again allowed.
 - Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))

 ## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.8...6.0.0)

 **Closed issues:**
@ -512,9 +517,11 @@ By doing this clicks and tags are again allowed.
 - Quote phantomPath so that it doesn't fail on window [\#286](https://github.com/knsv/mermaid/pull/286) ([raghur](https://github.com/raghur))

 ## [0.5.8](https://github.com/knsv/mermaid/tree/0.5.8) (2016-01-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.7...0.5.8)

 ## [0.5.7](https://github.com/knsv/mermaid/tree/0.5.7) (2016-01-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.6...0.5.7)

 **Closed issues:**
@ -536,6 +543,7 @@ By doing this clicks and tags are again allowed.
 - Allow sequenceDiagram participant aliasing [\#265](https://github.com/knsv/mermaid/pull/265) ([gibson042](https://github.com/gibson042))

 ## [0.5.6](https://github.com/knsv/mermaid/tree/0.5.6) (2015-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.5...0.5.6)

 **Implemented enhancements:**
@ -572,6 +580,7 @@ By doing this clicks and tags are again allowed.
 - Add a Gitter chat badge to README.md [\#230](https://github.com/knsv/mermaid/pull/230) ([gitter-badger](https://github.com/gitter-badger))

 ## [0.5.5](https://github.com/knsv/mermaid/tree/0.5.5) (2015-10-21)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.4...0.5.5)

 **Closed issues:**
@ -583,6 +592,7 @@ By doing this clicks and tags are again allowed.
 - Fix a typo: crosshead --\> arrowhead [\#228](https://github.com/knsv/mermaid/pull/228) ([tylerlong](https://github.com/tylerlong))

 ## [0.5.4](https://github.com/knsv/mermaid/tree/0.5.4) (2015-10-19)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.3...0.5.4)

 **Implemented enhancements:**
@ -608,9 +618,11 @@ By doing this clicks and tags are again allowed.
 - Remove duplicate npm dependencies: d3 and he [\#223](https://github.com/knsv/mermaid/pull/223) ([spect88](https://github.com/spect88))

 ## [0.5.3](https://github.com/knsv/mermaid/tree/0.5.3) (2015-10-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.2...0.5.3)

 ## [0.5.2](https://github.com/knsv/mermaid/tree/0.5.2) (2015-10-04)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.1...0.5.2)

 **Implemented enhancements:**
@ -663,6 +675,7 @@ By doing this clicks and tags are again allowed.
 - Update phantomscript.js [\#182](https://github.com/knsv/mermaid/pull/182) ([phairow](https://github.com/phairow))

 ## [0.5.1](https://github.com/knsv/mermaid/tree/0.5.1) (2015-06-21)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.5.0...0.5.1)

 **Implemented enhancements:**
@ -699,6 +712,7 @@ By doing this clicks and tags are again allowed.
 - Remove moot `version` property from bower.json [\#172](https://github.com/knsv/mermaid/pull/172) ([kkirsche](https://github.com/kkirsche))

 ## [0.5.0](https://github.com/knsv/mermaid/tree/0.5.0) (2015-06-07)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.4.0...0.5.0)

 **Implemented enhancements:**
@ -734,6 +748,7 @@ By doing this clicks and tags are again allowed.
 - Use a library-level variable for assigning ids [\#134](https://github.com/knsv/mermaid/pull/134) ([bollwyvl](https://github.com/bollwyvl))

 ## [0.4.0](https://github.com/knsv/mermaid/tree/0.4.0) (2015-03-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.5...0.4.0)

 **Implemented enhancements:**
@ -752,9 +767,11 @@ By doing this clicks and tags are again allowed.
 - Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)

 ## [0.3.5](https://github.com/knsv/mermaid/tree/0.3.5) (2015-02-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.4...0.3.5)

 ## [0.3.4](https://github.com/knsv/mermaid/tree/0.3.4) (2015-02-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.3...0.3.4)

 **Implemented enhancements:**
@ -785,6 +802,7 @@ By doing this clicks and tags are again allowed.
 - Ignore all files except the license and dist/ folder when installing with Bower. [\#112](https://github.com/knsv/mermaid/pull/112) ([jasonbellamy](https://github.com/jasonbellamy))

 ## [0.3.3](https://github.com/knsv/mermaid/tree/0.3.3) (2015-01-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.2...0.3.3)

 **Implemented enhancements:**
@ -805,6 +823,7 @@ By doing this clicks and tags are again allowed.
 - fix html tags in example usage [\#100](https://github.com/knsv/mermaid/pull/100) ([deiwin](https://github.com/deiwin))

 ## [0.3.2](https://github.com/knsv/mermaid/tree/0.3.2) (2015-01-11)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.1...0.3.2)

 **Implemented enhancements:**
@ -827,6 +846,7 @@ By doing this clicks and tags are again allowed.
 - Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))

 ## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.3.0...0.3.1)

 **Implemented enhancements:**
@ -849,6 +869,7 @@ By doing this clicks and tags are again allowed.
 - Add apostrophe & 'and' [\#72](https://github.com/knsv/mermaid/pull/72) ([sudodoki](https://github.com/sudodoki))

 ## [0.3.0](https://github.com/knsv/mermaid/tree/0.3.0) (2014-12-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.16...0.3.0)

 **Implemented enhancements:**
@ -871,6 +892,7 @@ By doing this clicks and tags are again allowed.
 - Allow special symbols for direction along with acronyms [\#66](https://github.com/knsv/mermaid/pull/66) ([vijay40](https://github.com/vijay40))

 ## [0.2.16](https://github.com/knsv/mermaid/tree/0.2.16) (2014-12-15)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.15...0.2.16)

 **Fixed bugs:**
@ -891,11 +913,12 @@ By doing this clicks and tags are again allowed.
 - New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
 - Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
 - Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
- Included .DS\_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
+- Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
 - Improves readability discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
 - Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))

 ## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.14...0.2.15)

 **Fixed bugs:**
@ -911,13 +934,15 @@ By doing this clicks and tags are again allowed.

 **Merged pull requests:**

- Include bower\_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
+- Include bower_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
 - Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))

 ## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.13...0.2.14)

 ## [0.2.13](https://github.com/knsv/mermaid/tree/0.2.13) (2014-12-03)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.10...0.2.13)

 **Implemented enhancements:**
@ -932,9 +957,11 @@ By doing this clicks and tags are again allowed.
 - Support unicode chars in labels [\#9](https://github.com/knsv/mermaid/issues/9)

 ## [0.2.10](https://github.com/knsv/mermaid/tree/0.2.10) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.9...0.2.10)

 ## [0.2.9](https://github.com/knsv/mermaid/tree/0.2.9) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.8...0.2.9)

 **Closed issues:**
@ -947,9 +974,11 @@ By doing this clicks and tags are again allowed.
 - Allow unicode chars in labels [\#13](https://github.com/knsv/mermaid/pull/13) ([codebeige](https://github.com/codebeige))

 ## [0.2.8](https://github.com/knsv/mermaid/tree/0.2.8) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.7...0.2.8)

 ## [0.2.7](https://github.com/knsv/mermaid/tree/0.2.7) (2014-12-01)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.6...0.2.7)

 **Closed issues:**
@ -957,9 +986,11 @@ By doing this clicks and tags are again allowed.
 - Provide parser as separate module [\#4](https://github.com/knsv/mermaid/issues/4)

 ## [0.2.6](https://github.com/knsv/mermaid/tree/0.2.6) (2014-11-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.5...0.2.6)

 ## [0.2.5](https://github.com/knsv/mermaid/tree/0.2.5) (2014-11-27)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.4...0.2.5)

 **Merged pull requests:**
@ -967,21 +998,27 @@ By doing this clicks and tags are again allowed.
 - Added new shapes! [\#1](https://github.com/knsv/mermaid/pull/1) ([bjowes](https://github.com/bjowes))

 ## [0.2.4](https://github.com/knsv/mermaid/tree/0.2.4) (2014-11-25)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.3...0.2.4)

 ## [0.2.3](https://github.com/knsv/mermaid/tree/0.2.3) (2014-11-24)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.2...0.2.3)

 ## [0.2.2](https://github.com/knsv/mermaid/tree/0.2.2) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.1...0.2.2)

 ## [0.2.1](https://github.com/knsv/mermaid/tree/0.2.1) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.2.0...0.2.1)

 ## [0.2.0](https://github.com/knsv/mermaid/tree/0.2.0) (2014-11-22)
+
 [Full Changelog](https://github.com/knsv/mermaid/compare/0.1.1...0.2.0)

 ## [0.1.1](https://github.com/knsv/mermaid/tree/0.1.1) (2014-11-17)
+
 [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)
--- a/src/docs/Configuration.md
+++ b/src/docs/Configuration.md
@ -7,21 +7,14 @@ The Following are the most commonly used methods, and are all tied to Mermaid [D

 ## 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.

-
 ## [Directives](./directives.md),

 allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.

 ## Theme Creation:
+
 An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams.

-
 If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes
-
-
-
-
-
--- a/src/docs/Setup.md
+++ b/src/docs/Setup.md
@ -1610,15 +1610,9 @@ Returns **void**
 ```

 [1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js
-
 [2]: Setup.md?id=render
-
 [3]: 8.6.0_docs.md
-
 [4]: #mermaidapi-configuration-defaults
-
 [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-
 [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-
 [7]: https://developer.mozilla.org/docs/Web/API/Element
--- a/src/docs/Tutorials.md
+++ b/src/docs/Tutorials.md
@ -6,8 +6,8 @@ This is  list of publicly available Tutorials for using Mermaid.JS . This is int

 For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.

-
 ## Live-Editor Tutorials
+
 The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.

 [Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA)
@ -20,8 +20,8 @@ The definitions that can be generated the Live-Editor are also backwards-compati

 [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)

-
 ## Mermaid with HTML
+
 Examples are provided in [Getting Started](n00b-gettingStarted.md)

 **CodePen Examples:**
@ -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
@ -43,7 +42,6 @@ https://codepen.io/Ryuno-Ki/pen/LNxwgR

 [K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)

-
 ## Jupyter Integration with mermaid-js

 Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
--- a/src/docs/_navbar.md
+++ b/src/docs/_navbar.md
@ -1,13 +1,13 @@
-* Getting started
+- Getting started

-  * [Quick start](quickstart.md)
-  * [Writing more pages](more-pages.md)
-  * [Custom navbar](custom-navbar.md)
-  * [Cover page](cover.md)
+  - [Quick start](quickstart.md)
+  - [Writing more pages](more-pages.md)
+  - [Custom navbar](custom-navbar.md)
+  - [Cover page](cover.md)

-* Configuration
-  * [Configuration](configuration.md)
-  * [Themes](themes.md)
-  * [Using plugins](plugins.md)
-  * [Markdown configuration](markdown.md)
-  * [Language highlight](language-highlight.md)
+- Configuration
+  - [Configuration](configuration.md)
+  - [Themes](themes.md)
+  - [Using plugins](plugins.md)
+  - [Markdown configuration](markdown.md)
+  - [Language highlight](language-highlight.md)
--- a/src/docs/_sidebar.md
+++ b/src/docs/_sidebar.md
@ -5,6 +5,7 @@
  - [Syntax and Configuration](n00b-syntaxReference.md)

 - 📊 Diagram Syntax
+
  - [Flowchart](flowchart.md)
  - [Sequence Diagram](sequenceDiagram.md)
  - [Class Diagram](classDiagram.md)
@ -30,6 +31,7 @@
  - [Advanced usage](n00b-advanced.md)

 - 📚 Misc
+
  - [Use-Cases and Integrations](integrations.md)
  - [FAQ](faq.md)

--- a/src/docs/breakingChanges.md
+++ b/src/docs/breakingChanges.md
@ -27,13 +27,13 @@ mermaid.initialize({
 In old versions you needed to reference a CSS file in your HTML:

 ```html
-<link rel="stylesheet" href="mermaid.min.css">
+<link rel="stylesheet" href="mermaid.min.css" />
 ```

 or

 ```html
-<link rel="stylesheet" href="mermaid.forest.min.css">
+<link rel="stylesheet" href="mermaid.forest.min.css" />
 ```

 Now it is not needed, and there are no more CSS files in the distribution files.
@ -42,8 +42,8 @@ You just:

 ```javascript
 mermaid.initialize({
-    theme: 'forest'
-})
+  theme: 'forest',
+});
 ```

 and it works like a charm because now the CSS is inline with the SVG to allow simpler portability.
--- a/src/docs/classDiagram.md
+++ b/src/docs/classDiagram.md
@ -146,13 +146,14 @@ To describe the visibility (or encapsulation) of an attribute or method/function
 - `~` Package/Internal

 > _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`:
+>
 > - `*` Abstract e.g.: `someAbstractMethod()*`
 > - `$` Static e.g.: `someStaticMethod()$`

 > _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name:
+>
 > - `$` Static e.g.: `String someField$`

-
 ## Defining Relationship

 A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
@ -234,7 +235,6 @@ Here is the syntax:

 Where `Relation Type` can be one of:

-
 | Type | Description |
 | ---- | ----------- |
 | <\|  | Inheritance |
@ -368,6 +368,7 @@ action className "reference" "tooltip"
 click className call callback() "tooltip"
 click className href "url" "tooltip"
 ```
+
 - _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
 - _className_ is the id of the node that the action will be associated with
 - _reference_ is either the url link, or the function name for callback.
@ -423,30 +424,10 @@ Beginner's tip—a full example using interactive links in an HTML page:
 ```html
 <body>
  <div class="mermaid">
-    classDiagram
-    Animal <|-- Duck
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-      +String beakColor
-      +swim()
-      +quack()
-      }
-    class Fish{
-      -int sizeInFeet
-      -canEat()
-      }
-    class Zebra{
-      +bool is_wild
-      +run()
-      }
-
-      callback Duck callback "Tooltip"
-      link Zebra "https://www.github.com" "This is a link"
+    classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal :
+    +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim()
+    +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } callback
+    Duck callback "Tooltip" link Zebra "https://www.github.com" "This is a link"
  </div>

  <script>
@ -455,7 +436,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
    };
    var config = {
      startOnLoad: true,
-        securityLevel: 'loose'
+      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
@ -471,8 +452,8 @@ It is possible to apply specific styles such as a thicker border or a different
 ```html
 <style>
  .cssClass > rect {
-        fill:#FF0000;
-        stroke:#FFFF00;
+    fill: #ff0000;
+    stroke: #ffff00;
    stroke-width: 4px;
  }
 </style>
@ -509,7 +490,7 @@ classDiagram

 ?> cssClasses cannot be added using this shorthand method at the same time as a relation statement.

-?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself.  ***Coming soon!***
+?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. **_Coming soon!_**

 ### Default Styles

--- a/src/docs/developer-docs/configuration.md
+++ b/src/docs/developer-docs/configuration.md
@ -2,9 +2,9 @@

 When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration:

-* The default configuration
-* Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
-* Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
+- The default configuration
+- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
+- Directives - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.

 **The render config** is configuration that is used when rendering by applying these configurations.

--- a/src/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/src/docs/diagrams-and-syntax-and-examples/flowchart.md
@ -25,12 +25,11 @@ graph LR

 Possible FlowChart orientations are:

-* TB - top to bottom
-* TD - top-down (same as top to bottom)
-* BT - bottom to top
-* RL - right to left
-* LR - left to right
-
+- TB - top to bottom
+- TD - top-down (same as top to bottom)
+- BT - bottom to top
+- RL - right to left
+- LR - left to right

 ## Flowcharts

@ -38,7 +37,7 @@ This renders a flowchart that allows for features such as: more arrow types, mul

 Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts.

-> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
+> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*

 ## Nodes and shapes

@ -105,7 +104,8 @@ graph LR
 graph LR
    id1>This is the text in the box]
 ```
-Currently it is only possible to render the shape above, and not its mirror. *This might change with future releases.*
+
+Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._

 ### A node (rhombus)

@ -127,6 +127,7 @@ graph LR
 graph TD
    id1[/This is the text in the box/]
 ```
+
 ### Parallelogram alt

 ```mermaid-example
@ -140,6 +141,7 @@ graph TD
 graph TD
    A[/Christmas\]
 ```
+
 ### Trapezoid alt

 ```mermaid-example
@ -224,23 +226,28 @@ graph LR
 ### Chaining of links

 It is possible to declare many links on the same line as per below:
+
 ```mermaid-example
 graph LR
   A -- text --> B -- text2 --> C
 ```

 It is also possible to declare multiple nodes links in the same line as per below:
+
 ```mermaid-example
 graph LR
   a --> b & c--> d
 ```

 You can then describe dependencies in a very expressive way. Like the one-liner below:
+
 ```mermaid-example
 graph TB
    A & B--> C & D
 ```
+
 If you describe the same diagram using the the basic syntax, it will take four lines:
+
 ```mmd
 graph TB
    A --> C
@ -248,6 +255,7 @@ graph TB
    B --> C
    B --> D
 ```
+
 A word of warning, one could go overboard with this, making the graph harder to read in
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.
@ -313,7 +321,7 @@ For dotted or thick links, the characters to add are equals signs or dots,
 as summed up in the following table:

 | Length            |   1    |    2    |    3     |
-|-------------------|:------:|:-------:|:--------:|
+| ----------------- | :----: | :-----: | :------: |
 | Normal            | `---`  | `----`  | `-----`  |
 | Normal with arrow | `-->`  | `--->`  | `---->`  |
 | Thick             | `===`  | `====`  | `=====`  |
@ -403,8 +411,8 @@ click nodeId callback
 click nodeId call callback()
 ```

-* nodeId is the id of the node
-* `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter.
+- nodeId is the id of the node
+- `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter.

 ```html
 <script>
@ -428,11 +436,13 @@ graph LR;
    click A call callback() "Tooltip for a callback"
    click B href "https://www.github.com" "This is a tooltip for a link"
 ```
+
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.

 ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).

 Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
+
 ```mermaid-example
 graph LR;
    A-->B;
@ -450,14 +460,9 @@ Beginner's tip—here's a full example of using interactive links in HTML:
 ```html
 <body>
  <div class="mermaid">
-    graph LR;
-        A-->B;
-        B-->C;
-        C-->D;
-        click A callback "Tooltip"
-        click B "https://www.github.com" "This is a link"
-        click C call callback() "Tooltip"
-        click D href "https://www.github.com" "This is a link"
+    graph LR; A-->B; B-->C; C-->D; click A callback "Tooltip" click B "https://www.github.com" "This
+    is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a
+    link"
  </div>

  <script>
@ -469,9 +474,9 @@ Beginner's tip—here's a full example of using interactive links in HTML:
      flowchart: {
        useMaxWidth: true,
        htmlLabels: true,
-            curve: 'cardinal'
+        curve: 'cardinal',
      },
-        securityLevel: 'loose'
+      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
@ -532,7 +537,6 @@ graph LR
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```

-
 #### Classes

 More convenient than defining the style every time is to define a class of styles and attach this class reference to multiple nodes.
@ -563,7 +567,6 @@ graph LR
    classDef someclass fill:#f96;
 ```

-
 ### Css classes

 It is also possible to predefine classes in css styles that can be applied from the graph definition:
@ -572,8 +575,8 @@ It is also possible to predefine classes in css styles that can be applied from

 ```css
 .cssClass > rect {
-    fill: #FF0000;
-    stroke: #FFFF00;
+  fill: #ff0000;
+  stroke: #ffff00;
  stroke-width: 4px;
 }
 ```
@ -587,7 +590,6 @@ graph LR;
    class A cssClass;
 ```

-
 ### Default class

 If a class is named `default` it will be assigned to all nodes that do not have a specific class definition.
@ -596,7 +598,6 @@ If a class is named `default` it will be assigned to all nodes that do not have
    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
 ```

-
 ## Basic support for fontawesome

 It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#.
@ -609,12 +610,11 @@ graph TD
    B-->E(A fa:fa-camera-retro perhaps?);
 ```

-
 ## Graph declarations with spaces between vertices and link and without semicolon

-* After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
+- After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.

-* A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability.
+- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability.

 Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges.

@ -626,7 +626,6 @@ graph LR
    C -->|Two| E[Result two]
 ```

-
 ## Configuration...

 Is it possible to adjust the width of the rendered flowchart.
@ -636,6 +635,6 @@ In Javascript config parameters can be set by using `mermaid.flowchartConfig`:

 ```javascript
 mermaid.flowchartConfig = {
-    width: '100%'
-}
+  width: '100%',
+};
 ```
--- a/src/docs/directives.md
+++ b/src/docs/directives.md
@ -1,15 +1,19 @@
 # Directives

 ## Directives
+
 Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.

 The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.

-While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the *option to define the set of configurations* that you would allow to be available to the diagram author for overriding with help of directives.
+While directives allow you to change most of the default configuration settings, there are some that are not available, that too for security reasons. Also, you do have the _option to define the set of configurations_ that you would allow to be available to the diagram author for overriding with help of directives.

 ## Types of Directives options
+
 Mermaid basically supports two types of configuration options to be overridden by directives.
-1) *General/Top Level configurations* : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+
+1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+
 - theme
 - fontFamily
 - logLevel
@ -17,22 +21,25 @@ Mermaid basically supports two types of configuration options to be overridden b
 - startOnLoad
 - secure

-
-2) *Diagram specific configurations* : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
+2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
   For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.

 **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
+
 ```
 Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations,
 with their possible values in the docs
 ```
+
 ## Declaring directives
+
 Now that we have defined the types of configurations that are available, we can learn how to declare directives.
 A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`.

-Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being *init*. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
+Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.

 Following code snippet shows the structure of a directive:
+
 ```
 %%{
  init: {
@ -49,11 +56,15 @@ Following code snippet shows the structure of a directive:
  }
 }%%
 ```
+
 You can also define the directives in a single line, like this:
+
 ```
 %%{init: { **insert argument here**}}%%
 ```
+
 For example, the following code snippet:
+
 ```
 %%{init: { "sequence": { "mirrorActors":false }}}%%
 ```
@ -63,6 +74,7 @@ The json object that is passed as {**argument** } must be valid key value pairs
 Valid Key Value pairs can be found in config.

 Example with a simple graph:
+
 ```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
 graph LR
@ -85,26 +97,28 @@ parsing the above generates a single `%%init%%` JSON object below, combining the
 {
  logLevel: 'fatal',
  theme: 'dark',
-  startOnLoad: true
+  startOnLoad: true,
 }
 ```

 This will then be sent to `mermaid.initialize(...)` for rendering.

 ## Directive Examples
+
 More directive examples for diagram specific configuration overrides
 Now that the concept of directives has been explained, Let us see some more examples for directives usage:

 ### Changing Theme via directive
+
 The following code snippet changes theme to forest:

-
-```%%{init: { "theme": "forest" } }%%```
+`%%{init: { "theme": "forest" } }%%`

 Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`.
 Default Value is `default`.

 Example:
+
 ```mermaid-example
 %%{init: { "theme": "forest" } }%%
 graph TD
@ -118,12 +132,13 @@ A --> C[End]
 ```

 ### Changing fontFamily via directive
+
 The following code snippet changes theme to forest:

-
-```%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%```
+`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`

 Example:
+
 ```mermaid-example
 %%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
 graph TD
@ -137,21 +152,23 @@ A --> C[End]
 ```

 ### Changing logLevel via directive
+
 The following code snippet changes theme to forest:

-
-```%%{init: { "logLevel": 2 } }%%```
+`%%{init: { "logLevel": 2 } }%%`

 Possible logLevel values are:
- `1` for *debug*,
- `2` for *info*
- `3` for *warn*
- `4` for *error*
- `5` for *only fatal errors*
+
+- `1` for _debug_,
+- `2` for _info_
+- `3` for _warn_
+- `4` for _error_
+- `5` for _only fatal errors_

 Default Value is `5`.

 Example:
+
 ```mermaid-example
 %%{init: { "logLevel": 2 } }%%
 graph TD
@ -164,19 +181,20 @@ A --> C[End]
 ```

 ### Changing flowchart config via directive
+
 Some common flowchart configurations are:
- *htmlLabels*: true/false
- *curve*: linear/curve
- *diagramPadding*: number
- *useMaxWidth*: number
+
+- _htmlLabels_: true/false
+- _curve_: linear/curve
+- _diagramPadding_: number
+- _useMaxWidth_: number

 For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
-*Soon we plan to publish a complete list all diagram specific configurations updated in the docs*
+_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_

 The following code snippet changes flowchart config:

-
-```%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%```
+`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`

 Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear.

@ -190,19 +208,22 @@ A --> C[End]
  C
  end
 ```
-### Changing Sequence diagram config via directive
-Some common sequence configurations are:
- *width*: number
- *height*: number
- *messageAlign*: left, center, right
- *mirrorActors*: boolean
- *useMaxWidth*: boolean
- *rightAngles*: boolean
- *showSequenceNumbers*: boolean
- *wrap*: boolean

-For complete list of sequence diagram configurations, see *defaultConfig.js* in the source code.
-*Soon we plan to publish a complete list all diagram specific configurations updated in the docs*
+### Changing Sequence diagram config via directive
+
+Some common sequence configurations are:
+
+- _width_: number
+- _height_: number
+- _messageAlign_: left, center, right
+- _mirrorActors_: boolean
+- _useMaxWidth_: boolean
+- _rightAngles_: boolean
+- _showSequenceNumbers_: boolean
+- _wrap_: boolean
+
+For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code.
+_Soon we plan to publish a complete list all diagram specific configurations updated in the docs_

 So, `wrap` by default has a value of `false` for sequence diagrams.

@ -221,8 +242,7 @@ Now let us enable wrap for sequence diagrams.

 The following code snippet changes sequence diagram config for `wrap` to `true`:

-
-```%%{init: { "sequence": { "wrap": true} } }%%```
+`%%{init: { "sequence": { "wrap": true} } }%%`

 Using in the diagram above, the wrap will be enabled.

@ -234,7 +254,3 @@ Bob->Alice: Fine, How did you mother like the book I suggested? And did you catc
 Alice->Bob: Good.
 Bob->Alice: Cool
 ```
-
-
-
-
--- a/src/docs/examples.md
+++ b/src/docs/examples.md
@ -13,12 +13,14 @@ pie title NETFLIX
         "Time spent looking for movie" : 90
         "Time spent watching it" : 10
 ```
+
 ```mermaid-example
 pie title What Voldemort doesn't have?
         "FRIENDS" : 2
         "FAMILY" : 3
         "NOSE" : 45
 ```
+
 ## Basic sequence diagram

 ```mermaid-example
@ -43,7 +45,6 @@ graph LR
    C --> D
 ```

-
 ## Larger flowchart with some styling

 ```mermaid-example
@ -70,7 +71,6 @@ graph TB
     class di orange
 ```

-
 ## SequenceDiagram: Loops, alt and opt

 ```mermaid-example
@ -89,7 +89,6 @@ sequenceDiagram
    end
 ```

-
 ## SequenceDiagram: Message to self in loop

 ```mermaid-example
@ -141,6 +140,7 @@ sequenceDiagram
 ```

 ## A commit flow diagram.
+
 ```mermaid
 gitGraph:
    commit "Ashish"
--- a/src/docs/flowchart.md
+++ b/src/docs/flowchart.md
@ -482,9 +482,9 @@ Beginner's tip—a full example using interactive links in a html context:
 ```html
 <body>
  <div class="mermaid">
-        flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com"
-        "This is a link" click C call callback() "Tooltip" click D href "https://www.github.com"
-        "This is a link"
+    flowchart LR A-->B B-->C C-->D click A callback "Tooltip" click B "https://www.github.com" "This
+    is a link" click C call callback() "Tooltip" click D href "https://www.github.com" "This is a
+    link"
  </div>

  <script>
--- a/src/docs/gantt.md
+++ b/src/docs/gantt.md
@ -3,13 +3,12 @@
 > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.

 ## 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.

+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 accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.
 As shown here ![](./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.
 As shown here ![](./img/Gantt-long-weekend-look.png)

@ -75,18 +74,17 @@ It is possible to set multiple dependencies separated by space:

 ### Title

-The `title` is an *optional* string to be displayed at the top of the Gantt chart to describe the chart as a whole.
-
+The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.

 ### Section statements

 You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.

-To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is *required*.
+To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_.

 ### Milestones

-You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2.
+You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2.

 ```mermaid-example
 gantt
@ -98,14 +96,13 @@ taska3 : 5min
 Final milestone : milestone, m2, 18:14, 2min
 ```

-
 ## Setting dates

 `dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.

 ### Input date format

-The default input date format is `YYYY-MM-DD`. You can define your custom ``dateFormat``.
+The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.

 ```
 dateFormat YYYY-MM-DD
@ -140,7 +137,7 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/

 ### Output date format on the axis

-The default output date format is YYYY-MM-DD. You can define your custom ``axisFormat``, like `2020-Q1` for the first quarter of the year 2020.
+The default output date format is YYYY-MM-DD. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.

 ```
 axisFormat  %Y-%m-%d
@ -201,19 +198,17 @@ Styling of the a gantt diagram is done by defining a number of css classes. Duri

 ### Classes used

-Class | Description
---                   | ---
-grid.tick             | Styling for the Grid Lines 
-grid.path             | Styling for the Grid's borders
-.taskText             | Task Text Styling
-.taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. 
-.taskTextOutsideLeft  | Styling for Task Text that exceeds the activity bar, towards the left.
-todayMarker           | Toggle and Styling for the "Today Marker"
-
+| Class                 | Description                                                            |
+| --------------------- | ---------------------------------------------------------------------- |
+| grid.tick             | Styling for the Grid Lines                                             |
+| grid.path             | Styling for the Grid's borders                                         |
+| .taskText             | Task Text Styling                                                      |
+| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. |
+| .taskTextOutsideLeft  | Styling for Task Text that exceeds the activity bar, towards the left. |
+| todayMarker           | Toggle and Styling for the "Today Marker"                              |

 ### Sample stylesheet

-
 ```css
 .grid .tick {
  stroke: lightgrey;
@ -226,7 +221,7 @@ todayMarker           | Toggle and Styling for the "Today Marker"

 #tag {
  color: white;
-    background: #FA283D;
+  background: #fa283d;
  width: 150px;
  position: absolute;
  display: none;
@ -244,7 +239,7 @@ todayMarker           | Toggle and Styling for the "Today Marker"
  position: absolute;
  width: 0;
  border-width: 10px;
-    border-bottom-color: #FA283D;
+  border-bottom-color: #fa283d;
  top: -20px;
 }
 .taskText {
@ -290,16 +285,16 @@ mermaid.ganttConfig = {
  barHeight: 20,
  barGap: 4,
  topPadding: 75,
-    sidePadding:75
-}
+  sidePadding: 75,
+};
 ```

 ### Possible configuration params:

-Param | Description | 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 unwanted clipping which is why this config param exists.|1
+| Param           | Description                                                                                                                                | 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 unwanted clipping which is why this config param exists. | 1             |

 ## Interaction

@ -310,33 +305,27 @@ click taskId call callback(arguments)
 click taskId href URL
 ```

-* taskId is the id of the task
-* 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.
+- taskId is the id of the task
+- 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.

 Beginner's tip—a full example using interactive links in an html context:
+
 ```html
 <body>
  <div class="mermaid">
-    gantt
-      dateFormat  YYYY-MM-DD
-
-      section Clickable
-      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
-      Print arguments         :cl2, after cl1, 3d
-      Print task              :cl3, after cl2, 3d
-
-      click cl1 href "https://mermaidjs.github.io/"
-      click cl2 call printArguments("test1", "test2", test3)
-      click cl3 call printTask()
+    gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d Print
+    arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href
+    "https://mermaidjs.github.io/" click cl2 call printArguments("test1", "test2", test3) click cl3
+    call printTask()
  </div>

  <script>
    var printArguments = function (arg1, arg2, arg3) {
      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
-    }
+    };
    var printTask = function (taskId) {
      alert('taskId: ' + taskId);
-    }
+    };
    var config = {
      startOnLoad: true,
      securityLevel: 'loose',
--- a/src/docs/integrations.md
+++ b/src/docs/integrations.md
@ -4,8 +4,8 @@ The following list is a compilation of different integrations and plugins that a

 They also serve as proof of concept, for the variety of things that can be built with mermaid.

-
 ## Productivity
+
 - [GitHub](https://github.com) (**Native support**)
  - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
@ -148,8 +148,8 @@ They also serve as proof of concept, for the variety of things that can be built
 ## Browser Extensions

 | Name                     | Chrome Web Store                                                                                             | Firefox Add-ons                                                                | Opera                                                                          | Edge                                                                                                                         | Source/Repository                                                                                    |
-| -- | -- | -- | -- | -- | -- |
-| GitHub + Mermaid | - | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - |  [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)
+| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| GitHub + Mermaid         | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/)               | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)                                       |
 | Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | -                                                                              | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -                                                                                                    |
 | Diagram Tab              | -                                                                                                            | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
 | Markdown Diagrams        | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/)        | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
@ -161,8 +161,8 @@ They also serve as proof of concept, for the variety of things that can be built
 | Monkeys                  | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 | Mermaid Previewer        | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |

-
 ## Other
+
 - [Jekyll](https://jekyllrb.com/)
  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
--- a/src/docs/landing/index.html
+++ b/src/docs/landing/index.html
@ -49,16 +49,7 @@
    <div class="pt-24">
      <div
        style=""
-        class="
-          container
-          lg:px-24
-          max-w-5xl
-          px-4
-          mx-auto
-          flex flex-wrap flex-col
-          md:flex-row
-          items-center
-        "
+        class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center"
      >
        <!--Left Col-->
        <div class="w-full md:w-1/2">
@ -77,24 +68,7 @@
              >
                <button
                  style="background: #ffa41c; border: 1px solid #ff8f00"
-                  class="
-                    mx-auto
-                    lg:mx-0
-                    hover:underline
-                    text-black
-                    font-bold
-                    rounded-full
-                    my-6
-                    py-4
-                    px-8
-                    shadow-lg
-                    focus:outline-none focus:shadow-outline
-                    transform
-                    transition
-                    hover:scale-105
-                    duration-300
-                    ease-in-out
-                  "
+                  class="mx-auto lg:mx-0 hover:underline text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
                >
                  Purchase on Amazon
                </button>
@ -352,25 +326,7 @@
      >
        <button
          style="background: #ffa41c; border: 1px solid #ff8f00"
-          class="
-            mx-auto
-            lg:mx-0
-            hover:underline
-            bg-white
-            text-gray-800
-            font-bold
-            rounded-full
-            my-6
-            py-4
-            px-8
-            shadow-lg
-            focus:outline-none focus:shadow-outline
-            transform
-            transition
-            hover:scale-105
-            duration-300
-            ease-in-out
-          "
+          class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
        >
          Purchase Now on Amazon
        </button>
--- a/src/docs/n00b-advanced.md
+++ b/src/docs/n00b-advanced.md
@ -1,6 +1,7 @@
 # Advanced n00b mermaid (Coming soon..)

 ## splitting mermaid code from html
+
 A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:

 ```
@ -9,11 +10,13 @@ stuff stuff
  </body>
 </html>
 ```
+
 The actual mermaid file could for example look like this:

 ```
 mermaid content...
 ```
+
 ---

 ## mermaid configuration options
--- a/src/docs/n00b-gettingStarted.md
+++ b/src/docs/n00b-gettingStarted.md
@ -95,10 +95,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
 <body>
  Here is a mermaid diagram:
  <div class="mermaid">
-        graph TD 
-        A[Client] --> B[Load Balancer] 
-        B --> C[Server01] 
-        B --> D[Server02]
+    graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
  </div>
 </body>
 ```
@ -140,19 +137,13 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac

    Here is one mermaid diagram:
    <div class="mermaid">
-            graph TD 
-            A[Client] --> B[Load Balancer] 
-            B --> C[Server1] 
-            B --> D[Server2]
+      graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
    </div>

    And here is another:
    <div class="mermaid">
-            graph TD 
-            A[Client] -->|tcp_123| B
-            B(Load Balancer) 
-            B -->|tcp_456| C[Server1] 
-            B -->|tcp_456| D[Server2]
+      graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456|
+      D[Server2]
    </div>
  </body>
 </html>
@ -167,17 +158,9 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
    <meta charset="utf-8" />
  </head>
  <body>
+    <div class="mermaid">graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);</div>
    <div class="mermaid">
-            graph LR 
-            A --- B 
-            B-->C[fa:fa-ban forbidden] 
-            B-->D(fa:fa-spinner);
-        </div>
-        <div class="mermaid">
-            graph TD 
-            A[Client] --> B[Load Balancer] 
-            B --> C[Server1] 
-            B --> D[Server2]
+      graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2]
    </div>
    <script src="The\Path\In\Your\Package\mermaid.js"></script>
    <script>
--- a/src/docs/n00b-overview.md
+++ b/src/docs/n00b-overview.md
@ -26,10 +26,7 @@ It is a relatively straightforward solution to a significant hurdle with the sof

 ```html
 <div class="mermaid">
-    graph TD
-    A[Client] --> B[Load Balancer]
-    B --> C[Server01]
-    B --> D[Server02]
+  graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]
 </div>
 ```

@ -37,7 +34,6 @@ It is a relatively straightforward solution to a significant hurdle with the sof

 > This is the core function of the Mermaid API. It reads all the `Mermaid Definitions` inside `div` tags and returns an SVG file, based on the definition.

-
 **Nodes**

 > These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference)
@ -57,13 +53,13 @@ Mermaid solves this by reducing the time and effort required to create diagrams

 Because, the text base for the diagrams allows it to be updated easily. Also, it can be made part of production scripts (and other pieces of code). So less time is spent on documenting, as a separate task.

-
 ## Catching up with Development

 Being based on markdown, Mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds.
 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.live/).

 Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs.
--- a/src/docs/n00b-syntaxReference.md
+++ b/src/docs/n00b-syntaxReference.md
@ -1,4 +1,5 @@
 # Diagram Syntax
+
 Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.

 Syntax, together with Deployment and Configuration constitute the whole of Mermaid.
@ -6,6 +7,7 @@ Syntax, together with Deployment and Configuration constitute the whole of Merma
 Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor), it is also a great practice area.

 ## Syntax Structure
+
 One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate.

 **Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it.
@ -22,27 +24,22 @@ erDiagram
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 ```

-
 The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.

- 
-
 ## Diagram Breaking

 One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.

-
 | Diagram Breakers                                                                                               | Reason                                                             | Solution                                          |
-| ---               | ---    |---|
+| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------- |
 | **Comments**                                                                                                   |                                                                    |                                                   |
 | [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968)                                              | Similar to [Directives](./directives.md) confuses the renderer.    | In comments using `%%`, avoid using "{}".         |
 | **Flow-Charts**                                                                                                |                                                                    |                                                   |
 | 'end'                                                                                                          | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
 | [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes                           | wrap them in quotation marks to prevent breaking  |

-
-
 ### Mermaid Live Editor
+
 Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor).

 # Configuration
@ -58,20 +55,13 @@ The following are the most commonly used methods, and they are all tied to Merma
 Here you can edit certain values to change the behavior and appearance of the diagram.

 ### [The initialize() call](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted?id=_3-calling-the-javascript-api),
+
 Used when Mermaid is called via an API, or through a `<script>` tag.

-
 ### [Directives](./directives.md),
+
 Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.

 ### [Theme Manipulation](./theming.md):
+
 An application of using Directives to change [Themes](./theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
-
-
-
-
-
-
-
-
-
--- a/src/docs/newDiagram.md
+++ b/src/docs/newDiagram.md
@ -2,15 +2,14 @@

 ### Step 1: Grammar & Parsing

-
 #### Grammar

 This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.

 For instance:

-* the flowchart starts with the keyword graph.
-* the sequence diagram starts with the keyword sequenceDiagram
+- the flowchart starts with the keyword graph.
+- the sequence diagram starts with the keyword sequenceDiagram

 #### Store data found during parsing

@ -37,73 +36,66 @@ The `yy` object has the following function:

 ```javascript
 exports.parseError = function (err, hash) {
-   mermaid.parseError(err, hash)
+  mermaid.parseError(err, hash);
 };
 ```

 when parsing the `yy` object is initialized as per below:

 ```javascript
-var parser
-parser = exampleParser.parser
-parser.yy = db
+var parser;
+parser = exampleParser.parser;
+parser.yy = db;
 ```

-
 ### Step 2: Rendering

 Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequenceRenderer.js rather then the flowchart renderer as this is a more generic example.

 Place the renderer in the diagram folder.

-
 ### Step 3: Detection of the new diagram type

 The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.

-
 ### Step 4: The final piece - triggering the rendering

 At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step #2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.

-
 ## Usage of the parser as a separate module

-
 ### Setup

 ```javascript
-var graph = require('./graphDb')
-var flow = require('./parser/flow')
-flow.parser.yy = graph
+var graph = require('./graphDb');
+var flow = require('./parser/flow');
+flow.parser.yy = graph;
 ```

-
 ### Parsing

 ```javascript
-flow.parser.parse(text)
+flow.parser.parse(text);
 ```

-
 ### Data extraction

 ```javascript
-graph.getDirection()
-graph.getVertices()
-graph.getEdges()
+graph.getDirection();
+graph.getVertices();
+graph.getEdges();
 ```

 The parser is also exposed in the mermaid api by calling:

 ```javascript
-var parser = mermaid.getParser()
+var parser = mermaid.getParser();
 ```

 Note that the parse needs a graph object to store the data as per:

 ```javascript
-flow.parser.yy = graph
+flow.parser.yy = graph;
 ```

 Look at `graphDb.js` for more details on that object.
@ -116,10 +108,10 @@ If you are using a dagre based layout, please use flowchart-v2 as a template and

 There are a few features that are common between the different types of diagrams. We try to standardize the diagrams that work as similar as possible for the end user. The commonalities are:

-* Directives, a way of modifying the diagram configuration from within the diagram code.
-* Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader.
-* Themes, there is a common way to modify the styling of diagrams in Mermaid.
-* Comments should follow mermaid standards
+- Directives, a way of modifying the diagram configuration from within the diagram code.
+- Accessibility, a way for an author to provide additional information like titles and descriptions to people accessing a text with diagrams using a screen reader.
+- Themes, there is a common way to modify the styling of diagrams in Mermaid.
+- Comments should follow mermaid standards

 Here some pointers on how to handle these different areas.

@ -127,6 +119,7 @@ Here some pointers on how to handle these different areas.

 Here is example handling from flowcharts:
 Jison:
+
 ```jison

 /* lexical grammar */
@ -173,6 +166,7 @@ It is probably a good idea to keep the handling similar to this in your new diag
 ## Accessibility

 The syntax for adding title and description looks like this:
+
 ```
 accTitle: The title
 accDescr: The description
@ -222,6 +216,7 @@ import {
 For rendering the accessibility tags you have again an existing function you can use.

 **In the renderer:**
+
 ```js
 import addSVGAccessibilityFields from '../../accessibility';

@ -239,7 +234,7 @@ When adding themes to a diagram it comes down to a few important locations in th

 The entry point for the styling engine is in **src/styles.js**. The getStyles function will be called by Mermaid when the styles are being applied to the diagram.

-This function will in turn call a function *your diagram should provide* returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example:
+This function will in turn call a function _your diagram should provide_ returning the css for the new diagram. The diagram specific, also which is commonly also called getStyles and located in the folder for your diagram under src/diagrams and should be named styles.js. The getStyles function will be called with the theme options as an argument like in the following example:

 ```js
 const getStyles = (options) =>
@ -266,4 +261,3 @@ const themes = {
 ```

 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.
-
--- a/src/docs/pie.md
+++ b/src/docs/pie.md
@ -1,7 +1,7 @@
 # Pie chart diagrams

 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
-Wikipedia
+> -Wikipedia

 Mermaid can render Pie Chart diagrams.

@ -12,12 +12,13 @@ pie title Pets adopted by volunteers
    "Rats" : 15
 ```

-
 ## Syntax
+
 Drawing a pie chart is really simple in mermaid.
+
 - Start with `pie` keyword to begin the diagram
-    - `showData` to render the actual data values after the legend text. This is ***OPTIONAL*** 
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
+  - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
+- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
 - Followed by dataSet
  - `label` for a section in the pie diagram within `" "` quotes.
  - Followed by `:` colon as separator
@ -32,6 +33,7 @@ Drawing a pie chart is really simple in mermaid.
 .

 ## Example
+
 ```mermaid-example
 pie showData
    title Key elements in Product X
--- a/src/docs/requirementDiagram.md
+++ b/src/docs/requirementDiagram.md
@ -25,11 +25,12 @@ Rendering requirements is straightforward.

 There are three types of components to a requirement diagram: requirement, element, and relationship.

-The grammar for defining each is defined below. Words denoted in angle brackets, such as ```<word>```, are enumerated keywords that have options elaborated in a table. ```user_defined_...``` is use in any place where user input is expected.
+The grammar for defining each is defined below. Words denoted in angle brackets, such as `<word>`, are enumerated keywords that have options elaborated in a table. `user_defined_...` is use in any place where user input is expected.

-An important note on user text: all input can be surrounded in quotes or not. For example, both ```Id: "here is an example"``` and ```Id: here is an example``` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
+An important note on user text: all input can be surrounded in quotes or not. For example, both `Id: "here is an example"` and `Id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.

 ### Requirement
+
 A requirement definition contains a requirement type, name, id, text, risk, and verification method. The syntax follows:

 ```
@ -44,12 +45,13 @@ A requirement definition contains a requirement type, name, id, text, risk, and
 Type, risk, and method are enumerations defined in SysML.

 | Keyword            | Options                                                                                                                 |
-|---|---|
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
 | Type               | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
 | Risk               | Low, Medium, High                                                                                                       |
 | VerificationMethod | Analysis, Inspection, Test, Demonstration                                                                               |

 ### Element
+
 An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.

 ```
@ -59,8 +61,8 @@ element user_defined_name {
 }
 ```

-
 ### Relationship
+
 Relationships are comprised of a source node, destination node, and relationship type.

 Each follows the definition format of
@ -82,6 +84,7 @@ A relationship type can be one of contains, copies, derives, satisfies, verifies
 Each relationship is labeled in the diagram.

 ## Larger Example
+
 This example uses all features of the diagram.

 ```mermaid-example
--- a/src/docs/security.md
+++ b/src/docs/security.md
@ -1,7 +1,9 @@
 # Security
+
 The Mermaid team takes the security of Mermaid and the applications that use Mermaid seriously. This page describes how to report any vulnerabilities you may find, and lists best practices to minimize the risk of introducing a vulnerability.

 ## Reporting vulnerabilities
+
 To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.

 We aim to reply within three working days, probably much sooner.
@ -16,7 +18,6 @@ Keep current with the latest Mermaid releases. We regularly update Mermaid, and

 Keep your application’s dependencies up to date. Make sure you upgrade your package dependencies to keep the dependencies up to date. Avoid pinning to specific versions for your dependencies and, if you do, make sure you check periodically to see if your dependencies have had security updates, and update the pin accordingly.

-
 ## Configuring DomPurify

 By default Mermaid uses a baseline [DOMPurify](https://github.com/cure53/DOMPurify) config. It is possible to override the options passed to DOMPurify by adding a `dompurifyConfig` key to the Mermaid options. This could potentially break the output of Mermaid so use this with caution.
--- a/src/docs/stateDiagram.md
+++ b/src/docs/stateDiagram.md
@ -140,7 +140,7 @@ stateDiagram-v2
    }
 ```

-*You can not define transitions between internal states belonging to different composite states*
+_You can not define transitions between internal states belonging to different composite states_

 ## Choice

@ -177,7 +177,7 @@ It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&

 Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.

-Here you can choose to put the note to the *right of* or to the *left of* a node.
+Here you can choose to put the note to the _right of_ or to the _left of_ a node.

 ```mermaid-example
    stateDiagram-v2
@ -230,7 +230,6 @@ stateDiagram
    B --> D
 ```

-
 ## Comments

 Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
--- a/src/docs/theme.css
+++ b/src/docs/theme.css
--- a/src/docs/theme_themed.css
+++ b/src/docs/theme_themed.css
--- a/src/docs/upgrading.md
+++ b/src/docs/upgrading.md
@ -2,27 +2,24 @@

 Some of the interfaces has been upgraded.

-
 ## From version 0.4.0 to 0.5.0

-
 ### Initialization

 `mermaid_config` is no longer used. Instead a call to mermaid initialize is done as in the example below:

-
 #### version 0.4.0

 ```javascript
 mermaid_config = {
-    startOnLoad: true
-}
+  startOnLoad: true,
+};
 ```

 #### version 0.5.0

 ```javascript
 mermaid.initialize({
-    startOnLoad: true
-})
+  startOnLoad: true,
+});
 ```
--- a/test.js
+++ b/test.js
@ -1,3 +1,6 @@
+/**
+ *
+ */
 function apa() {
  // comment's
  const a = 1;