Merge branch 'develop' into pr/chadfawcett/4825

* develop:
  chore: Fix type in 'getLineFunctionsWithOffset'
  refactor: Add getLineFunctionsWithOffset function
  refactor: Move EdgeData to types
  fix: PointStart marker refX
  chore(deps): update all patch dependencies
  refactor: Fix typings in utils.ts
  chore: Add @internal to createCSSStyles
  chore: Bump version
  refactor: Remove unused variables
  fix: mermaid-js#4818 support `getClasses` in external diagrams.

cSpell.json

@@ -22,6 +22,7 @@
     "brkt",
     "brolin",
     "brotli",
+    "catmull",
     "città",
     "classdef",
     "codedoc",

docs/config/setup/interfaces/mermaidAPI.ParseOptions.md

@@ -16,4 +16,4 @@
 
 #### Defined in
 
-[mermaidAPI.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L76)
+[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59)

docs/config/setup/interfaces/mermaidAPI.RenderResult.md

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L96)
+[mermaidAPI.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L79)
 
 ---
 
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:86](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L86)
+[mermaidAPI.ts:69](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L69)

docs/config/setup/modules/mermaidAPI.md

@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
+[mermaidAPI.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L63)
 
 ## Variables
 
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:662](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L662)
+[mermaidAPI.ts:641](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L641)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:318](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L318)
+[mermaidAPI.ts:299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L299)
 
 ---
 
@@ -153,13 +153,13 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:264](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L264)
+[mermaidAPI.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L245)
 
 ---
 
 ### createCssStyles
 
-▸ **createCssStyles**(`config`, `graphType`, `classDefs?`): `string`
+▸ **createCssStyles**(`config`, `classDefs?`): `string`
 
 Create the user styles
 
@@ -168,7 +168,6 @@ Create the user styles
 | Name        | Type                                                                | Description                                                                                                               |
 | :---------- | :------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------ |
 | `config`    | `MermaidConfig`                                                     | configuration that has style and theme settings to use                                                                    |
-| `graphType` | `string`                                                            | used for checking if classDefs should be applied                                                                          |
 | `classDefs` | `undefined` \| `null` \| `Record`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
 
 #### Returns
@@ -179,7 +178,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L193)
+[mermaidAPI.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L175)
 
 ---
 
@@ -189,20 +188,20 @@ the string with all the user styles
 
 #### Parameters
 
-| Name        | Type                                       |
-| :---------- | :----------------------------------------- |
-| `config`    | `MermaidConfig`                            |
-| `graphType` | `string`                                   |
-| `classDefs` | `Record`<`string`, `DiagramStyleClassDef`> |
-| `svgId`     | `string`                                   |
+| Name        | Type                                                      |
+| :---------- | :-------------------------------------------------------- |
+| `config`    | `MermaidConfig`                                           |
+| `graphType` | `string`                                                  |
+| `classDefs` | `undefined` \| `Record`<`string`, `DiagramStyleClassDef`> |
+| `svgId`     | `string`                                                  |
 
 #### Returns
 
 `string`
 
 #### Defined in
 
-[mermaidAPI.ts:241](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L241)
+[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
 
 ---
 
@@ -229,7 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:177](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L177)
+[mermaidAPI.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L160)
 
 ---
 
@@ -249,7 +248,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L163)
+[mermaidAPI.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L146)
 
 ---
 
@@ -269,7 +268,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:134](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L134)
+[mermaidAPI.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L117)
 
 ---
 
@@ -295,7 +294,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:295](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L295)
+[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
 
 ---
 
@@ -320,4 +319,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:368](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L368)
+[mermaidAPI.ts:349](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L349)

package.json

@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].5",
   "keywords": [
     "diagram",
     "markdown",
@@ -19,6 +19,7 @@
     "build:mermaid": "pnpm build:vite --mermaid",
     "build:viz": "pnpm build:mermaid --visualize",
     "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
+    "build:types:watch": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly --watch",
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.4.0",
+  "version": "10.5.0-alpha.1",
   "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/dagre-wrapper/edges.js

@@ -5,6 +5,7 @@ import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../config.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
+import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
 
 let edgeLabels = {};
 let terminalLabels = {};
@@ -368,20 +369,6 @@ const cutPathAtIntersect = (_points, boundryNode) => {
   return points;
 };
 
-/**
- * Calculate the deltas and angle between two points
- * @param {{x: number, y:number}} point1
- * @param {{x: number, y:number}} point2
- * @returns {{angle: number, deltaX: number, deltaY: number}}
- */
-function calculateDeltaAndAngle(point1, point2) {
-  const [x1, y1] = [point1.x, point1.y];
-  const [x2, y2] = [point2.x, point2.y];
-  const deltaX = x2 - x1;
-  const deltaY = y2 - y1;
-  return { angle: Math.atan(deltaY / deltaX), deltaX, deltaY };
-}
-
 export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph, id) {
   let points = edge.points;
   let pointsHasChanged = false;
@@ -456,56 +443,8 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
     curve = edge.curve;
   }
 
