Updated insertNode to pass optional config

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

@@ -33,10 +33,11 @@ export const render = async (
     };
     graph.children.push(child);
     nodeDb[node.id] = child;
+    const config = getConfig();
 
     // Add the element to the DOM
     if (!node.isGroup) {
-      const childNodeEl = await insertNode(nodeEl, node, node.dir);
+      const childNodeEl = await insertNode(nodeEl, node, { config });
       boundingBox = childNodeEl.node().getBBox();
       child.domId = childNodeEl;
       child.width = boundingBox.width;
@@ -50,7 +51,7 @@ export const render = async (
         // @ts-ignore TODO: fix this
         const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
         labelData.width = bbox.width;
-        labelData.wrappingWidth = getConfig().flowchart!.wrappingWidth;
+        labelData.wrappingWidth = config.flowchart!.wrappingWidth;
         // Give some padding for elk
         labelData.height = bbox.height - 2;
         labelData.labelNode = shapeSvg.node();

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

@@ -87,7 +87,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
           // insertCluster(clusters, graph.node(v));
         } else {
           log.info('Node - the non recursive path', v, node.id, node);
-          await insertNode(nodes, graph.node(v), dir);
+          await insertNode(nodes, graph.node(v), { config: siteConfig });
         }
       }
     })

packages/mermaid/src/diagrams/block/renderHelpers.ts

@@ -124,7 +124,8 @@ async function calculateBlockSize(
   }
 
   // Add the element to the DOM to size it
-  const nodeEl = await insertNode(elem, node);
+  const config = getConfig();
+  const nodeEl = await insertNode(elem, node, { config });
   const boundingBox = nodeEl.node().getBBox();
   const obj = db.getBlock(node.id);
   obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0, node: nodeEl };
