Updated mermaid version to 10.2.4

Use v8 coverage in vitest

demos/classchart.html

@@ -154,6 +154,29 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    classDiagram
+      A1 --> B1
+      namespace A {
+        class A1 {
+          +foo : string
+        }
+        class A2 {
+          +bar : int
+        }
+      }
+      namespace B {
+        class B1 {
+          +foo : bool
+        }
+        class B2 {
+          +bar : float
+        }
+      }
+      A2 --> B2
+    </pre>
+    <hr />
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

docs/syntax/gantt.md

@@ -28,10 +28,10 @@ gantt
     dateFormat YYYY-MM-DD
     section Section
         A task          :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
-    another task      : 24d
+        another task    :24d
 ```
 
 ```mermaid
@@ -40,10 +40,10 @@ gantt
     dateFormat YYYY-MM-DD
     section Section
         A task          :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
-    another task      : 24d
+        another task    :24d
 ```
 
 ## Syntax
@@ -117,14 +117,14 @@ gantt
 It is possible to set multiple dependencies separated by space:
 
 ```mermaid-example
-    gantt
+gantt
     apple :a, 2017-07-20, 1w
     banana :crit, b, 2017-07-23, 1d
     cherry :active, c, after b a, 1d
 ```
 
 ```mermaid
-    gantt
+gantt
     apple :a, 2017-07-20, 1w
     banana :crit, b, 2017-07-23, 1d
     cherry :active, c, after b a, 1d
@@ -146,22 +146,22 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
 
 ```mermaid-example
 gantt
-dateFormat HH:mm
+    dateFormat HH:mm
-axisFormat %H:%M
+    axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
+    Initial milestone : milestone, m1, 17:49, 2m
-taska2 : 10min
+    Task A : 10m
-taska3 : 5min
+    Task B : 5m
-Final milestone : milestone, m2, 18:14, 2min
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ```mermaid
 gantt
-dateFormat HH:mm
+    dateFormat HH:mm
-axisFormat %H:%M
+    axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
+    Initial milestone : milestone, m1, 17:49, 2m
-taska2 : 10min
+    Task A : 10m
-taska3 : 5min
+    Task B : 5m
-Final milestone : milestone, m2, 18:14, 2min
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ## Setting dates
@@ -296,29 +296,27 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
 ```mermaid-example
 gantt
     title A Gantt Diagram
-    %% this is a comment
+    %% This is a comment
     dateFormat YYYY-MM-DD
     section Section
         A task          :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
-    another task      : 24d
+        another task    :24d
-
 ```
 
 ```mermaid
 gantt
     title A Gantt Diagram
-    %% this is a comment
+    %% This is a comment
     dateFormat YYYY-MM-DD
     section Section
         A task          :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
-    another task      : 24d
+        another task    :24d
-
 ```
 
 ## Styling

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mermaid-monorepo",
   "private": true,
-  "version": "10.2.3",
+  "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "packageManager": "pnpm@8.6.5",
@@ -61,36 +61,38 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.33.1",
+    "@commitlint/cli": "^17.6.1",
+    "@commitlint/config-conventional": "^17.6.1",
     "@cspell/eslint-plugin": "^6.31.1",
     "@cypress/code-coverage": "^3.10.7",
-    "@rollup/plugin-typescript": "^11.1.2",
+    "@rollup/plugin-typescript": "^11.1.1",
     "@types/cors": "^2.8.13",
-    "@types/eslint": "^8.40.2",
+    "@types/eslint": "^8.37.0",
     "@types/express": "^4.17.17",
     "@types/js-yaml": "^4.0.5",
     "@types/jsdom": "^21.1.1",
-    "@types/lodash": "^4.14.195",
+    "@types/lodash": "^4.14.194",
     "@types/mdast": "^3.0.11",
-    "@types/node": "^20.3.2",
+    "@types/node": "^18.16.0",
-    "@types/prettier": "^2.7.3",
+    "@types/prettier": "^2.7.2",
     "@types/rollup-plugin-visualizer": "^4.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@typescript-eslint/parser": "^5.59.0",
-    "@vitest/coverage-istanbul": "^0.32.2",
+    "@vitest/coverage-v8": "^0.32.2",
     "@vitest/spy": "^0.32.2",
     "@vitest/ui": "^0.32.2",
-    "concurrently": "^8.2.0",
+    "concurrently": "^8.0.1",
     "cors": "^2.8.5",
     "coveralls": "^3.1.1",
