Merge branch 'develop' into feature/1433_title_support

mermaid-js · Oct 25, 2022 · 1aede3b · 1aede3b
2 parents ccd88c8 + 10ba3b6
commit 1aede3b
Show file tree

Hide file tree

Showing 31 changed files with 1,089 additions and 788 deletions.
diff --git a/README.md b/README.md
@@ -164,6 +164,7 @@ Class01 <|-- AveryLongClass : Cool
 Class09 --> C2 : Where am I?
 Class09 --* C3
 Class09 --|> Class07
+note "I love this diagram!\nDo you love it?"
 Class07 : equals()
 Class07 : Object[] elementData
 Class01 : size()
@@ -174,6 +175,7 @@ class Class10 {
   int id
   size()
 }
+note for Class10 "Cool class\nI said it's very cool class!"
 ```
 
 ### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]

diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -488,4 +488,21 @@ describe('Class diagram V2', () => {
       {}
     );
   });
+  it('18: should render a simple class diagram with notes', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        note "I love this diagram!\nDo you love it?"
+        class Class10 {
+          <<service>>
+          int id
+          size()
+        }
+        note for Class10 "Cool class\nI said it's very cool class!"
+
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+    cy.get('svg');
+  });
 });
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
@@ -407,4 +407,21 @@ describe('Class diagram', () => {
   //      // expect(svg).to.not.have.attr('style');
   //     });
   // });
+
+  it('19: should render a simple class diagram with notes', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      note "I love this diagram!\nDo you love it?"
+      class Class10 {
+        <<service>>
+        int id
+        size()
+      }
+      note for Class10 "Cool class\nI said it's very cool class!"
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
 });
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
@@ -266,4 +266,21 @@ describe('Entity Relationship Diagram', () => {
       {}
     );
   });
+  it('should render entities with aliases', () => {
+    renderGraph(
+      `
+    erDiagram
+      T1 one or zero to one or more T2 : test
+      T2 one or many optionally to zero or one T3 : test
+      T3 zero or more to zero or many T4 : test
+      T4 many(0) to many(1) T5 : test
+      T5 many optionally to one T6 : test
+      T6 only one optionally to only one T1 : test
+      T4 0+ to 1+ T6 : test
+      T1 1 to 1 T3 : test
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
 });
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -56,21 +56,10 @@
   <body>
     <div>Security check</div>
     <pre id="diagram" class="mermaid">
-classDiagram
-        direction LR
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
+flowchart TD
+    A --> B
+    B --> C
+    A --> C
     </pre>
     <pre id="diagram" class="mermaid">
 mindmap
@@ -93,8 +82,14 @@
       Pen and paper
       Mermaid
         </pre>
-    <pre id="diagram" class="mermaid2">
-      example-diagram
+    <pre id="diagram" class="mermaid">
+      gantt
+        title Style today marker (vertical line should be 5px wide and half-transparent blue)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+        section Section1
+        Today: 1, -1h
     </pre>
 
     <!-- <div id="cy"></div> -->
@@ -111,13 +106,18 @@
         theme: 'base',
         startOnLoad: true,
         logLevel: 0,
-        // basePath: './packages/',
-        // themeVariables: { darkMode: true },
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
         lazyLoadedDiagrams: [
           './mermaid-mindmap-detector.esm.mjs',
           './mermaid-example-diagram-detector.esm.mjs',
         ],
-        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
       });
       function callback() {
         alert('It worked');

diff --git a/docs/classDiagram.md b/docs/classDiagram.md
@@ -12,7 +12,9 @@ Mermaid can render class diagrams.
 ```mermaid-example
 classDiagram
     title Animal example
+    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
@@ -37,7 +39,9 @@ classDiagram
 ```mermaid
 classDiagram
     title Animal example
+    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
@@ -553,6 +557,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:_

diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md
@@ -112,10 +112,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
@@ -220,6 +244,7 @@ erDiagram
         string lastName
         int age
     }
+    MANUFACTURER only one to zero or more CAR
 ```
 
 ```mermaid
@@ -238,6 +263,7 @@ erDiagram
         string lastName
         int age
     }
