Merge branch 'develop' of https://github.com/mermaid-js/mermaid into knsv/new-shapes

.cspell/code-terms.txt

@@ -120,6 +120,8 @@ SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
 substr
+SVGG
+SVGSVG
 TAGEND
 TAGSTART
 techn

cypress/platform/knsv2.html

@@ -84,17 +84,20 @@
     <div class="flex">
       <pre id="diagram" class="mermaid">
 ---
-config:
-  look: handDrawn
-  layout: elk
-  elk:
+  title: hello2
+  config:
+    look: handDrawn
+    layout: elk
+    elk:
         nodePlacementStrategy: BRANDES_KOEPF
 ---
-flowchart TB
-    %% A --> C
-    B -- sdf sdf --> C{"Evaluate"}
-    C --> n4["salkdfjh akljd lkasdjf lkashj lksjadf klasdh"]
-    C --> F
+flowchart LR
+  A[Start] --Some text--> B(Continue)
+  B --> C{Evaluate}
+  C -- One --> D[Option 1]
+  C -- Two --> E[Option 2]
+  C -- Three --> F[fa:fa-car Option 3]
+
 
 
 </pre

packages/mermaid-layout-elk/src/render.ts

@@ -6,7 +6,6 @@ import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
 export const render = async (
   data4Layout: LayoutData,
   svg: SVG,
-  element: any,
   {
     common,
     getConfig,
@@ -377,6 +376,7 @@ export const render = async (
 
         // calculate start and end points of the edge, note that the source and target
         // can be modified for shapes that have ports
+        // @ts-ignore TODO: fix this
         const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
         log.debug('abc78 source and target', source, target);
         // Add the edge to the graph
@@ -739,7 +739,7 @@ export const render = async (
 
   // @ts-ignore - ELK is not typed
   const elk = new ELK();
-
+  const element = svg.select('g');
   // Add the arrowheads to the svg
   insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
 

packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts

@@ -2,7 +2,7 @@ import { select } from 'd3';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
 import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';
@@ -35,8 +35,8 @@ export const draw = async function (text: string, id: string, _version: string,
   log.debug('Before getData: ');
   const data4Layout = diag.db.getData() as LayoutData;
   log.debug('Data: ', data4Layout);
-  // Create the root SVG - the element is the div containing the SVG element
-  const { element, svg } = getDiagramElements(id, securityLevel);
+  // Create the root SVG
+  const svg = getDiagramElement(id, securityLevel);
   const direction = getDirection();
 
   data4Layout.type = diag.type;
@@ -53,7 +53,7 @@ export const draw = async function (text: string, id: string, _version: string,
 
   data4Layout.diagramId = id;
   log.debug('REF1:', data4Layout);
-  await render(data4Layout, svg, element);
+  await render(data4Layout, svg);
   const padding = data4Layout.config.flowchart?.padding ?? 8;
   utils.insertTitle(
     svg,

packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

@@ -1,7 +1,7 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
 import { render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';
@@ -55,7 +55,7 @@ export const draw = async function (text: string, id: string, _version: string,
   const data4Layout = diag.db.getData() as LayoutData;
 
   // Create the root SVG - the element is the div containing the SVG element
-  const { element, svg } = getDiagramElements(id, securityLevel);
+  const svg = getDiagramElement(id, securityLevel);
 
   data4Layout.type = diag.type;
   data4Layout.layoutAlgorithm = layout;
@@ -67,10 +67,10 @@ export const draw = async function (text: string, id: string, _version: string,
   data4Layout.markers = ['barb'];
   data4Layout.diagramId = id;
   // console.log('REF1:', data4Layout);
-  await render(data4Layout, svg, element);
+  await render(data4Layout, svg);
   const padding = 8;
   utils.insertTitle(
-    element,
+    svg,
     'statediagramTitleText',
     conf?.titleTopMargin ?? 25,
     diag.db.getDiagramTitle()

packages/mermaid/src/rendering-util/insertElementsForSize.js

@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import { insertNode } from '../dagre-wrapper/nodes.js';
 
-export const getDiagramElements = (id, securityLevel) => {
+export const getDiagramElement = (id, securityLevel) => {
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -15,9 +15,7 @@ export const getDiagramElements = (id, securityLevel) => {
 
   // Run the renderer. This is what draws the final graph.
 
-  // @ts-ignore todo: fix this
-  const element = root.select('#' + id + ' g');
-  return { svg, element };
+  return svg;
 };
 
 export function insertElementsForSize(el, data) {

packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js

@@ -268,7 +268,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
   return { elem, diff };
 };
 
-export const render = async (data4Layout, svg, element) => {
+export const render = async (data4Layout, svg) => {
   const graph = new graphlib.Graph({
     multigraph: true,
     compound: true,
@@ -289,7 +289,7 @@ export const render = async (data4Layout, svg, element) => {
     .setDefaultEdgeLabel(function () {
       return {};
     });
-
+  const element = svg.select('g');
   insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
   clearNodes();
   clearEdges();

packages/mermaid/src/rendering-util/render.ts

@@ -12,7 +12,6 @@ export interface LayoutAlgorithm {
   render(
     layoutData: LayoutData,
     svg: SVG,
-    element: any,
     helpers: InternalHelpers,
     options?: RenderOptions
   ): Promise<void>;
@@ -45,14 +44,14 @@ const registerDefaultLayoutLoaders = () => {
 
 registerDefaultLayoutLoaders();
 
-export const render = async (data4Layout: LayoutData, svg: SVG, element: any) => {
+export const render = async (data4Layout: LayoutData, svg: SVG) => {
   if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
     throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
   }
 
   const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
   const layoutRenderer = await layoutDefinition.loader();
-  return layoutRenderer.render(data4Layout, svg, element, internalHelpers, {
+  return layoutRenderer.render(data4Layout, svg, internalHelpers, {
     algorithm: layoutDefinition.algorithm,
   });
 };