-    "cypress": "^12.16.0",
+    "cypress": "^12.10.0",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.18.10",
+    "esbuild": "^0.18.0",
-    "eslint": "^8.43.0",
+    "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-cypress": "^2.13.3",
+    "eslint-plugin-cypress": "^2.13.2",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jsdoc": "^46.4.0",
+    "eslint-plugin-jsdoc": "^46.0.0",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^3.0.0",
@@ -98,29 +100,29 @@
     "eslint-plugin-tsdoc": "^0.2.17",
     "eslint-plugin-unicorn": "^47.0.0",
     "express": "^4.18.2",
-    "globby": "^13.2.0",
+    "globby": "^13.1.4",
     "husky": "^8.0.3",
     "jest": "^29.5.0",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^22.1.0",
+    "jsdom": "^22.0.0",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^13.2.1",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",
-    "pnpm": "^8.6.5",
+    "pnpm": "^8.3.1",
     "prettier": "^2.8.8",
     "prettier-plugin-jsdoc": "^0.4.2",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.0",
     "rollup-plugin-visualizer": "^5.9.2",
     "start-server-and-test": "^2.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.5",
+    "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-plugin-istanbul": "^4.1.0",
     "vitest": "^0.32.2"
   },
   "volta": {
-    "node": "20.3.2"
+    "node": "18.16.1"
   },
   "nyc": {
     "report-dir": "coverage/cypress"

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.2.3",
+  "version": "10.2.4",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -53,59 +53,59 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.2",
-    "cytoscape": "^3.25.0",
+    "cytoscape": "^3.23.0",
     "cytoscape-cose-bilkent": "^4.1.0",
-    "cytoscape-fcose": "^2.2.0",
+    "cytoscape-fcose": "^2.1.0",
     "d3": "^7.4.0",
     "dagre-d3-es": "7.0.10",
-    "dayjs": "^1.11.8",
+    "dayjs": "^1.11.7",
     "dompurify": "3.0.3",
     "elkjs": "^0.8.2",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
-    "mdast-util-from-markdown": "^1.3.1",
+    "mdast-util-from-markdown": "^1.3.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
-    "stylis": "^4.3.0",
+    "stylis": "^4.1.3",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.0",
     "web-worker": "^1.2.0"
   },
   "devDependencies": {
-    "@types/cytoscape": "^3.19.10",
+    "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
     "@types/d3-selection": "^3.0.5",
     "@types/dompurify": "^3.0.2",
     "@types/jsdom": "^21.1.1",
     "@types/lodash-es": "^4.17.7",
     "@types/micromatch": "^4.0.2",
-    "@types/prettier": "^2.7.3",
+    "@types/prettier": "^2.7.2",
-    "@types/stylis": "^4.2.0",
+    "@types/stylis": "^4.0.2",
-    "@types/uuid": "^9.0.2",
+    "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@typescript-eslint/parser": "^5.59.0",
     "chokidar": "^3.5.3",
-    "concurrently": "^8.2.0",
+    "concurrently": "^8.0.1",
     "coveralls": "^3.1.1",
     "cpy-cli": "^4.2.0",
     "cspell": "^6.31.1",
     "csstree-validator": "^3.0.0",
-    "globby": "^13.2.0",
+    "globby": "^13.1.4",
     "jison": "^0.4.18",
     "js-base64": "^3.7.5",
-    "jsdom": "^22.1.0",
+    "jsdom": "^22.0.0",
     "micromatch": "^4.0.5",
     "path-browserify": "^1.0.1",
     "prettier": "^2.8.8",
-    "remark": "^14.0.3",
+    "remark": "^14.0.2",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.0",
     "start-server-and-test": "^2.0.0",
-    "typedoc": "^0.24.8",
+    "typedoc": "^0.24.5",
-    "typedoc-plugin-markdown": "^3.15.3",
+    "typedoc-plugin-markdown": "^3.15.2",
-    "typescript": "^5.1.5",
+    "typescript": "^5.0.4",
     "unist-util-flatmap": "^1.0.0",
-    "vitepress": "1.0.0-beta.3",
+    "vitepress": "^1.0.0-alpha.72",
     "vitepress-plugin-search": "^1.0.4-alpha.20"
   },
   "files": [

packages/mermaid/src/diagrams/class/classDb.ts

@@ -448,9 +448,8 @@ const getNamespaces = function (): NamespaceMap {
 export const addClassesToNamespace = function (id: string, classNames: string[]) {
   if (namespaces[id] !== undefined) {
     classNames.map((className) => {
+      classes[className].parent = id;
       namespaces[id].classes[className] = classes[className];
-      delete classes[className];
-      classCounter--;
     });
   }
 };

packages/mermaid/src/diagrams/class/classDiagram.spec.ts

@@ -1373,9 +1373,54 @@ class Class2
       parser.parse(str);
 
       const testNamespace = parser.yy.getNamespace('Namespace1');
+      const testClasses = parser.yy.getClasses();
       expect(Object.keys(testNamespace.classes).length).toBe(2);
       expect(Object.keys(testNamespace.children).length).toBe(0);
       expect(testNamespace.classes['Class1'].id).toBe('Class1');
+      expect(Object.keys(testClasses).length).toBe(2);
+    });
+
+    it('should add relations between classes of different namespaces', function () {
+      const str = `classDiagram
+      A1 --> B1
+      namespace A {
+        class A1 {
+          +foo : string
+        }
+        class A2 {
+          +bar : int
+        }
+      }
+      namespace B {
+        class B1 {
+          +foo : bool
+        }
+        class B2 {
+          +bar : float
+        }
+      }
+      A2 --> B2`;
+
+      parser.parse(str);
+      const testNamespaceA = parser.yy.getNamespace('A');
+      const testNamespaceB = parser.yy.getNamespace('B');
+      const testClasses = parser.yy.getClasses();
+      const testRelations = parser.yy.getRelations();
+      expect(Object.keys(testNamespaceA.classes).length).toBe(2);
+      expect(testNamespaceA.classes['A1'].members[0]).toBe('+foo : string');
+      expect(testNamespaceA.classes['A2'].members[0]).toBe('+bar : int');
+      expect(Object.keys(testNamespaceB.classes).length).toBe(2);
+      expect(testNamespaceB.classes['B1'].members[0]).toBe('+foo : bool');
+      expect(testNamespaceB.classes['B2'].members[0]).toBe('+bar : float');
+      expect(Object.keys(testClasses).length).toBe(4);
+      expect(testClasses['A1'].parent).toBe('A');
+      expect(testClasses['A2'].parent).toBe('A');
+      expect(testClasses['B1'].parent).toBe('B');
+      expect(testClasses['B2'].parent).toBe('B');
+      expect(testRelations[0].id1).toBe('A1');
+      expect(testRelations[0].id2).toBe('B1');
+      expect(testRelations[1].id1).toBe('A2');
+      expect(testRelations[1].id2).toBe('B2');
     });
   });
 