+    MANUFACTURER only one to zero or more CAR
 ```
 
 ### Other Things

diff --git a/docs/index.html b/docs/index.html
@@ -40,20 +40,20 @@
       };
     </script>
     <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"
+      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.0/min/vs/editor/editor.main.nls.min.js"
+      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.0/min/vs/editor/editor.main.min.js"
-      integrity="sha512-iVHvVf6TQEoF5oQrocjP88wstImQHQZCxGsa5nKYOs6gXWzsV7QZHyk80HrXhrEWRJ1ADoIV6Uji3UUXtCmBMg=="
+      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>

diff --git a/docs/pie.md b/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)

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "module": "dist/mermaid.core.mjs",
   "types": "dist/mermaid.d.ts",
   "type": "module",
-  "packageManager": "pnpm@7.13.5",
+  "packageManager": "pnpm@7.13.6",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
@@ -70,7 +70,7 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "6.0.0",
+    "@braintree/sanitize-url": "6.0.1",
     "@types/node": "18.11.0",
     "@types/uuid": "8.3.4",
     "d3": "7.6.1",
@@ -88,50 +88,50 @@
     "uuid": "9.0.0"
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "3.27.2",
+    "@applitools/eyes-cypress": "3.27.5",
     "@commitlint/cli": "17.1.2",
     "@commitlint/config-conventional": "17.1.0",
-    "@cspell/eslint-plugin": "^6.12.0",
+    "@cspell/eslint-plugin": "6.12.0",
     "@types/d3": "7.4.0",
     "@types/dompurify": "2.3.4",
-    "@types/eslint": "8.4.6",
+    "@types/eslint": "8.4.7",
     "@types/express": "4.17.14",
     "@types/jsdom": "20.0.0",
     "@types/lodash": "4.14.186",
     "@types/mdast": "3.0.10",
     "@types/prettier": "2.7.1",
     "@types/stylis": "4.0.2",
-    "@typescript-eslint/eslint-plugin": "5.40.0",
-    "@typescript-eslint/parser": "5.40.0",
+    "@typescript-eslint/eslint-plugin": "5.40.1",
+    "@typescript-eslint/parser": "5.40.1",
     "@vitest/coverage-c8": "0.24.3",
     "@vitest/ui": "0.24.3",
     "concurrently": "7.4.0",
     "coveralls": "3.1.1",
     "cypress": "10.10.0",
     "cypress-image-snapshot": "4.0.1",
     "documentation": "13.2.5",
-    "esbuild": "0.15.11",
+    "esbuild": "0.15.12",
     "eslint": "8.25.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-html": "7.1.0",
-    "eslint-plugin-jest": "27.1.2",
-    "eslint-plugin-jsdoc": "39.3.6",
+    "eslint-plugin-jest": "27.1.3",
+    "eslint-plugin-jsdoc": "39.3.23",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-markdown": "3.0.0",
-    "eslint-plugin-no-only-tests": "^3.0.0",
-    "eslint-plugin-tsdoc": "^0.2.17",
+    "eslint-plugin-no-only-tests": "3.1.0",
+    "eslint-plugin-tsdoc": "0.2.17",
     "express": "4.18.2",
     "globby": "13.1.2",
     "husky": "8.0.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.2.0",
+    "jest": "29.2.1",
     "jison": "0.4.18",
     "jsdom": "20.0.1",
     "lint-staged": "13.0.3",
     "markdown-it": "13.0.1",
     "path-browserify": "1.0.1",
-    "pnpm": "7.13.5",
+    "pnpm": "7.13.6",
     "prettier": "2.7.1",
     "prettier-plugin-jsdoc": "0.4.2",
     "remark": "14.0.2",
@@ -141,7 +141,7 @@
     "typescript": "4.8.4",
     "unist-util-flatmap": "1.0.0",
     "vite": "3.1.8",
-    "vitepress": "1.0.0-alpha.21",
+    "vitepress": "1.0.0-alpha.22",
     "vitepress-plugin-mermaid": "2.0.8",
     "vitepress-plugin-search": "1.0.4-alpha.11",
     "vitest": "0.24.3"

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
@@ -75,31 +75,31 @@
     "stylis": "^4.1.2"
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "3.27.2",
+    "@applitools/eyes-cypress": "3.27.5",
     "@commitlint/cli": "17.1.2",
     "@commitlint/config-conventional": "17.1.0",
     "@types/d3": "7.4.0",
     "@types/dompurify": "2.3.4",
-    "@types/eslint": "8.4.6",
+    "@types/eslint": "8.4.7",
     "@types/express": "4.17.14",
     "@types/jsdom": "20.0.0",
     "@types/lodash": "4.14.186",
     "@types/prettier": "2.7.1",
     "@types/stylis": "4.0.2",
-    "@typescript-eslint/eslint-plugin": "5.40.0",
-    "@typescript-eslint/parser": "5.40.0",
+    "@typescript-eslint/eslint-plugin": "5.40.1",
+    "@typescript-eslint/parser": "5.40.1",
     "concurrently": "7.4.0",
     "coveralls": "3.1.1",
     "cypress": "10.10.0",
     "cypress-image-snapshot": "4.0.1",
     "documentation": "13.2.5",
-    "esbuild": "0.15.11",
+    "esbuild": "0.15.12",
     "eslint": "8.25.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-html": "7.1.0",
-    "eslint-plugin-jest": "27.1.2",
-    "eslint-plugin-jsdoc": "39.3.6",
+    "eslint-plugin-jest": "27.1.3",
+    "eslint-plugin-jsdoc": "39.3.23",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-markdown": "3.0.0",
     "express": "4.18.2",