merge MERMAID/develop into branch

docs/classDiagram.md

@@ -11,7 +11,9 @@ Mermaid can render class diagrams.
 
 ```mermaid-example
 classDiagram
+    note "From Duck till Zebra"
     Animal <|-- Duck
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -35,7 +37,9 @@ classDiagram
 
 ```mermaid
 classDiagram
+    note "From Duck till Zebra"
     Animal <|-- Duck
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -549,6 +553,10 @@ You would define these actions on a separate line after all classes have been de
 - (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
 - note: callback function will be called with the nodeId as parameter.
 
+## Notes
+
+It is possible to add notes on digram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+
 ### Examples
 
 _URL Link:_

docs/entityRelationshipDiagram.md

@@ -110,10 +110,34 @@ Cardinality is a property that describes how many elements of another entity can
 |     `}o`     |     `o{`      | Zero or more (no upper limit) |
 |    `}\|`     |     `\|{`     | One or more (no upper limit)  |
 
+**Aliases**
+
+| Value (left) | Value (right) | Alias for    |
+| :----------: | :-----------: | ------------ |
+| one or zero  |  one or zero  | Zero or one  |
+| zero or one  |  zero or one  | Zero or one  |
+| one or more  |  one or more  | One or more  |
+| one or many  |  one or many  | One or more  |
+|   many(1)    |    many(1)    | One or more  |
+|      1+      |      1+       | One or more  |
+| zero or more | zero or more  | Zero or more |
+| zero or many | zero or many  | Zero or more |
+|   many(0)    |    many(1)    | Zero or more |
+|      0+      |      0+       | Zero or more |
+|   only one   |   only one    | Exactly one  |
+|      1       |       1       | Exactly one  |
+
 ### Identification
 
 Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
 
+**Aliases**
+
+|     Value     |     Alias for     |
+| :-----------: | :---------------: |
+|      to       |   _identifying_   |
+| optionally to | _non-identifying_ |
+
 ```mermaid-example
 erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
@@ -218,6 +242,7 @@ erDiagram
         string lastName
         int age
     }
+    MANUFACTURER only one to zero or more CAR
 ```
 
 ```mermaid
@@ -236,6 +261,7 @@ erDiagram
         string lastName
         int age
     }
+    MANUFACTURER only one to zero or more CAR
 ```
 
 ### Other Things

docs/flowchart.md

@@ -315,13 +315,13 @@ flowchart LR
 ### Dotted link
 
 ```mermaid-example
-flowchart LR;
-   A-.->B;
+flowchart LR
+   A-.->B
 ```
 
 ```mermaid
-flowchart LR;
-   A-.->B;
+flowchart LR
+   A-.->B
 ```
 
 ### Dotted link with text
@@ -866,13 +866,13 @@ A shorter form of adding a class is to attach the classname to the node using th
 ```mermaid-example
 flowchart LR
     A:::someclass --> B
-    classDef someclass fill:#f96;
+    classDef someclass fill:#f96
 ```
 
 ```mermaid
 flowchart LR
     A:::someclass --> B
-    classDef someclass fill:#f96;
+    classDef someclass fill:#f96
 ```
 
 ### Css classes
@@ -895,14 +895,14 @@ below:
 **Example definition**
 
 ```mermaid-example
-flowchart LR;
+flowchart LR
     A-->B[AAA<span>BBB</span>]
     B-->D
     class A cssClass
 ```
 
 ```mermaid
-flowchart LR;
+flowchart LR
     A-->B[AAA<span>BBB</span>]
     B-->D
     class A cssClass
@@ -924,7 +924,7 @@ The icons are accessed via the syntax fa:#icon class name#.
 flowchart TD
     B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
@@ -932,7 +932,7 @@ flowchart TD
 flowchart TD
     B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
+    B-->D(fa:fa-spinner)
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 

docs/index.html

@@ -15,6 +15,14 @@
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
     />
+    <meta property="og:title" content="Mermaid" />
+    <meta property="og:url" content="https://mermaid-js.github.io/mermaid/" />
+    <meta property="og:image" content="https://mermaid-js.github.io/mermaid/img/header.png" />
+    <meta
+      property="og:description"
+      content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
+    />
+    <meta property="og:type" content="website" />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
     <link
@@ -28,12 +36,27 @@
     ></script>
     <script>
       const require = {
-        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
+        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' },
       };
     </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"
+      integrity="sha512-6bIYsGqvLpAiEBXPdRQeFf5cueeBECtAKJjIHer3BhBZNTV3WLcLA8Tm3pDfxUwTMIS+kAZwTUvJ1IrMdX8C5w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.nls.min.js"
+      integrity="sha512-CCv+DKWw+yZhxf4Z+ExT6HC5G+3S45TeMTYcJyYbdrv4BpK2vyALJ4FoVR/KGWDIPu7w4tNCOC9MJQIkYPR5FA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.js"
+      integrity="sha512-u4eMtetNbBJvHXdLXs2kWZvJiVlg3cmkVcxrLzSPa1eNFuHygPYvyMWyK9PsD6Eq2MZSo+mTyjds8uuhPzVxHA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
     <script>
       exports = {};
     </script>
@@ -57,6 +80,7 @@
       let parser = new DOMParser();
       let currentCodeExample = 0;
       let colorize = [];
+      let num = 0;
 
       function colorizeEverything(html) {
         initEditor(monaco);
@@ -127,8 +151,9 @@
             hook.afterEach(function (html, next) {
               next(html);
               (async () => {
-                while (!window.hasOwnProperty('monaco'))
+                while (!window.hasOwnProperty('monaco')) {
                   await new Promise((resolve) => setTimeout(resolve, 1000));
+                }
                 colorizeEverything(html).then(
                   (newHTML) =>
                     (document.querySelector('article.markdown-section').innerHTML = newHTML)
@@ -146,7 +171,9 @@
         startOnLoad: false,
         themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
       };
-      if (isDarkMode) conf.theme = 'dark';
+      if (isDarkMode) {
+        conf.theme = 'dark';
+      }
       mermaid.initialize(conf);
     </script>
     <script>

docs/pie.md

@@ -28,7 +28,7 @@ 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_**
-- Followed by dataSet
+- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
   - `label` for a section in the pie diagram within `" "` quotes.
   - Followed by `:` colon as separator
   - Followed by `positive numeric value` (supported upto two decimal places)

docs/sequenceDiagram.md

@@ -97,7 +97,7 @@ Messages can be of two displayed either solid or with a dotted line.
 
     [Actor][Arrow][Actor]:Message text
 
-There are six types of arrows currently supported:
+There are eight types of arrows currently supported:
 
 | Type | Description                                      |
 | ---- | ------------------------------------------------ |