@@ -138,7 +139,8 @@ export async function insertBlockPositioned(elem: any, block: Block, db: any) {
   // Add the element to the DOM to size it
   const obj = db.getBlock(node.id);
   if (obj.type !== 'space') {
-    await insertNode(elem, node);
+    const config = getConfig();
+    await insertNode(elem, node, { config });
     block.intersect = node?.intersect;
     positionNode(node);
   }

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

@@ -1,5 +1,6 @@
 import { select } from 'd3';
 import { insertNode } from '../dagre-wrapper/nodes.js';
+import { getConfig } from '../diagram-api/diagramAPI.js';
 
 export const getDiagramElement = (id, securityLevel) => {
   let sandboxElement;
@@ -22,20 +23,25 @@ export function insertElementsForSize(el, data) {
   const nodesElem = el.insert('g').attr('class', 'nodes');
   el.insert('g').attr('class', 'edges');
   data.nodes.forEach(async (item) => {
+    const config = getConfig();
     item.shape = 'rect';
-    await insertNode(nodesElem, {
+    await insertNode(
-      ...item,
+      nodesElem,
-      class: 'default flowchart-label',
+      {
-      labelStyle: '',
+        ...item,
-      x: 0,
+        class: 'default flowchart-label',
-      y: 0,
+        labelStyle: '',
-      width: 100,
+        x: 0,
-      rx: 0,
+        y: 0,
-      ry: 0,
+        width: 100,
-      height: 100,
+        rx: 0,
-      shape: 'rect',
+        ry: 0,
-      padding: 8,
+        height: 100,
-    });
+        shape: 'rect',
+        padding: 8,
+      },
+      { config }
+    );
     // Create a new DOM element
     // const element = document.createElement('div');
 

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

@@ -125,7 +125,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
           // insertCluster(clusters, graph.node(v));
         } else {
           log.trace('Node - the non recursive path XAX', v, nodes, graph.node(v), dir);
-          await insertNode(nodes, graph.node(v), dir);
+          await insertNode(nodes, graph.node(v), { config: siteConfig });
         }
       }
     })

packages/mermaid/src/rendering-util/rendering-elements/nodes.js

@@ -9,7 +9,6 @@ import { choice } from './shapes/choice.ts';
 import { note } from './shapes/note.ts';
 import { stadium } from './shapes/stadium.js';
 import { rectWithTitle } from './shapes/rectWithTitle.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { subroutine } from './shapes/subroutine.js';
 import { cylinder } from './shapes/cylinder.js';
 import { circle } from './shapes/circle.js';
@@ -229,7 +228,7 @@ export const shapes = {
 
 const nodeElems = new Map();
 
-export const insertNode = async (elem, node, dir) => {
+export const insertNode = async (elem, node, config) => {
   let newEl;
   let el;
 
@@ -247,15 +246,15 @@ export const insertNode = async (elem, node, dir) => {
   // Add link when appropriate
   if (node.link) {
     let target;
-    if (getConfig().securityLevel === 'sandbox') {
+    if (config.securityLevel === 'sandbox') {
       target = '_top';
     } else if (node.linkTarget) {
       target = node.linkTarget || '_blank';
     }
     newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
-    el = await shapes[node.shape](newEl, node, dir);
+    el = await shapes[node.shape](newEl, node, config);
   } else {
-    el = await shapes[node.shape](elem, node, dir);
+    el = await shapes[node.shape](elem, node, config);
     newEl = el;
   }
   if (node.tooltip) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts

@@ -5,9 +5,13 @@ import type { SVG } from '../../../diagram-api/types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
-import { getConfig } from '../../../config.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const filledCircle = (parent: SVG, node: Node) => {
+export const filledCircle = (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables } }: { config: MermaidConfig }
+) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.label = '';
   node.labelStyle = labelStyles;
@@ -20,7 +24,6 @@ export const filledCircle = (parent: SVG, node: Node) => {
 
   // @ts-ignore - rough is not typed
   const rc = rough.svg(shapeSvg);
-  const { themeVariables } = getConfig();
   const { nodeBorder } = themeVariables;
   const options = userNodeOverrides(node, { fillStyle: 'solid' });
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts

@@ -6,16 +6,21 @@ import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShap
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const iconCircle = async (parent: SVG, node: Node, dir: string) => {
+export const iconCircle = async (
-  const translateHorizontal = dir === 'TB' || dir === 'BT' || dir === 'TD' || dir === 'DT';
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables, flowchart } }: { config: MermaidConfig }
+) => {
+  const translateHorizontal =
+    node.dir === 'TB' || node.dir === 'BT' || node.dir === 'TD' || node.dir === 'DT';
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
   const iconSize = Math.max(assetHeight, assetWidth);
-  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  const defaultWidth = flowchart?.wrappingWidth;
   node.width = Math.max(iconSize, defaultWidth ?? 0);
   const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
     parent,
@@ -27,7 +32,6 @@ export const iconCircle = async (parent: SVG, node: Node, dir: string) => {
   const topLabel = node.pos === 't';
 
   const diameter = iconSize + halfPadding * 2;
-  const { themeVariables } = getConfig();
   const { mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts

@@ -6,16 +6,20 @@ import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShap
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const iconRounded = async (parent: SVG, node: Node) => {
+export const iconRounded = async (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables, flowchart } }: { config: MermaidConfig }
+) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
   const iconSize = Math.max(assetHeight, assetWidth);
-  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  const defaultWidth = flowchart?.wrappingWidth;
   node.width = Math.max(iconSize, defaultWidth ?? 0);
   const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
     parent,
@@ -28,7 +32,6 @@ export const iconRounded = async (parent: SVG, node: Node) => {
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { themeVariables } = getConfig();
   const { mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
@@ -58,7 +61,7 @@ export const iconRounded = async (parent: SVG, node: Node) => {
     const iconHeight = iconBBox.height;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})`
+      `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
     );
   }
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts

@@ -6,15 +6,19 @@ import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShap
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const iconSquare = async (parent: SVG, node: Node) => {
+export const iconSquare = async (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables, flowchart } }: { config: MermaidConfig }
+) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
   const iconSize = Math.max(assetHeight, assetWidth);
-  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  const defaultWidth = flowchart?.wrappingWidth;
   node.width = Math.max(iconSize, defaultWidth ?? 0);
   const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
     parent,
@@ -27,7 +31,6 @@ export const iconSquare = async (parent: SVG, node: Node) => {
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { themeVariables } = getConfig();
   const { mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts

@@ -4,13 +4,16 @@ import type { Node } from '../../types.js';
 import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const stateEnd = (parent: SVG, node: Node) => {
+export const stateEnd = (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables } }: { config: MermaidConfig }
+) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const { cssStyles } = node;
-  const { themeVariables } = getConfig();
   const { lineColor } = themeVariables;
   const shapeSvg = parent
     .insert('g')

packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts

@@ -4,10 +4,13 @@ import type { Node } from '../../types.js';
 import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill } from './handDrawnShapeStyles.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const stateStart = (parent: SVG, node: Node) => {
+export const stateStart = (
-  const { themeVariables } = getConfig();
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables } }: { config: MermaidConfig }
+) => {
   const { lineColor } = themeVariables;
 
   const shapeSvg = parent