fix: simplify label creation for markdown in clusters and edges

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

.github/workflows/e2e-timings.yml

@@ -58,7 +58,7 @@ jobs:
           echo "EOF" >> $GITHUB_OUTPUT
 
       - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412
+        uses: peter-evans/create-pull-request@0979079bc20c05bbbb590a56c21c4e2b1d1f1bbe
         with:
           add-paths: |
             cypress/timings.json

.github/workflows/update-browserlist.yml

@@ -19,7 +19,7 @@ jobs:
           message: 'chore: update browsers list'
           push: false
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7.0.11
+        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9
         with:
           branch: update-browserslist
           title: Update Browserslist

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

@@ -10,7 +10,7 @@
 
 # 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
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mer
 
 > `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,7 +10,7 @@
 
 # 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
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mer
 
 > **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,7 +10,7 @@
 
 # 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
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/me
 
 > `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.

package.json

@@ -63,8 +63,8 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.56.6",
-    "@argos-ci/cypress": "^6.2.5",
+    "@applitools/eyes-cypress": "^3.56.5",
+    "@argos-ci/cypress": "^6.2.2",
     "@changesets/changelog-github": "^0.5.2",
     "@changesets/cli": "^2.29.8",
     "@cspell/eslint-plugin": "^9.3.2",
@@ -77,7 +77,7 @@
     "@types/jsdom": "^21.1.7",
     "@types/lodash": "^4.17.21",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^22.19.3",
+    "@types/node": "^22.19.1",
     "@types/rollup-plugin-visualizer": "^5.0.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/spy": "^3.2.4",

packages/mermaid/package.json

@@ -76,10 +76,10 @@
     "cytoscape-fcose": "^2.2.0",
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
-    "dagre-d3-es": "7.0.14",
+    "dagre-d3-es": "7.0.13",
     "dayjs": "^1.11.19",
-    "dompurify": "^3.3.0",
-    "katex": "^0.16.27",
+    "dompurify": "^3.3.1",
+    "katex": "^0.16.25",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "marked": "^16.3.0",

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

@@ -85,6 +85,17 @@ export class FlowDB implements DiagramDB {
     return common.sanitizeText(txt, this.config);
   }
 
+  private sanitizeNodeLabelType(labelType?: string) {
+    switch (labelType) {
+      case 'markdown':
+      case 'string':
+      case 'text':
+        return labelType;
+      default:
+        return 'markdown';
+    }
+  }
+
   /**
    * Function to lookup domId from id in the graph definition.
    *
@@ -208,6 +219,7 @@ export class FlowDB implements DiagramDB {
 
       if (doc?.label) {
         vertex.text = doc?.label;
+        vertex.labelType = this.sanitizeNodeLabelType(doc?.labelType);
       }
       if (doc?.icon) {
         vertex.icon = doc?.icon;
@@ -267,7 +279,7 @@ export class FlowDB implements DiagramDB {
       if (edge.text.startsWith('"') && edge.text.endsWith('"')) {
         edge.text = edge.text.substring(1, edge.text.length - 1);
       }
-      edge.labelType = linkTextObj.type;
+      edge.labelType = this.sanitizeNodeLabelType(linkTextObj.type);
     }
 
     if (type !== undefined) {
@@ -702,7 +714,7 @@ You have to call mermaid.initialize.`
       title: title.trim(),
       classes: [],
       dir,
-      labelType: _title.type,
+      labelType: this.sanitizeNodeLabelType(_title?.type),
     };
 
     log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir);
@@ -1012,6 +1024,7 @@ You have to call mermaid.initialize.`
       const baseNode = {
         id: vertex.id,
         label: vertex.text,
+        labelType: vertex.labelType,
         labelStyle: '',
         parentId,
         padding: config.flowchart?.padding || 8,
@@ -1088,6 +1101,7 @@ You have to call mermaid.initialize.`
         id: subGraph.id,
         label: subGraph.title,
         labelStyle: '',
+        labelType: subGraph.labelType,
         parentId: parentDB.get(subGraph.id),
         padding: 8,
         cssCompiledStyles: this.getCompiledStyles(subGraph.classes),
@@ -1119,6 +1133,7 @@ You have to call mermaid.initialize.`
         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/types.ts

@@ -29,7 +29,7 @@ export interface FlowVertex {
   domId: string;
   haveCallback?: boolean;
   id: string;
-  labelType: 'text';
+  labelType: 'markdown' | 'string' | 'text';
   link?: string;
   linkTarget?: string;
   props?: any;
@@ -62,7 +62,7 @@ export interface FlowEdge {
   style?: string[];
   length?: number;
   text: string;
-  labelType: 'text';
+  labelType: 'markdown' | 'string' | 'text';
   classes: string[];
   id?: string;
   animation?: 'fast' | 'slow';

packages/mermaid/src/docs/package.json

@@ -24,14 +24,14 @@
     "vue": "^3.5.25"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.2.15",
-    "@unocss/reset": "^66.5.10",
+    "@iconify-json/carbon": "^1.2.14",
+    "@unocss/reset": "^66.5.9",
     "@vite-pwa/vitepress": "^1.0.1",
-    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitejs/plugin-vue": "^6.0.2",
     "fast-glob": "^3.3.3",
     "https-localhost": "^4.7.1",
     "pathe": "^2.0.3",
-    "unocss": "^66.5.10",
+    "unocss": "^66.5.9",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^7.0.8",
     "vite-plugin-pwa": "^1.0.3",

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

@@ -13,7 +13,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
   _classes?: string
 ) => {
   let cssClasses;
-  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.htmlLabels);
+  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
   if (!_classes) {
     cssClasses = 'node default';
   } else {
@@ -48,6 +48,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
     style: node.labelStyle,
     addSvgBackground: !!node.icon || !!node.img,
   });
+
   // Get the size of the label
   let bbox = text.getBBox();
   const halfPadding = (node?.padding ?? 0) / 2;

packages/mermaid/src/types.ts

@@ -1,6 +1,7 @@
 export interface NodeMetaData {
   shape?: string;
   label?: string;
+  labelType?: string;
   icon?: string;
   form?: string;
   pos?: 't' | 'b';