From f27ca07371f79b3a7df4a9d3b0123f7ae58982a8 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 27 Nov 2024 12:38:08 +0100 Subject: [PATCH 1/3] Adding back create label for the cases where you do not want markdown text --- .../integration/rendering/flowchart.spec.js | 22 +++++++++++++- cypress/platform/knsv2.html | 28 +++++++++--------- .../mermaid/src/diagrams/flowchart/flowDb.ts | 2 ++ .../rendering-elements/edges.js | 16 ++++++---- .../rendering-elements/shapes/util.ts | 29 ++++++++++++++----- 5 files changed, 68 insertions(+), 29 deletions(-) diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index d3a83ae5f2..ea24158bf5 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/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,4 +917,24 @@ graph TD } ); }); + it('68: should be able to 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', + } + ); + }); }); diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 7ec666c1a9..713e76b89f 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -116,7 +116,7 @@ -
+    
 ---
 config:
   layout: elk
@@ -155,21 +155,21 @@
     n8@{ shape: rect}
 
     
-
+    
 ---
-config:
-  layout: elk
+title: https://github.com/mermaid-js/mermaid/issues/5824
 ---
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-  end
-    n1 -- One --> n2
-
-
-
-
+%% 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"]
     
 ---
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index 1dbc789c92..9f09dce31c 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -896,6 +896,7 @@ const addNodeFromVertex = (
     const baseNode = {
       id: vertex.id,
       label: vertex.text,
+      labelType: vertex.labelType,
       labelStyle: '',
       parentId,
       padding: config.flowchart?.padding || 8,
@@ -1002,6 +1003,7 @@ export const getData = () => {
       end: rawEdge.end,
       type: rawEdge.type ?? 'normal',
       label: rawEdge.text,
+      labelType: rawEdge.labelType,
       labelpos: 'c',
       thickness: rawEdge.stroke,
       minlen: rawEdge.length,
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index a6a7a55f77..e65fa0c65e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -26,12 +26,16 @@ export const getLabelStyles = (styleArray) => {
 export const insertEdgeLabel = async (elem, edge) => {
   let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
 
-  const labelElement = await createText(elem, edge.label, {
-    style: getLabelStyles(edge.labelStyle),
-    useHtmlLabels,
-    addSvgBackground: true,
-    isNode: false,
-  });
+  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);
+
   log.info('abc82', edge, edge.labelType);
 
   // Create outer g, edgeLabel, this will be positioned after graph layout
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
index 52471ecc07..ac6dfddbfc 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
@@ -1,3 +1,4 @@
+import createLabel from '../createLabel.js';
 import { createText } from '../../createText.js';
 import type { Node } from '../../types.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
@@ -40,14 +41,26 @@ export const labelHelper = async (
     label = typeof node.label === 'string' ? node.label : node.label[0];
   }
 
-  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,
-  });
+  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);
+  }
+
   // Get the size of the label
   let bbox = text.getBBox();
   const halfPadding = (node?.padding ?? 0) / 2;

From c7880d728132e9e4af7cf699953273ab75aa0175 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 27 Nov 2024 13:02:36 +0100
Subject: [PATCH 2/3] Adding changeset

---
 .changeset/gold-ducks-sort.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gold-ducks-sort.md

diff --git a/.changeset/gold-ducks-sort.md b/.changeset/gold-ducks-sort.md
new file mode 100644
index 0000000000..b515eeaf8a
--- /dev/null
+++ b/.changeset/gold-ducks-sort.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Proper separation between strings and markdown strings

From 468b6a55b681b296c566ee801bb66ef3af516b52 Mon Sep 17 00:00:00 2001
From: Justin Greywolf 
Date: Mon, 2 Dec 2024 14:43:55 -0800
Subject: [PATCH 3/3] Update cypress/integration/rendering/flowchart.spec.js

Co-authored-by: Sidharth Vinod 
---
 cypress/integration/rendering/flowchart.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index ea24158bf5..a927c136e1 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -917,7 +917,7 @@ graph TD
       }
     );
   });
-  it('68: should be able to string and markdown labels (#5824)', () => {
+  it('68: should be able to render string and markdown labels (#5824)', () => {
     imgSnapshotTest(
       `
 flowchart TB