Merge branch 'develop'

Conflicts: dist/mermaid.core.js dist/mermaid.core.js.map dist/mermaid.esm.min.mjs dist/mermaid.js dist/mermaid.js.map dist/mermaid.min.js dist/mermaid.min.js.map
2021-11-04 21:23:29 +01:00 · 2021-11-04 21:23:29 +01:00 · 69ecb02375
parent bf378b76f4 caeeca7722
commit 69ecb02375
38 changed files with 3528 additions and 2399 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,12 +1,17 @@
 version: 2
 updates:
 - package-ecosystem: npm
+  open-pull-requests-limit: 10
  directory: /
  target-branch: develop
  schedule:
    interval: weekly
+    day: monday
+    time: "07:00"
 - package-ecosystem: github-actions
  directory: /
  target-branch: develop
  schedule:
    interval: weekly
+    day: monday
+    time: "07:00"
--- a/.github/workflows/issue-triage.yml
+++ b/.github/workflows/issue-triage.yml
@ -8,7 +8,7 @@ jobs:
  triage:
    runs-on: ubuntu-latest
    steps:
-    - uses: andymckay/labeler@1.0.3
+    - uses: andymckay/labeler@1.0.4
      with:
        repo-token: "${{ secrets.GITHUB_TOKEN }}"
        add-labels: "Status: Triage"
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -11,7 +11,7 @@ Here are a few things to know to get you started on the right path.
 We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have *knsv, Knut Sveidqvist* as a main reviewer of changes and merging pull requests. More precisely like this:

 * Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller low-risk changes like dependecies, documentation etc can be merged by active collaborators
+* Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
 * documentation (updates to the docs folder is also allowed via direct commits)

 To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -23,7 +23,7 @@ Mermaid 通过减少创建可修改的图表所需要的时间、精力和工具
 你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程。
 U也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。

-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md) and [用法](./docs/usage.md).
+如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md) and [用法](./docs/usage.md).

 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)

@ -31,7 +31,7 @@ U也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清

 ## 示例

-__下面是一些使用 Mermaid 和类 Markdown 语法创建的图表示例。点击[语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情__
+__下面是一些使用 Mermaid 和类 Markdown 语法创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情__
 <table>
 <!-- <Flowchart> -->
 <tr><td colspan=2 align="center">
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@ -611,6 +611,16 @@ flowchart RL
    );
  });

