Small fix

.changeset/gold-ducks-sort.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Proper separation between strings and markdown strings

cypress/integration/rendering/flowchart.spec.js

@@ -895,7 +895,7 @@ graph TD
     imgSnapshotTest(
       `
       graph TD
-        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
+        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
         hello --> default
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -917,24 +917,4 @@ graph TD
       }
     );
   });
-  it('68: should be able to render string and markdown labels (#5824)', () => {
-    imgSnapshotTest(
-      `
-flowchart TB
-    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
-    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
-    subgraph subgraph1["\`How to fix **fix**\`"]
-        broken --> B["B"]
-    end
-    githost["Github, Gitlab, BitBucket, etc."]
-    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["1."]
-    b["- x"]
-    `,
-      {
-        flowchart: { htmlLabels: true },
-        securityLevel: 'loose',
-      }
-    );
-  });
 });

cypress/platform/knsv2.html

@@ -144,7 +144,7 @@ config:
       D-->I
       D-->I
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -185,19 +185,19 @@ flowchart LR
     </pre>
     <pre id="diagram4" class="mermaid">
 ---
-title: https://github.com/mermaid-js/mermaid/issues/5824
+config:
+  layout: elk
 ---
-%% 6048, 5824
-flowchart TB
-    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"`<**1**1`"--> fine["No bug"]
-    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
-    subgraph subgraph1["`How to fix **fix**`"]
-        broken --> B["B"]
-    end
-    githost["Github, Gitlab, BitBucket, etc."]
-    githost2["`Github, Gitlab, BitBucket, etc.`"]
-    a["1."]
-    b["- x"]
+flowchart LR
+ subgraph s1["Untitled subgraph"]
+        n1["Evaluate"]
+        n2["Option 1"]
+  end
+    n1 -- One --> n2
+
+
+
+
     </pre>
     <pre id="diagram4" class="mermaid">
 ---

packages/mermaid/src/diagrams/class/classRenderer-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 { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/getDiagramElement.js';
 import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -896,7 +896,6 @@ const addNodeFromVertex = (
     const baseNode = {
       id: vertex.id,
       label: vertex.text,
-      labelType: vertex.labelType,
       labelStyle: '',
       parentId,
       padding: config.flowchart?.padding || 8,
@@ -1003,7 +1002,6 @@ export const getData = () => {
       end: rawEdge.end,
       type: rawEdge.type ?? 'normal',
       label: rawEdge.text,
-      labelType: rawEdge.labelType,
       labelpos: 'c',
       thickness: rawEdge.stroke,
       minlen: rawEdge.length,

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 { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/getDiagramElement.js';
 import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';

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 { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/getDiagramElement.js';
 import { render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';

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

@@ -0,0 +1,20 @@
+import type { SVG } from '../diagram-api/types.js';
+import { getConfig } from '../diagram-api/diagramAPI.js';
+import type { LayoutData } from './types.js';
+import { insertNode } from './rendering-elements/nodes.js';
+
+export async function insertElementsForSize(el: SVG, data: LayoutData) {
+  const nodesElem = el.insert('g').attr('class', 'nodes');
+  el.insert('g').attr('class', 'edges');
+  for (const item of data.nodes) {
+    if (!item.isGroup) {
+      const node = item;
+      const config = getConfig();
+      const newNode = await insertNode(nodesElem, node, { config, dir: node.dir });
+      const boundingBox = newNode.node()!.getBBox();
+      item.domId = newNode.attr('id');
+      item.width = boundingBox.width;
+      item.height = boundingBox.height;
+    }
+  }
+}

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

@@ -3,6 +3,7 @@ import type { InternalHelpers } from '../internals.js';
 import { internalHelpers } from '../internals.js';
 import { log } from '../logger.js';
 import type { LayoutData } from './types.js';
+import { insertElementsForSize } from './insertElementsForSize.js';
 
 export interface RenderOptions {
   algorithm?: string;
@@ -51,6 +52,8 @@ export const render = async (data4Layout: LayoutData, svg: SVG) => {
 
   const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
   const layoutRenderer = await layoutDefinition.loader();
+  // Add the bounding box to the layout so that the render can run
+  await insertElementsForSize(svg, data4Layout);
   return layoutRenderer.render(data4Layout, svg, internalHelpers, {
     algorithm: layoutDefinition.algorithm,
   });

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

@@ -26,16 +26,12 @@ export const getLabelStyles = (styleArray) => {
 export const insertEdgeLabel = async (elem, edge) => {
   let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
 
-  const labelElement =
-    edge.labelType === 'markdown'
-      ? await createText(elem, edge.label, {
-          style: getLabelStyles(edge.labelStyle),
-          useHtmlLabels,
-          addSvgBackground: true,
-          isNode: false,
-        })
-      : await createLabel(edge.label, getLabelStyles(edge.labelStyle), undefined, false);
-
+  const labelElement = await createText(elem, edge.label, {
+    style: getLabelStyles(edge.labelStyle),
+    useHtmlLabels,
+    addSvgBackground: true,
+    isNode: false,
+  });
   log.info('abc82', edge, edge.labelType);
 
   // Create outer g, edgeLabel, this will be positioned after graph layout

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

@@ -1,4 +1,3 @@
-import createLabel from '../createLabel.js';
 import { createText } from '../../createText.js';
 import type { Node } from '../../types.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
@@ -41,26 +40,14 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
     label = typeof node.label === 'string' ? node.label : node.label[0];
   }
 
-  let text;
-  if (node.labelType !== 'string') {
-    text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
-      useHtmlLabels,
-      width: node.width || getConfig().flowchart?.wrappingWidth,
-      // @ts-expect-error -- This is currently not used. Should this be `classes` instead?
-      cssClasses: 'markdown-node-label',
-      style: node.labelStyle,
-      addSvgBackground: !!node.icon || !!node.img,
-    });
-  } else {
-    const labelElement = await createLabel(
-      sanitizeText(decodeEntities(label), getConfig()),
-      node.labelStyle,
-      false,
-      true
-    );
-    text = labelEl.node()?.appendChild(labelElement);
-  }
-
+  const text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
+    useHtmlLabels,
+    width: node.width || getConfig().flowchart?.wrappingWidth,
+    // @ts-expect-error -- This is currently not used. Should this be `classes` instead?
+    cssClasses: 'markdown-node-label',
+    style: node.labelStyle,
+    addSvgBackground: !!node.icon || !!node.img,
+  });
   // Get the size of the label
   let bbox = text.getBBox();
   const halfPadding = (node?.padding ?? 0) / 2;