packages/mermaid/src/diagrams/class/classRenderer-v2.ts

@@ -93,16 +93,15 @@ export const addClasses = function (
   log.info(classes);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  keys.forEach(function (id) {
+  keys
+    .filter((id) => classes[id].parent == parent)
+    .forEach(function (id) {
       const vertex = classes[id];
 
       /**
        * Variable for storing the classes for the vertex
        */
-    let cssClassStr = '';
+      const cssClassStr = vertex.cssClasses.join(' ');
-    if (vertex.cssClasses.length > 0) {
-      cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
-    }
 
       const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
 

packages/mermaid/src/diagrams/class/classTypes.ts

@@ -7,6 +7,7 @@ export interface ClassNode {
   members: string[];
   annotations: string[];
   domId: string;
+  parent?: string;
   link?: string;
   linkTarget?: string;
   haveCallback?: boolean;

packages/mermaid/src/docs/syntax/gantt.md

@@ -22,10 +22,10 @@ gantt
     dateFormat YYYY-MM-DD
     section Section
         A task          :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
-    another task      : 24d
+        another task    :24d
 ```
 
 ## Syntax
@@ -66,7 +66,7 @@ gantt
 It is possible to set multiple dependencies separated by space:
 
 ```mermaid-example
-    gantt
+gantt
     apple :a, 2017-07-20, 1w
     banana :crit, b, 2017-07-23, 1d
     cherry :active, c, after b a, 1d
@@ -88,12 +88,12 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
 
 ```mermaid-example
 gantt
-dateFormat HH:mm
+    dateFormat HH:mm
-axisFormat %H:%M
+    axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
+    Initial milestone : milestone, m1, 17:49, 2m
-taska2 : 10min
+    Task A : 10m
-taska3 : 5min
+    Task B : 5m
-Final milestone : milestone, m2, 18:14, 2min
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ## Setting dates
@@ -214,15 +214,14 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
 ```mermaid
 gantt
     title A Gantt Diagram
-    %% this is a comment
+    %% This is a comment
     dateFormat YYYY-MM-DD
     section Section
         A task          :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
-    another task      : 24d
+        another task    :24d
-
 ```
 
 ## Styling

vite.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
     // TODO: should we move this to a mermaid-core package?
     setupFiles: ['packages/mermaid/src/tests/setup.ts'],
     coverage: {
-      provider: 'istanbul',
+      provider: 'v8',
       reporter: ['text', 'json', 'html', 'lcov'],
       reportsDirectory: './coverage/vitest',
       exclude: ['**/node_modules/**', '**/tests/**', '**/__mocks__/**'],