+  it('76: handle unicode encoded character with HTML labels true', () => {
+    imgSnapshotTest(
+      `flowchart TB
+      a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
+      --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}    
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+
    it('2050: handling of different rendering direction in subgraphs', () => {
    imgSnapshotTest(
      `
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@ -74,7 +74,7 @@ stateDiagram-v2
  A --> D: asd123
      </div>
      </div>
-      <div class="mermaid" style="width: 50%; height: 40%;">
+      <div class="mermaid2" style="width: 50%; height: 40%;">
 %% this does not produce the desired result
 flowchart TB
  subgraph container_Beta
@ -88,24 +88,13 @@ flowchart TB

      </div>
      <div class="mermaid" style="width: 50%; height: 40%;">
-        %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-flowchart TB
-    b-->B
-    a-->c
-    subgraph O
-      A
-    end
-    subgraph B
-      c
-    end
-    subgraph A
-        a
-        b
-        B
-    end
+        flowchart TB
+	a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
+	--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
+

      </div>
-      <div class="mermaid" style="width: 50%; height: 50%;">
+      <div class="mermaid2" style="width: 50%; height: 50%;">
 flowchart TB
  internet
  nat
@ -130,7 +119,7 @@ flowchart TB
  routeur --> subnet1 & subnet2
  subnet1 & subnet2 --> nat --> internet
      </div>
-      <div class="mermaid" style="width: 50%; height: 50%;">
+      <div class="mermaid2" style="width: 50%; height: 50%;">
 flowchart TD

 subgraph one[One]
@ -145,7 +134,7 @@ end

 sub_one --> two
      </div>
-      <div class="mermaid" style="width: 50%; height: 50%;">
+      <div class="mermaid2" style="width: 50%; height: 50%;">
 flowchart TD

 subgraph one[One]
@ -174,7 +163,7 @@ _one --> b
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { curve: 'cardinal', "htmlLabels": true },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
--- a/dist/index.html
+++ b/dist/index.html
@ -21,6 +21,22 @@

  <hr />

+  <div class="mermaid">
+    gantt
+      title Airworks roadmap
+      dateFormat YYYY-MM-DD
+      axisFormat %m-%d %a
+      excludes	weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07
+      includes 2021-10-09
+        
+      section Airworks 3.4.1
+      开发	:b, 2021-10-07, 5d
+      测试	:after b, 4d
+      OK  :milestore
+      section Airworks 3.4.2
+      开发	:a, 2021-10-09, 4d
+      测试	:after a, 4d
+  </div>
  <div class="mermaid">
    gantt
    title Exclusive end dates (Manual date should end on 3d)
--- a/dist/mermaid.core.js
+++ b/dist/mermaid.core.js
--- a/dist/mermaid.core.js.map
+++ b/dist/mermaid.core.js.map
--- a/dist/mermaid.js
+++ b/dist/mermaid.js
--- a/dist/mermaid.js.map
+++ b/dist/mermaid.js.map
--- a/dist/mermaid.min.js.map
+++ b/dist/mermaid.min.js.map
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@ -2,7 +2,7 @@

 Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid. 

-This section will introduce the different methods of configuring of the behaviors and apperances of Mermaid Diagrams. 
+This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams. 
 The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods. 

 ## Configuration Section in the [Live Editor](./Live-Editor.md). 
@ -13,7 +13,7 @@ The Following are the most commonly used methods, and are all tied to Mermaid [D

 ## [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 defintion inside `%%{ }%%`, either above or below your diagram defintion. 
+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. 
--- a/docs/README.md
+++ b/docs/README.md
@ -199,7 +199,7 @@ To Deploy Mermaid:
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 <script>mermaid.initialize({startOnLoad:true});</script>
 ```
-**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitons and render them into svg charts.**
+**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into svg charts.**

 **Examples can be found at** [Other examples](/examples)

--- a/docs/Setup.md
+++ b/docs/Setup.md
@ -70,7 +70,7 @@ theme , the CSS style sheet

 | Parameter  | Description                                            | Type   | Required | Values                      |
 | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- |
-| fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Posiable CSS FontFamily |
+| fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily |

 **Notes:**
 Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
@ -103,9 +103,9 @@ Default value: '"trebuchet ms", verdana, arial, sans-serif;'.

 ## startOnLoad

-| Parameter   | Description                                   | Type    | Required | Values      |
-| ----------- | --------------------------------------------- | ------- | -------- | ----------- |
-| startOnLoad | Dictates whether mermaind starts on Page load | boolean | Required | true, false |
+| Parameter   | Description                                  | Type    | Required | Values      |
+| ----------- | -------------------------------------------- | ------- | -------- | ----------- |
+| startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |

 **Notes:** Default value: true

@ -204,7 +204,7 @@ Default value 50

 **Notes:**

-Default Vaue: 'basis'
+Default Value: 'basis'

 ### useMaxWidth

@ -411,7 +411,7 @@ Default value: false

 | Parameter       | Description                                          | Type   | Required | Values                      |
 | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
-| actorFontFamily | This sets the font family of the actor's description | string | Required | Any Posiable CSS FontFamily |
+| actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |

 **Notes:**
 Default value: "'Open-Sans", "sans-serif"'
@ -436,7 +436,7 @@ Default value: 14

 | Parameter      | Description                                        | Type   | Required | Values                      |
 | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- |
-| noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Posiable CSS FontFamily |
+| noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |

 **Notes:**
 Default value: ''"trebuchet ms", verdana, arial, sans-serif'
@ -470,7 +470,7 @@ Default value: 16

 | Parameter         | Description                                 | Type   | Required | Values                      |
 | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- |
-| messageFontFamily | This sets the font family of actor messages | string | Required | Any Posiable CSS FontFamily |
+| messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |

 **Notes:**
 Default value: '"trebuchet ms", verdana, arial, sans-serif'
@ -590,9 +590,9 @@ Default value: 11

 ### sectionFontSize

-| Parameter       | Description           | Type    | Required | Values             |
-| --------------- | --------------------- | ------- | -------- | ------------------ |
-| sectionFontSize | Font size for secions | Integer | Required | Any Positive Value |
+| Parameter       | Description            | Type    | Required | Values             |
+| --------------- | ---------------------- | ------- | -------- | ------------------ |
+| sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |

 **Notes:**
 Default value: 11
@ -879,7 +879,7 @@ Default value: 'TB'

 | Parameter      | Description                        | Type    | Required | Values             |
 | -------------- | ---------------------------------- | ------- | -------- | ------------------ |
-| minEntityWidth | The mimimum width of an entity box | Integer | Required | Any Positive Value |
+| minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |

 **Notes:**
 Expressed in pixels.
--- a/docs/development.md
+++ b/docs/development.md
@ -25,7 +25,7 @@ This means that **you should branch off your pull request from develop** and dir
 We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein *knsv, Knut Sveidqvist* is the primary reviewer of changes and merging pull requests. The process is as follows:

 * Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller, low-risk changes like dependecies, documentation, etc. can be merged by active collaborators
+* Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
 * Documentation (we encourage updates to the docs folder; you can submit them via direct commits)

 When you commit code, create a branch with the following naming convention:
--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/docs/diagrams-and-syntax-and-examples/flowchart.md
@ -336,7 +336,7 @@ graph LR

 ### Chaining of links

-It is possible declare many links in the same line as per below:
+It is possible to declare many links in the same line as per below:
 ```
 graph LR
   A -- text --> B -- text2 --> C
--- a/docs/entityRelationshipDiagram.md
+++ b/docs/entityRelationshipDiagram.md
@ -195,6 +195,24 @@ The `type` and `name` values must begin with an alphabetic character and may con

 Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by quotes at the end of an attribute. Comments themselves cannot have quote characters in them.

+```
+erDiagram
+    CAR ||--o{ NAMED-DRIVER : allows
+    CAR {
+        string allowedDriver FK 'The license of the allowed driver'
+        string registrationNumber
+        string make
+        string model
+    }
+    PERSON ||--o{ NAMED-DRIVER : is
+    PERSON {
+        string driversLicense PK 'The license #'
+        string firstName
+        string lastName
+        int age
+    }
+```
+
 ```mermaid
 erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
--- a/docs/gantt.md
+++ b/docs/gantt.md
@ -133,7 +133,26 @@ To do so, start a line with the `section` keyword and give it a name. (Note that

 ### Milestones

-You can add milestones to the diagrams. Milestones differ from tasks as they represent a signle instant in time and are identifiedd by the keyword `milestone`
+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. 
+
+```
+gantt 
+dateFormat HH:mm
+axisFormat %H:%M
+Initial milestone : milestone, m1, 17:49,2min
+taska2 : 10min
+taska3 : 5min 
+Final milestone : milestone, m2, 18:14, 2min
+```
+```mermaid
+gantt 
+dateFormat HH:mm
+axisFormat %H:%M
+Initial milestone : milestone, m1, 17:49,2min
+taska2 : 10min
+taska3 : 5min 
+Final milestone : milestone, m2, 18:14, 2min
+```


 ## Setting dates
--- a/docs/integrations.md
+++ b/docs/integrations.md
@ -12,7 +12,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
 - [GitHub](https://github.com)
-  - [Github action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
+  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitBook](http://gitbook.com)
  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
@ -37,7 +37,7 @@ They also serve as proof of concept, for the variety of things that can be built
  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
 - [Hexo](https://hexo.io)
-  - [hexo-filter-mermid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
+  - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
  - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
  - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)

@ -107,6 +107,9 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Inkdrop](http://inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
 - [Vim](https://vim.org)
  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
+- [GNU Emacs](https://www.gnu.org/software/emacs/)
+  - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
+  - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
 - [Brackets](http://brackets.io/)
  - [Mermaid Preview](https://s3.amazonaws.com/extend.brackets/alanhohn.mermaid-preview/alanhohn.mermaid-preview-1.0.2.zip)
 - [Iodide](https://github.com/iodide-project/iodide)
--- a/docs/n00b-overview.md
+++ b/docs/n00b-overview.md
@ -53,7 +53,7 @@ It is a relatively straightforward solution to a significant hurdle with the sof

 **Diagramming and charting is a large waste of developer's time, but not having diagrams ruins productivity.**

-Mermaid solves this by reducing the timeand effort required to create diagrams and charts.
+Mermaid solves this by reducing the time and effort required to create diagrams and charts.

 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.

--- a/docs/n00b-syntaxReference.md
+++ b/docs/n00b-syntaxReference.md
@ -72,7 +72,7 @@ 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 defintion inside `%%{ }%%`. It can be done either above or below your diagram definition. 
+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/docs/requirementDiagram.md
+++ b/docs/requirementDiagram.md
@ -44,7 +44,7 @@ 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 angule 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.

@ -66,7 +66,7 @@ Type, risk, and method are enumerations defined in SysML.
 |---|---|
 | Type | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
 | Risk | Low, Medium, High |
-| VerifcationMethod | Analysis, Inspection, Test, Demonstration |
+| 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.
--- a/docs/usage.md
+++ b/docs/usage.md
@ -320,7 +320,7 @@ var textFieldUpdated = function(){
 bindEventHandler('change', 'code', textFieldUpdated);
 ```
 **Alternative to mermaid.parse():**
-One effective and more future-proof method of validating your graph deinitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version. 
+One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version. 


 ## Configuration
--- a/package.json
+++ b/package.json
@ -78,9 +78,9 @@
    "concurrently": "^6.2.2",
    "coveralls": "^3.0.2",
    "css-to-string-loader": "^0.1.3",
-    "cypress": "8.5.0",
+    "cypress": "8.7.0",
    "documentation": "13.2.0",
-    "eslint": "^7.30.0",
+    "eslint": "^8.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "husky": "^7.0.1",
--- a/src/dagre-wrapper/shapes/util.js
+++ b/src/dagre-wrapper/shapes/util.js
@ -1,7 +1,8 @@
 import createLabel from '../createLabel';
 import { getConfig } from '../../config';
+import { decodeEntities } from '../../mermaidAPI';
 import { select } from 'd3';
-import { evaluate } from '../../diagrams/common/common';
+import { evaluate, sanitizeText } from '../../diagrams/common/common';
 export const labelHelper = (parent, node, _classes, isNode) => {
  let classes;
  if (!_classes) {
@ -20,7 +21,14 @@ export const labelHelper = (parent, node, _classes, isNode) => {

  const text = label
    .node()
-    .appendChild(createLabel(node.labelText, node.labelStyle, false, isNode));
+    .appendChild(
+      createLabel(
+        sanitizeText(decodeEntities(node.labelText), getConfig()),
+        node.labelStyle,
+        false,
+        isNode
+      )
+    );

  // Get the size of the label
  let bbox = text.getBBox();
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@ -59,7 +59,7 @@ const config = {
  /**
   * | Parameter | Description | Type | Required | Values |
   * | --- | --- | --- | --- | --- |
-   * | fontFamily | specifies the font to be used in the rendered diagrams| string | Required | Any Posiable CSS FontFamily |
+   * | fontFamily | specifies the font to be used in the rendered diagrams| string | Required | Any Possible CSS FontFamily |
   *
   * **Notes:**
   * Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
@ -98,7 +98,7 @@ const config = {
  /**
   * | Parameter | Description | Type | Required | Values |
   * | --- | --- | --- | --- | --- |
-   * | startOnLoad | Dictates whether mermaind starts on Page load | boolean | Required | true, false |
+   * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
   *
   * **Notes:** Default value: true
   */
@ -207,7 +207,7 @@ const config = {
     *
     * **Notes:**
     *
-     * Default Vaue: 'basis'
+     * Default Value: 'basis'
     */
    curve: 'basis',
    // Only used in new experimental rendering
@ -439,7 +439,7 @@ const config = {
    /**
     * | Parameter | Description | Type | Required | Values |
     * | --- | --- | --- | --- | --- |
-     * | actorFontFamily |This sets the font family of the actor's description | string | Required | Any Posiable CSS FontFamily |
+     * | actorFontFamily |This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
     *
     * **Notes:**
     * Default value: "'Open-Sans", "sans-serif"'
@ -467,7 +467,7 @@ const config = {
    /**
     * | Parameter | Description | Type | Required | Values |
     * | --- | --- | --- | --- | --- |
-     * | noteFontFamily| This sets the font family of actor-attached notes. | string | Required | Any Posiable CSS FontFamily |
+     * | noteFontFamily| This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |
     *
     * **Notes:**
     * Default value: ''"trebuchet ms", verdana, arial, sans-serif'
@ -505,7 +505,7 @@ const config = {
    /**
     * | Parameter | Description | Type | Required | Values |
     * | --- | --- | --- | --- | --- |
-     * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Posiable CSS FontFamily |
+     * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |
     *
     * **Notes:**
     * Default value: '"trebuchet ms", verdana, arial, sans-serif'
@ -664,7 +664,7 @@ const config = {
    /**
     * | Parameter | Description | Type | Required | Values|
     * | --- | --- | --- | --- | --- |
-     * | sectionFontSize | Font size for secions| Integer | Required | Any Positive Value |
+     * | sectionFontSize | Font size for sections| Integer | Required | Any Positive Value |
     *
     * **Notes:**
     * Default value: 11
@ -1015,7 +1015,7 @@ top of the chart
    /**
     * | Parameter | Description | Type | Required | Values |
     * | --- | --- | --- | --- | --- |
-     * | minEntityWidth | The mimimum width of an entity box | Integer | Required | Any Positive Value  |
+     * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value  |
     *
     * **Notes:**
     * Expressed in pixels.
--- a/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/src/diagrams/flowchart/parser/flow-style.spec.js
@ -61,7 +61,7 @@ describe('[Style] when parsing', () => {
    expect(vert['T'].styles[1]).toBe('border:1px solid red');
  });

-  it('should handle styles and graph definitons in a graph', function() {
+  it('should handle styles and graph definitions in a graph', function() {
    const res = flow.parser.parse(
      'graph TD;S-->T;\nstyle S background:#aaa;\nstyle T background:#bbb,border:1px solid red;'
    );
@ -76,7 +76,7 @@ describe('[Style] when parsing', () => {
    expect(vert['T'].styles[1]).toBe('border:1px solid red');
  });

-  it('should handle styles and graph definitons in a graph', function() {
+  it('should handle styles and graph definitions in a graph', function() {
    const res = flow.parser.parse('graph TD;style T background:#bbb,border:1px solid red;');
    // const res = flow.parser.parse('graph TD;style T background: #bbb;');

@ -277,7 +277,7 @@ describe('[Style] when parsing', () => {
    expect(edges[0].type).toBe('arrow_point');
  });

-  it('should handle multi-numbered style definitons with more then 1 digit in a row', function() {
+  it('should handle multi-numbered style definitions with more then 1 digit in a row', function() {
    const res = flow.parser.parse(
      'graph TD\n' +
        'A-->B1\n' +
--- a/src/diagrams/gantt/ganttDb.js
+++ b/src/diagrams/gantt/ganttDb.js
@ -8,6 +8,7 @@ import mermaidAPI from '../../mermaidAPI';
 let dateFormat = '';
 let axisFormat = '';
 let todayMarker = '';
+let includes = [];
 let excludes = [];
 let title = '';
 let sections = [];
@ -38,6 +39,7 @@ export const clear = function () {
  dateFormat = '';
  axisFormat = '';
  todayMarker = '';
+  includes = [];
  excludes = [];
  inclusiveEndDates = false;
  topAxis = false;
@ -84,6 +86,13 @@ export const getDateFormat = function () {
  return dateFormat;
 };

+export const setIncludes = function (txt) {
+  includes = txt.toLowerCase().split(/[\s,]+/);
+};
+
+export const getIncludes = function () {
+  return includes;
+};
 export const setExcludes = function (txt) {
  excludes = txt.toLowerCase().split(/[\s,]+/);
 };
@ -123,7 +132,10 @@ export const getTasks = function () {
  return tasks;
 };

-const isInvalidDate = function (date, dateFormat, excludes) {
+export const isInvalidDate = function (date, dateFormat, excludes, includes) {
+  if (includes.indexOf(date.format(dateFormat.trim())) >= 0) {
+    return false;
+  }
  if (date.isoWeekday() >= 6 && excludes.indexOf('weekends') >= 0) {
    return true;
  }
@ -133,24 +145,24 @@ const isInvalidDate = function (date, dateFormat, excludes) {
  return excludes.indexOf(date.format(dateFormat.trim())) >= 0;
 };

-const checkTaskDates = function (task, dateFormat, excludes) {
+const checkTaskDates = function (task, dateFormat, excludes, includes) {
  if (!excludes.length || task.manualEndTime) return;
  let startTime = moment(task.startTime, dateFormat, true);
  startTime.add(1, 'd');
  let endTime = moment(task.endTime, dateFormat, true);
-  let renderEndTime = fixTaskDates(startTime, endTime, dateFormat, excludes);
+  let renderEndTime = fixTaskDates(startTime, endTime, dateFormat, excludes, includes);
  task.endTime = endTime.toDate();
  task.renderEndTime = renderEndTime;
 };

-const fixTaskDates = function (startTime, endTime, dateFormat, excludes) {
+const fixTaskDates = function (startTime, endTime, dateFormat, excludes, includes) {
  let invalid = false;
  let renderEndTime = null;
  while (startTime <= endTime) {
    if (!invalid) {
      renderEndTime = endTime.toDate();
    }
-    invalid = isInvalidDate(startTime, dateFormat, excludes);
+    invalid = isInvalidDate(startTime, dateFormat, excludes, includes);
    if (invalid) {
      endTime.add(1, 'd');
    }
@ -306,7 +318,7 @@ const compileData = function (prevTask, dataStr) {
  if (endTimeData) {
    task.endTime = getEndDate(task.startTime, dateFormat, endTimeData, inclusiveEndDates);
    task.manualEndTime = moment(endTimeData, 'YYYY-MM-DD', true).isValid();
-    checkTaskDates(task, dateFormat, excludes);
+    checkTaskDates(task, dateFormat, excludes, includes);
  }

  return task;
@ -460,7 +472,7 @@ const compileTasks = function () {
          'YYYY-MM-DD',
          true
        ).isValid();
-        checkTaskDates(rawTasks[pos], dateFormat, excludes);
+        checkTaskDates(rawTasks[pos], dateFormat, excludes, includes);
      }
    }

@ -618,12 +630,15 @@ export default {
  addTask,
  findTaskById,
  addTaskOrg,
+  setIncludes,
+  getIncludes,
  setExcludes,
  getExcludes,
  setClickEvent,
  setLink,
  bindFunctions,
  durationToDate,
+  isInvalidDate,
 };

 function getTaskTags(data, task, tags) {
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@ -1,3 +1,4 @@
+import moment from 'moment-mini';
 import {
  select,
  scaleTime,
@ -108,6 +109,16 @@ export const draw = function (text, id) {
      .range(['#00B9FA', '#F95002'])
      .interpolate(interpolateHcl);

+    drawExcludeDays(
+      gap,
+      topPadding,
+      leftPadding,
+      pageWidth,
+      pageHeight,
+      tasks,
+      parser.yy.getExcludes(),
+      parser.yy.getIncludes()
+    );
    makeGrid(leftPadding, topPadding, pageWidth, pageHeight);
    drawRects(tasks, gap, topPadding, leftPadding, barHeight, colorScale, pageWidth, pageHeight);
    vertLabels(gap, topPadding, leftPadding, barHeight, colorScale);
@ -341,6 +352,67 @@ export const draw = function (text, id) {
        }
      });
  }
+  function drawExcludeDays(theGap, theTopPad, theSidePad, w, h, tasks, excludes, includes) {
+    const minTime = tasks.reduce(
+      (min, { startTime }) => (min ? Math.min(min, startTime) : startTime),
+      0
+    );
+    const maxTime = tasks.reduce((max, { endTime }) => (max ? Math.max(max, endTime) : endTime), 0);
+    const dateFormat = parser.yy.getDateFormat();
+    if (!minTime || !maxTime) return;
+
+    const excludeRanges = [];
+    let range = null;
+    let d = moment(minTime);
+    while (d.valueOf() <= maxTime) {
+      if (parser.yy.isInvalidDate(d, dateFormat, excludes, includes)) {
+        if (!range) {
+          range = {
+            start: d.clone(),
+            end: d.clone(),
+          };
+        } else {
+          range.end = d.clone();
+        }
+      } else {
+        if (range) {
+          excludeRanges.push(range);
+          range = null;
+        }
+      }
+      d.add(1, 'd');
+    }
+
+    const rectangles = svg.append('g').selectAll('rect').data(excludeRanges).enter();
+
+    rectangles
+      .append('rect')
+      .attr('id', function (d) {
+        return 'exclude-' + d.start.format('YYYY-MM-DD');
+      })
+      .attr('x', function (d) {
+        return timeScale(d.start) + theSidePad;
+      })
+      .attr('y', conf.gridLineStartPadding)
+      .attr('width', function (d) {
+        const renderEnd = d.end.clone().add(1, 'day');
+        return timeScale(renderEnd) - timeScale(d.start);
+      })
+      .attr('height', h - theTopPad - conf.gridLineStartPadding)
+      .attr('transform-origin', function (d, i) {
+        return (
+          (
+            timeScale(d.start) +
+            theSidePad +
+            0.5 * (timeScale(d.end) - timeScale(d.start))
+          ).toString() +
+          'px ' +
+          (i * theGap + 0.5 * h).toString() +
+          'px'
+        );
+      })
+      .attr('class', 'exclude-range');
+  }

  function makeGrid(theSidePad, theTopPad, w, h) {
    let bottomXAxis = axisBottom(timeScale)
@ -458,7 +530,8 @@ export const draw = function (text, id) {
    const hash = {};
    const result = [];
    for (let i = 0, l = arr.length; i < l; ++i) {
-      if (!hash.hasOwnProperty(arr[i])) { // eslint-disable-line
+      if (!Object.prototype.hasOwnProperty.call(hash, arr[i])) {
+        // eslint-disable-line
        // it works with objects! in FF, at least
        hash[arr[i]] = true;
        result.push(arr[i]);
--- a/src/diagrams/gantt/parser/gantt.jison
+++ b/src/diagrams/gantt/parser/gantt.jison
@ -70,6 +70,7 @@ that id.
 "inclusiveEndDates"     return 'inclusiveEndDates';
 "topAxis"               return 'topAxis';
 "axisFormat"\s[^#\n;]+  return 'axisFormat';
+"includes"\s[^#\n;]+    return 'includes';
 "excludes"\s[^#\n;]+    return 'excludes';
 "todayMarker"\s[^\n;]+  return 'todayMarker';
 \d\d\d\d"-"\d\d"-"\d\d  return 'date';
@ -112,6 +113,7 @@ statement
  | topAxis {yy.TopAxis();$$=$1.substr(8);}
  | axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);}
  | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
+  | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
  | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
  | title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
--- a/src/diagrams/gantt/styles.js
+++ b/src/diagrams/gantt/styles.js
@ -4,6 +4,9 @@ const getStyles = (options) =>
    font-family: "trebuchet ms", verdana, arial, sans-serif;
    font-family: var(--mermaid-font-family);
  }
+  .exclude-range {
+    fill: ${options.excludeBkgColor};
+  }

  .section {
    stroke: none;
--- a/src/diagrams/git/gitGraphParser.spec
+++ b/src/diagrams/git/gitGraphParser.spec
@ -21,7 +21,7 @@ describe('when parsing a gitGraph', function() {
  afterEach(function() {
    cryptoRandomString.mockReset();
  });
-  it('should handle a gitGraph defintion', function() {
+  it('should handle a gitGraph definition', function() {
    const str = 'gitGraph:\n' + 'commit\n';

    parser.parse(str);
@ -33,7 +33,7 @@ describe('when parsing a gitGraph', function() {
    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
  });

-  it('should handle a gitGraph defintion with empty options', function() {
+  it('should handle a gitGraph definition with empty options', function() {
    const str = 'gitGraph:\n' + 'options\n' + 'end\n' + 'commit\n';

    parser.parse(str);
@ -46,7 +46,7 @@ describe('when parsing a gitGraph', function() {
    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
  });

-  it('should handle a gitGraph defintion with valid options', function() {
+  it('should handle a gitGraph definition with valid options', function() {
    const str = 'gitGraph:\n' + 'options\n' + '{"key": "value"}\n' + 'end\n' + 'commit\n';

    parser.parse(str);
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@ -92,6 +92,7 @@ class Theme {
    this.altSectionBkgColor = this.altSectionBkgColor || 'white';
    this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;
    this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;
+    this.excludeBkgColor = this.excludeBkgColor || '#eeeeee';
    this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
    this.taskBkgColor = this.taskBkgColor || this.primaryColor;
    this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@ -67,6 +67,7 @@ class Theme {
    this.sectionBkgColor = 'calculated';
    this.altSectionBkgColor = 'calculated';
    this.sectionBkgColor2 = 'calculated';
+    this.excludeBkgColor = '#eeeeee';
    this.taskBorderColor = 'calculated';
    this.taskBkgColor = 'calculated';
    this.taskTextLightColor = 'calculated';
--- a/src/themes/theme-forest.js
+++ b/src/themes/theme-forest.js
@ -59,6 +59,7 @@ class Theme {
    this.sectionBkgColor = '#6eaa49';
    this.altSectionBkgColor = 'white';
    this.sectionBkgColor2 = '#6eaa49';
+    this.excludeBkgColor = '#eeeeee';
    this.taskBorderColor = 'calculated';
    this.taskBkgColor = '#487e3a';
    this.taskTextLightColor = 'white';
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@ -72,6 +72,7 @@ class Theme {
    this.sectionBkgColor = 'calculated';
    this.altSectionBkgColor = 'white';
    this.sectionBkgColor2 = 'calculated';
+    this.excludeBkgColor = '#eeeeee';
    this.taskBorderColor = 'calculated';
    this.taskBkgColor = 'calculated';
    this.taskTextLightColor = 'white';
--- a/yarn.lock
+++ b/yarn.lock