-  // We need to draw the lines a bit shorter to avoid drawing
-  // under any transparent markers.
-  // The offsets are calculated from the markers' dimensions.
-  const markerOffsets = {
-    aggregation: 18,
-    extension: 18,
-    composition: 18,
-    dependency: 6,
-    lollipop: 13.5,
-    arrow_point: 5.3,
-  };
-
-  const lineFunction = line()
-    .x(function (d, i, data) {
-      let offset = 0;
-      if (i === 0 && Object.hasOwn(markerOffsets, edge.arrowTypeStart)) {
-        // Handle first point
-        // Calculate the angle and delta between the first two points
-        const { angle, deltaX } = calculateDeltaAndAngle(data[0], data[1]);
-        // Calculate the offset based on the angle and the marker's dimensions
-        offset = markerOffsets[edge.arrowTypeStart] * Math.cos(angle) * (deltaX >= 0 ? 1 : -1) || 0;
-      } else if (i === data.length - 1 && Object.hasOwn(markerOffsets, edge.arrowTypeEnd)) {
-        // Handle last point
-        // Calculate the angle and delta between the last two points
-        const { angle, deltaX } = calculateDeltaAndAngle(
-          data[data.length - 1],
-          data[data.length - 2]
-        );
-        offset = markerOffsets[edge.arrowTypeEnd] * Math.cos(angle) * (deltaX >= 0 ? 1 : -1) || 0;
-      }
-      return d.x + offset;
-    })
-    .y(function (d, i, data) {
-      // Same handling as X above
-      let offset = 0;
-      if (i === 0 && Object.hasOwn(markerOffsets, edge.arrowTypeStart)) {
-        const { angle, deltaY } = calculateDeltaAndAngle(data[0], data[1]);
-        offset =
-          markerOffsets[edge.arrowTypeStart] * Math.abs(Math.sin(angle)) * (deltaY >= 0 ? 1 : -1);
-      } else if (i === data.length - 1 && Object.hasOwn(markerOffsets, edge.arrowTypeEnd)) {
-        const { angle, deltaY } = calculateDeltaAndAngle(
-          data[data.length - 1],
-          data[data.length - 2]
-        );
-        offset =
-          markerOffsets[edge.arrowTypeEnd] * Math.abs(Math.sin(angle)) * (deltaY >= 0 ? 1 : -1);
-      }
-      return d.y + offset;
-    })
-    .curve(curve);
+  const { x, y } = getLineFunctionsWithOffset(edge);
+  const lineFunction = line().x(x).y(y).curve(curve);
 
   // Construct stroke classes based on properties
   let strokeClasses;

packages/mermaid/src/dagre-wrapper/markers.js

@@ -176,7 +176,7 @@ const point = (elem, type, id) => {
     .attr('id', id + '_' + type + '-pointStart')
     .attr('class', 'marker ' + type)
     .attr('viewBox', '0 0 10 10')
-    .attr('refX', 0)
+    .attr('refX', 4.5)
     .attr('refY', 5)
     .attr('markerUnits', 'userSpaceOnUse')
     .attr('markerWidth', 12)

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -43,7 +43,11 @@ export const addDiagrams = () => {
         },
       },
       styles: {}, // should never be used
-      renderer: {}, // should never be used
+      renderer: {
+        draw: () => {
+          // should never be used
+        },
+      },
       parser: {
         parser: { yy: {} },
         parse: () => {

packages/mermaid/src/diagram-api/diagramAPI.spec.ts

@@ -41,7 +41,11 @@ describe('DiagramAPI', () => {
           },
           parser: { yy: {} },
         },
-        renderer: {},
+        renderer: {
+          draw: () => {
+            // no-op
+          },
+        },
         styles: {},
       },
       detector

packages/mermaid/src/diagram-api/types.ts

@@ -39,9 +39,26 @@ export interface DiagramDB {
   bindFunctions?: (element: Element) => void;
 }
 
+// This is what is returned from getClasses(...) methods.
+// It is slightly renamed to ..StyleClassDef instead of just ClassDef because "class" is a greatly ambiguous and overloaded word.
+// It makes it clear we're working with a style class definition, even though defining the type is currently difficult.
+export interface DiagramStyleClassDef {
+  id: string;
+  styles?: string[];
+  textStyles?: string[];
+}
+
+export interface DiagramRenderer {
+  draw: DrawDefinition;
+  getClasses?: (
+    text: string,
+    diagram: Pick<DiagramDefinition, 'db'>
+  ) => Record<string, DiagramStyleClassDef>;
+}
+
 export interface DiagramDefinition {
   db: DiagramDB;
-  renderer: any;
+  renderer: DiagramRenderer;
   parser: ParserDefinition;
   styles?: any;
   init?: (config: MermaidConfig) => void;
@@ -84,7 +101,7 @@ export type DrawDefinition = (
   id: string,
   version: string,
   diagramObject: Diagram
-) => void;
+) => void | Promise<void>;
 
 export interface ParserDefinition {
   parse: (text: string) => void;

packages/mermaid/src/diagram.spec.ts

@@ -34,7 +34,11 @@ describe('diagram detection', () => {
                 yy: {},
               },
             },
-            renderer: {},
+            renderer: {
+              draw: () => {
+                // no-op
+              },
+            },
             styles: {},
           },
         })

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

@@ -8,7 +8,8 @@ import utils from '../../utils.js';
 import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import common from '../common/common.js';
-import type { ClassRelation, ClassNote, ClassMap, EdgeData, NamespaceMap } from './classTypes.js';
+import type { ClassRelation, ClassNote, ClassMap, NamespaceMap } from './classTypes.js';
+import type { EdgeData } from '../../types.js';
 
 const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
 

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

@@ -137,24 +137,6 @@ export interface ClassNote {
   text: string;
 }
 
-export interface EdgeData {
-  arrowheadStyle?: string;
-  labelpos?: string;
-  labelType?: string;
-  label?: string;
-  classes: string;
-  pattern: string;
-  id: string;
-  arrowhead: string;
-  startLabelRight: string;
-  endLabelLeft: string;
-  arrowTypeStart: string;
-  arrowTypeEnd: string;
-  style: string;
-  labelStyle: string;
-  curve: any;
-}
-
 export type ClassRelation = {
   id1: string;
   id2: string;