Merge branch 'master' into develop

* master:
  v10.0.2
  fix: dayjs import extension
  Setting version to 10.0.1
  #4168 Adding the correct offset for the edges
  Updated import of cytoscape for consistent behavior
  Use cytoscape esm
  Revert "chore: Defer elk loading"
  Revert "Split cytoscape"
  fix: Class with members and styles

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mermaid-monorepo",
   "private": true,
-  "version": "9.4.0",
+  "version": "10.0.2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "packageManager": "pnpm@7.27.0",

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.0.0",
+  "version": "10.0.2",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

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

@@ -190,6 +190,37 @@ describe('class diagram, ', function () {
       parser.parse(str);
     });
 
+    it('should handle cssClass shorthand with members', () => {
+      parser.parse(`classDiagram-v2
+      class Class10:::exClass2 {
+        int[] id
+        List~int~ ids
+        test(List~int~ ids) List~bool~
+        testArray() bool[]
+      }`);
+
+      expect(classDb.getClass('Class10')).toMatchInlineSnapshot(`
+        {
+          "annotations": [],
+          "cssClasses": [
+            "exClass2",
+          ],
+          "domId": "classId-Class10-27",
+          "id": "Class10",
+          "label": "Class10",
+          "members": [
+            "int[] id",
+            "List~int~ ids",
+          ],
+          "methods": [
+            "test(List~int~ ids) List~bool~",
+            "testArray() bool[]",
+          ],
+          "type": "",
+        }
+      `);
+    });
+
     it('should handle method statements', function () {
       const str =
         'classDiagram\n' +
@@ -1023,6 +1054,7 @@ C1 -->  C2
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
       expect(c1.cssClasses.length).toBe(1);
+      expect(c1.members[0]).toBe('+member1');
       expect(c1.cssClasses[0]).toBe('styleClass');
     });
 
@@ -1038,6 +1070,7 @@ cssClass "C1" styleClass
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
       expect(c1.cssClasses.length).toBe(1);
+      expect(c1.members[0]).toBe('+member1');
       expect(c1.cssClasses[0]).toBe('styleClass');
     });
 

packages/mermaid/src/diagrams/class/parser/classDiagram.jison

@@ -283,7 +283,7 @@ classStatement
     : classIdentifier                                    
     | classIdentifier STYLE_SEPARATOR alphaNumToken      {yy.setCssClass($1, $3);}
     | classIdentifier STRUCT_START members STRUCT_STOP   {yy.addMembers($1,$3);}
-    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$3);}
+    | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$5);}
     ;
 
 classIdentifier

packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js

@@ -9,8 +9,8 @@ import { log } from '../../../logger';
 import { setupGraphViewbox } from '../../../setupGraphViewbox';
 import common, { evaluate } from '../../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../../utils';
-
-let elk;
+import ELK from 'elkjs/lib/elk.bundled.js';
+const elk = new ELK();
 
 const portPos = {};
 
@@ -371,6 +371,10 @@ const getEdgeStartEndPoint = (edge, dir) => {
   let source = edge.start;
   let target = edge.end;
 
+  // Save the original source and target
+  const sourceId = source;
+  const targetId = target;
+
   const startNode = nodeDb[source];
   const endNode = nodeDb[target];
 
@@ -387,7 +391,7 @@ const getEdgeStartEndPoint = (edge, dir) => {
   }
 
   // Add the edge to the graph
-  return { source, target };
+  return { source, target, sourceId, targetId };
 };
 
 /**
@@ -530,14 +534,17 @@ export const addEdges = function (edges, diagObj, graph, svg) {
 
     const labelEl = insertEdgeLabel(labelsEl, edgeData);
 
-    // calculate start and end points of the edge
-    const { source, target } = getEdgeStartEndPoint(edge, dir);
+    // calculate start and end points of the edge, note that the source and target
+    // can be modified for shapes that have ports
+    const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
     log.debug('abc78 source and target', source, target);
     // Add the edge to the graph
     graph.edges.push({
       id: 'e' + edge.start + edge.end,
       sources: [source],
       targets: [target],
+      sourceId,
+      targetId,
       labelEl: labelEl,
       labels: [
         {
@@ -698,7 +705,7 @@ const calcOffset = function (src, dest, parentLookupDb) {
 };
 
 const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) {
-  const offset = calcOffset(edge.sources[0], edge.targets[0], parentLookupDb);
+  const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb);
 
   const src = edge.sections[0].startPoint;
   const dest = edge.sections[0].endPoint;
@@ -765,10 +772,6 @@ const insertChildren = (nodeArray, parentLookupDb) => {
  */
 
 export const draw = async function (text, id, _version, diagObj) {
-  if (!elk) {
-    const ELK = (await import('elkjs/lib/elk.bundled.js')).default;
-    elk = new ELK();
-  }
   // Add temporary render element
   diagObj.db.clear();
   nodeDb = {};

packages/mermaid/src/diagrams/gantt/ganttDb.js

@@ -1,8 +1,8 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import dayjs from 'dayjs';
-import dayjsIsoWeek from 'dayjs/plugin/isoWeek';
-import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat';
-import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat';
+import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js';
+import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js';
+import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js';
 import { log } from '../../logger';
 import * as configApi from '../../config';
 import utils from '../../utils';

packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js

@@ -4,9 +4,13 @@ import { log } from '../../logger';
 import { getConfig } from '../../config';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
 import svgDraw from './svgDraw';
+import cytoscape from 'cytoscape/dist/cytoscape.umd.js';
+import coseBilkent from 'cytoscape-cose-bilkent';
 import * as db from './mindmapDb';
 
-let cytoscape;
+// Inject the layout algorithm into cytoscape
+cytoscape.use(coseBilkent);
+
 /**
  * @param {any} svg The svg element to draw the diagram onto
  * @param {object} mindmap The mindmap data and hierarchy
@@ -89,14 +93,7 @@ function addNodes(mindmap, cy, conf, level) {
  * @param conf
  * @param cy
  */
-async function layoutMindmap(node, conf) {
-  if (!cytoscape) {
-    cytoscape = (await import('cytoscape')).default;
-    const coseBilkent = (await import('cytoscape-cose-bilkent')).default;
-    // Inject the layout algorithm into cytoscape
-    cytoscape.use(coseBilkent);
-  }
-
+function layoutMindmap(node, conf) {
   return new Promise((resolve) => {
     // Add temporary render element
     const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');