Merge pull request #7276 from mermaid-js/markdown-specific-changes

Fix non-markdown labels in flowcharts being treated like markdown

Author: darshanr0107

.changeset/curvy-cases-battle.md

@@ -0,0 +1,8 @@
+---
+'mermaid': patch
+---
+
+fix: respect `markdownAutoWrap: false` to prevent text auto-wrapping in flowchart markdown labels with `htmlLabels` enabled.
+
+Markdown labels with `markdownAutoWrap: false, htmlLabels: false` set doesn't work
+correctly.

.changeset/swift-cloths-run.md

@@ -0,0 +1,29 @@
+---
+'mermaid': patch
+---
+
+fix: Restore proper rendering of plain text flowchart labels without auto line-wrapping
+
+This fix restores backwards compatibility with Mermaid v10 by ensuring that plain text labels in flowcharts are rendered correctly. In Mermaid v11, all labels were incorrectly being treated as markdown by default, which caused issues with text wrapping, multiline breaks, and backwards compatibility.
+
+**What changed:**
+
+- Plain text labels in flowcharts (without markdown syntax) now render as regular text
+  - For node labels and edge labels, these will line-wrap automatically. Although this isn't backwards compatible with v10, we think this is a minor change and it's worth keeping to avoid too many changes from diagrams created from v11 onwards.
+  - Plain text labels in other diagrams will continue to not line wrap.
+- Plain text labels with `\n` characters now correctly create line breaks
+- Plain text that looks like markdown (e.g., "1.", "- x") is no longer misinterpreted
+
+**If you want markdown formatting:**
+You can still use markdown in your flowchart labels by using the proper markdown syntax. Wrap your markdown text with double quotes and backticks:
+``node["`_markdown_ **text**`"]``
+
+Example:
+
+````markdown
+```mermaid
+flowchart TD
+    plain["Plain text\nwith manual line break"]
+    markdown["`This is a **markdown** _label_ that wraps and doesn't replace \n with newlines`"]
+```
+````

cypress/integration/rendering/flowchart-v2.spec.js

@@ -1186,8 +1186,8 @@ end
     end
     githost["Github, Gitlab, BitBucket, etc."]
     githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["1."]
-    b["- x"]
+    a["\`1.\`"]
+    b["\`- x\`"]
       `;
 
     it('should render raw strings', () => {
@@ -1211,4 +1211,32 @@ class link myClass
 `
     );
   });
+
+  describe('Edge label autowrapping', () => {
+    it('should wrap edge labels', () => {
+      imgSnapshotTest(
+        [
+          {
+            markdownAutoWrap: true,
+            htmlLabels: true,
+          },
+          { markdownAutoWrap: true, htmlLabels: false },
+          { markdownAutoWrap: false, htmlLabels: true },
+          // TODO: currently broken
+          // {markdownAutoWrap: false, htmlLabels: false},
+        ].map(
+          ({ markdownAutoWrap, htmlLabels }) => `---
+config: ${JSON.stringify({ markdownAutoWrap, htmlLabels })}
+title: Testing with ${JSON.stringify({ markdownAutoWrap, htmlLabels })}
+---
+flowchart TD
+    A["This is a really long line of plain text that will autowrap and support \\n newlines too."]    
+    B["\`This is a really long line of **markdown** text that will autowrap, unless markdownAutoWrap:false is set.\`"]
+    A -- "Plain text **labels** in flowcharts will autowrap,like node labels. \\n Newline characters work too." --> B
+    B -- "\`**Markdown** edge labels will autowrap, unless markdownAutoWrap: false is set\`" --> C
+`
+        )
+      );
+    });
+  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -1004,3 +1004,48 @@ graph TD
     );
   });
 });
+it('#5824: should be able to render string and markdown labels', () => {
+  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',
+    }
+  );
+});
+it('69: should render subgraphs with adhoc list headings', () => {
+  imgSnapshotTest(
+    `
+    graph TB
+      subgraph "1. first"
+        a1-->a2
+      end
+      subgraph 2. second
+        b1-->b2
+      end
+      `,
+    { fontFamily: 'courier' }
+  );
+});
+it('70: should render subgraphs with markdown headings', () => {
+  imgSnapshotTest(
+    `
+    graph TB
+      subgraph "\`**strong**\`"
+        a1-->a2
+      end
+      `,
+    { fontFamily: 'courier' }
+  );
+});

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

@@ -10,15 +10,15 @@
 
 # Interface: ParseOptions
 
-Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
+Defined in: [packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L90)
 
 ## Properties
 
 ### suppressErrors?
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L94)
+Defined in: [packages/mermaid/src/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L95)
 
 If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
 The `parseError` function will not be called.

docs/config/setup/mermaid/interfaces/ParseResult.md

@@ -10,15 +10,15 @@
 
 # Interface: ParseResult
 
-Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L97)
+Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
 
 ## Properties
 
 ### config
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/types.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L105)
+Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)
 
 The config passed as YAML frontmatter or directives
 
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L101)
+Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.

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

@@ -10,15 +10,15 @@
 
 # Interface: RenderResult
 
-Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L115)
+Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116)
 
 ## Properties
 
 ### bindFunctions()?
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L133)
+Defined in: [packages/mermaid/src/types.ts:134](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L134)
 
 Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L123)
+Defined in: [packages/mermaid/src/types.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L124)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.
 
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 > **svg**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L119)
+Defined in: [packages/mermaid/src/types.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L120)
 
 The svg code for the rendered graph.

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

@@ -21,27 +21,32 @@ export const clear = () => {
 export const insertEdgeLabel = async (elem, edge) => {
   const config = getConfig();
   const useHtmlLabels = getEffectiveHtmlLabels(config);
-  // Create the actual text element
-  const labelElement =
-    edge.labelType === 'markdown'
-      ? // TODO: the createText function returns a `Promise`, so do we need an wait here?
-        createText(
-          elem,
-          edge.label,
-          {
-            style: edge.labelStyle,
-            useHtmlLabels,
-            addSvgBackground: true,
-          },
-          config
-        )
-      : await createLabel(elem, edge.label, edge.labelStyle);
 
   // Create outer g, edgeLabel, this will be positioned after graph layout
   const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');
 
   // Create inner g, label, this will be positioned now for centering the text
   const label = edgeLabel.insert('g').attr('class', 'label');
+
+  // Create the actual text element
+  const isMarkdown = edge.labelType === 'markdown';
+  const labelElement = await createText(
+    elem,
+    edge.label,
+    {
+      style: edge.labelStyle,
+      useHtmlLabels,
+      // TODO: The old code only set addSvgBackground when using markdown, but
+      // this function is only used by block diagrams which never use markdown.
+      addSvgBackground: isMarkdown,
+      isNode: false,
+      markdown: isMarkdown,
+      // If using markdown, wrap using default width
+      width: isMarkdown ? undefined : Number.POSITIVE_INFINITY,
+    },
+    config
+  );
+
   label.node().appendChild(labelElement);
 
   // Center the label

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

@@ -91,6 +91,17 @@ const getStyles = (options: BlockChartStyleOptions) =>
 
   .edgeLabel {
     background-color: ${options.edgeLabelBackground};
+    /*
+     * This is for backward compatibility with existing code that didn't
+     * add a \`<p>\` around edge labels.
+     *
+     * TODO: We should probably remove this in a future release.
+     */
+    p {
+      margin: 0;
+      padding: 0;
+      display: inline;
+    }
     rect {
       opacity: 0.5;
       background-color: ${options.edgeLabelBackground};
@@ -101,8 +112,7 @@ const getStyles = (options: BlockChartStyleOptions) =>
 
   /* For html labels only */
   .labelBkg {
-    background-color: ${fade(options.edgeLabelBackground, 0.5)};
-    // background-color:
+    background-color: ${options.edgeLabelBackground};
   }
 
   .node .cluster {

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

@@ -679,6 +679,7 @@ export class ClassDB implements DiagramDB {
         ],
         look: config.look,
         parentId: note.parent,
+        labelType: 'markdown',
       };
       nodes.push(noteNode);
 
@@ -741,6 +742,7 @@ export class ClassDB implements DiagramDB {
         style: classRelation.style || '',
         pattern: classRelation.relation.lineType == 1 ? 'dashed' : 'solid',
         look: config.look,
+        labelType: 'markdown',
       };
       edges.push(edge);
     }