Feature/4060 gantt working hours

docs/community/new-diagram-jison.md

@@ -175,15 +175,13 @@ statement
 
 The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
 
-```
-import {
-  setAccTitle,
-  getAccTitle,
-  getAccDescription,
-  setAccDescription,
-  clear as commonClear,
-} from '../../commonDb';
-```
+    import {
+      setAccTitle,
+      getAccTitle,
+      getAccDescription,
+      setAccDescription,
+      clear as commonClear,
+    } from '../../commonDb';
 
 The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
 

docs/community/new-diagram.md

@@ -64,15 +64,13 @@ The syntax for accessible titles and descriptions is described in [the Accessibi
 
 The functions for setting title and description are provided by a common module. This is the import in flowDb.js:
 
-```
-import {
-  setAccTitle,
-  getAccTitle,
-  getAccDescription,
-  setAccDescription,
-  clear as commonClear,
-} from '../../commonDb';
-```
+    import {
+      setAccTitle,
+      getAccTitle,
+      getAccDescription,
+      setAccDescription,
+      clear as commonClear,
+    } from '../../commonDb';
 
 The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
 

docs/config/directives.md

@@ -21,17 +21,17 @@ While directives allow you to change most of the default configuration settings,
 
 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
-   - securityLevel
-   - startOnLoad
-   - secure
+    - theme
+    - fontFamily
+    - logLevel
+    - securityLevel
+    - 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.
-   For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
+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 alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
 
 **NOTE:** Not all configuration options are listed here. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
 
@@ -47,34 +47,28 @@ Here the structure of a directive text is like a nested key-value pair map or a
 
 The following code snippet shows the structure of a directive:
 
-```
-%%{
-  init: {
-    "theme": "dark",
-    "fontFamily": "monospace",
-    "logLevel": "info",
-    "flowchart": {
-      "htmlLabels": true,
-      "curve": "linear"
-    },
-    "sequence": {
-      "mirrorActors": true
-    }
-  }
-}%%
-```
+    %%{
+      init: {
+        "theme": "dark",
+        "fontFamily": "monospace",
+        "logLevel": "info",
+        "flowchart": {
+          "htmlLabels": true,
+          "curve": "linear"
+        },
+        "sequence": {
+          "mirrorActors": true
+        }
+      }
+    }%%
 
 You can also define the directives in a single line, like this:
 
-```
-%%{init: { **insert configuration options here** } }%%
-```
+    %%{init: { **insert configuration options here** } }%%
 
 For example, the following code snippet:
 
-```
-%%{init: { "sequence": { "mirrorActors":false }}}%%
-```
+    %%{init: { "sequence": { "mirrorActors":false }}}%%
 
 **Notes:**
 The JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored.

docs/config/faq.md

@@ -6,12 +6,12 @@
 
 # Frequently Asked Questions
 
-1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
-2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
-3. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
-4. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
-5. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
-6. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
-7. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
-8. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
-9. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)
+1.  [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
+2.  [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
+3.  [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
+4.  [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
+5.  [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
+6.  [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
+7.  [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
+8.  [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
+9.  [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)

docs/config/theming.md

@@ -12,15 +12,15 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di
 
 ## Available Themes
 
-1. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams.
+1.  [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams.
 
-2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed.
+2.  [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed.
 
-3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode.
+3.  [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode.
 
-4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.
+4.  [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.
 
-5. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations.
+5.  [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations.
 
 ## Site-wide Theme
 

docs/config/usage.md

@@ -286,11 +286,11 @@ const drawDiagram = async function () {
 };
 ```
 
-1. The graph is generated using the render call.
-2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
-3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
-4. Insert the SVG code into the DOM for presentation.
-5. Call the binding function that binds the events.
+1.  The graph is generated using the render call.
+2.  After generation the render function calls the provided callback function, in this case it's called insertSvg.
+3.  The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
+4.  Insert the SVG code into the DOM for presentation.
+5.  Call the binding function that binds the events.
 
 ## Example of a marked renderer
 

docs/intro/getting-started.md

@@ -8,9 +8,9 @@
 
 ## Mermaid is composed of three parts
 
-1. Deployment
-2. Syntax
-3. Configuration
+1.  Deployment
+2.  Syntax
+3.  Configuration
 
 This section talks about the different ways to **deploy** Mermaid.
 
@@ -21,11 +21,11 @@ If you are a beginner:
 
 ## Ways to use Mermaid
 
-1. [Using the Mermaid Live Editor](getting-started.md#_1-using-the-mermaid-live-editor)
-2. [Using the Mermaid Chart Editor](getting-started.md#_2-using-the-mermaid-chart-editor)
-3. [Using Mermaid Plugins and Integrations](getting-started.md#_3-using-mermaid-plugins)
-4. [Calling the Mermaid JavaScript API](getting-started.md#_4-calling-the-mermaid-javascript-api)
-5. [Adding Mermaid as a dependency](getting-started.md#_5-adding-mermaid-as-a-dependency)
+1.  [Using the Mermaid Live Editor](getting-started.md#_1-using-the-mermaid-live-editor)
+2.  [Using the Mermaid Chart Editor](getting-started.md#_2-using-the-mermaid-chart-editor)
+3.  [Using Mermaid Plugins and Integrations](getting-started.md#_3-using-mermaid-plugins)
+4.  [Calling the Mermaid JavaScript API](getting-started.md#_4-calling-the-mermaid-javascript-api)
+5.  [Adding Mermaid as a dependency](getting-started.md#_5-adding-mermaid-as-a-dependency)
 
 To learn more, visit the [Usage](../config/usage.md) page.
 
@@ -301,22 +301,22 @@ In this example, `mermaid.js` is referenced in `src` as a separate JavaScript fi
 
 Below are the steps for adding Mermaid as a dependency:
 
-1. Install `node v16`
+1.  Install `node v16`
 
 > **Note**
 > To learn more about downloading and installing `Node.js` and `npm`, visit the [npm Docs website](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
 
-1. Install `yarn` using `npm` with this command:
+1.  Install `yarn` using `npm` with this command:
 
-   `npm install -g yarn`
+    `npm install -g yarn`
 
-2. After yarn installs, enter this command:
+2.  After yarn installs, enter this command:
 
-   `yarn add mermaid`
+    `yarn add mermaid`
 
-3. To add Mermaid as a dev dependency, enter this command:
+3.  To add Mermaid as a dev dependency, enter this command:
 
-   `yarn add --dev mermaid`
+    `yarn add --dev mermaid`
 
 ## Closing note
 

docs/intro/index.md

@@ -311,9 +311,7 @@ xychart-beta
 
 ### CDN
 
-```
-https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/
-```
+    https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/
 
 To select a version:
 
@@ -325,11 +323,11 @@ Latest Version: <https://cdn.jsdelivr.net/npm/mermaid@11>
 
 To Deploy Mermaid:
 
-1. You will need to install node v16, which would have npm
-2. Install mermaid
-   - NPM: `npm i mermaid`
-   - Yarn: `yarn add mermaid`
-   - Pnpm: `pnpm add mermaid`
+1.  You will need to install node v16, which would have npm
+2.  Install mermaid
+    - NPM: `npm i mermaid`
+    - Yarn: `yarn add mermaid`
+    - Pnpm: `pnpm add mermaid`
 
 ### [Mermaid API](../config/setup/README.md):
 

docs/syntax/block.md

@@ -636,10 +636,8 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
 
 A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
 
-```
-block-beta
-  A - B
-```
+    block-beta
+      A - B
 
 **Correction**:
 Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:

docs/syntax/classDiagram.md

@@ -8,7 +8,7 @@
 
 > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
 >
-> -Wikipedia
+> \-Wikipedia
 
 The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
 
@@ -296,9 +296,7 @@ To describe the visibility (or encapsulation) of an attribute or method/function
 
 A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
 
-```
-[classA][Arrow][ClassB]
-```
+    [classA][Arrow][ClassB]
 
 There are eight different types of relations defined for classes under UML which are currently supported:
 
@@ -371,9 +369,7 @@ classO .. classP : Link(Dashed)
 
 It is possible to add label text to a relation:
 
-```
-[classA][Arrow][ClassB]:LabelText
-```
+    [classA][Arrow][ClassB]:LabelText
 
 ```mermaid-example
 classDiagram
@@ -405,9 +401,7 @@ classDiagram
 
 Here is the syntax:
 
-```
-[Relation Type][Link][Relation Type]
-```
+    [Relation Type][Link][Relation Type]
 
 Where `Relation Type` can be one of:
 
@@ -471,9 +465,7 @@ The different cardinality options are :
 
 Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
 
-```
-[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
-```
+    [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
 
 ```mermaid-example
 classDiagram
@@ -626,11 +618,9 @@ It is possible to bind a click event to a node. The click can lead to either a j
 
 You would define these actions on a separate line after all classes have been declared.
 
-```
-action className "reference" "tooltip"
-click className call callback() "tooltip"
-click className href "url" "tooltip"
-```
+    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
@@ -813,15 +803,11 @@ should have a different look. This is done by predefining classes in css styles
 
 Then attaching that class to a specific node:
 
-```
-    cssClass "nodeId1" styleClass;
-```
+        cssClass "nodeId1" styleClass;
 
 It is also possible to attach a class to a list of nodes in one statement:
 
-```
-    cssClass "nodeId1,nodeId2" styleClass;
-```
+        cssClass "nodeId1,nodeId2" styleClass;
 
 A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
 

docs/syntax/entityRelationshipDiagram.md

@@ -86,9 +86,7 @@ When including attributes on ER diagrams, you must decide whether to include for
 
 Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
 
-```
-    <first-entity> [<relationship> <second-entity> : <relationship-label>]
-```
+        <first-entity> [<relationship> <second-entity> : <relationship-label>]
 
 Where:
 
@@ -99,9 +97,7 @@ Where:
 
 For example:
 
-```
-    PROPERTY ||--|{ ROOM : contains
-```
+        PROPERTY ||--|{ ROOM : contains
 
 This statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).