Merge branch 'fix-markdown-labels-6087' of https://github.com/mermaid-js/mermaid into fix-markdown-labels-6087

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

.changeset/gold-ducks-sort.md

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

.cspell/code-terms.txt

@@ -1,5 +1,3 @@
-!viewbox
-# It should be viewBox
 # This file contains coding related terms
 ALPHANUM
 antiscript

.cspell/libraries.txt

@@ -64,7 +64,6 @@ rscratch
 shiki
 Slidev
 sparkline
-speccharts
 sphinxcontrib
 ssim
 stylis

.esbuild/util.ts

@@ -71,9 +71,6 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
 
   const external: string[] = ['require', 'fs', 'path'];
   const outFileName = getFileName(name, options);
-  const { dependencies, version } = JSON.parse(
-    readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
-  );
   const output: BuildOptions = buildOptions({
     ...rest,
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
@@ -85,13 +82,15 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
       // This needs to be stringified for esbuild
-      'injected.includeLargeFeatures': `${includeLargeFeatures}`,
-      'injected.version': `'${version}'`,
+      includeLargeFeatures: `${includeLargeFeatures}`,
       'import.meta.vitest': 'undefined',
     },
   });
 
   if (core) {
+    const { dependencies } = JSON.parse(
+      readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
+    );
     // Core build is used to generate file without bundled dependencies.
     // This is used by downstream projects to bundle dependencies themselves.
     // Ignore dependencies and any dependencies of dependencies

.github/workflows/release.yml

@@ -42,4 +42,5 @@ jobs:
           publish: pnpm changeset:publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_CONFIG_PROVENANCE: true

.github/workflows/validate-lockfile.yml

@@ -18,6 +18,13 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+
       - name: Validate pnpm-lock.yaml entries
         id: validate # give this step an ID so we can reference its outputs
         run: |

.vite/build.ts

@@ -78,8 +78,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     },
     define: {
       'import.meta.vitest': 'undefined',
-      'injected.includeLargeFeatures': 'true',
-      'injected.version': `'0.0.0'`,
     },
     resolve: {
       extensions: [],
@@ -96,6 +94,10 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       }),
       ...visualizerOptions(packageName, core),
     ],
+    define: {
+      // Needs to be string
+      includeLargeFeatures: 'true',
+    },
   };
 
   if (watch && config.build) {

cypress/helpers/util.ts

@@ -99,7 +99,6 @@ export const openURLAndVerifyRendering = (
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
   cy.get('svg').should('be.visible');
-  // cspell:ignore viewbox
   cy.get('svg').should('not.have.attr', 'viewbox');
 
   if (validation) {

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

@@ -1174,8 +1174,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', () => {

cypress/integration/rendering/flowchart.spec.js

@@ -1003,4 +1003,49 @@ 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,7 +10,7 @@
 
 # Interface: ParseOptions
 
-Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
+Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
+Defined in: [packages/mermaid/src/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L94)
 
 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:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
+Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L97)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
+Defined in: [packages/mermaid/src/types.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L105)
 
 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:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
+Defined in: [packages/mermaid/src/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L101)
 
 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:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
+Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L115)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/me
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
+Defined in: [packages/mermaid/src/types.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L133)
 
 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:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
+Defined in: [packages/mermaid/src/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L123)
 
 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:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
+Defined in: [packages/mermaid/src/types.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L119)
 
 The svg code for the rendered graph.

docs/ecosystem/integrations-community.md

@@ -57,8 +57,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
   - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
-- [GNU Octave](https://octave.org/) ✅
-  - [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
@@ -274,7 +272,6 @@ Communication tools and platforms
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
-- [speccharts: Turn your test suites into specification diagrams](https://github.com/arnaudrenaud/speccharts)
 - [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
 
 <!--- cspell:ignore Blazorade HueHive --->

packages/mermaid-layout-elk/package.json

@@ -18,9 +18,7 @@
     "elk",
     "mermaid"
   ],
-  "scripts": {
-    "clean": "rimraf dist"
-  },
+  "scripts": {},
   "repository": {
     "type": "git",
     "url": "https://github.com/mermaid-js/mermaid"

packages/mermaid-layout-tidy-tree/package.json

@@ -19,9 +19,7 @@
     "mermaid",
     "layout"
   ],
-  "scripts": {
-    "clean": "rimraf dist"
-  },
+  "scripts": {},
   "repository": {
     "type": "git",
     "url": "https://github.com/mermaid-js/mermaid"

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -72,7 +72,7 @@ export const addDiagrams = () => {
     }
   );
 
-  if (injected.includeLargeFeatures) {
+  if (includeLargeFeatures) {
     registerLazyLoadedDiagrams(flowchartElk, mindmap, architecture);
   }
 

packages/mermaid/src/diagrams/common/common.ts

@@ -333,7 +333,7 @@ const renderKatexUnsanitized = async (text: string, config: MermaidConfig): Prom
     return text.replace(katexRegex, 'MathML is unsupported in this environment.');
   }
 
-  if (injected.includeLargeFeatures) {
+  if (includeLargeFeatures) {
     const { default: katex } = await import('katex');
     const outputMode =
       config.forceLegacyMathML || (!isMathMLSupported() && config.legacyMathML)

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/diagrams/info/infoDb.ts

@@ -1,7 +1,8 @@
 import type { InfoFields, InfoDB } from './infoTypes.js';
+import packageJson from '../../../package.json' assert { type: 'json' };
 
 export const DEFAULT_INFO_DB: InfoFields = {
-  version: injected.version + (injected.includeLargeFeatures ? '' : '-tiny'),
+  version: packageJson.version + (includeLargeFeatures ? '' : '-tiny'),
 } as const;
 
 export const getVersion = (): string => DEFAULT_INFO_DB.version;

packages/mermaid/src/diagrams/kanban/kanbanDb.ts

@@ -62,6 +62,7 @@ const getData = function () {
     const node = {
       id: section.id,
       label: sanitizeText(section.label ?? '', conf),
+      labelType: 'markdown',
       isGroup: true,
       ticket: section.ticket,
       shape: 'kanbanSection',
@@ -76,6 +77,7 @@ const getData = function () {
         id: item.id,
         parentId: section.id,
         label: sanitizeText(item.label ?? '', conf),
+        labelType: 'markdown',
         isGroup: false,
         ticket: item?.ticket,
         priority: item?.priority,

packages/mermaid/src/diagrams/mindmap/mindmapDb.ts

@@ -260,6 +260,7 @@ export class MindmapDB {
       id: node.id.toString(),
       domId: 'node_' + node.id.toString(),
       label: node.descr,
+      labelType: 'markdown',
       isGroup: false,
       shape: getShapeFromType(node.type),
       width: node.width,

packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts

@@ -16,6 +16,7 @@ export interface MindmapNode {
   x?: number;
   y?: number;
   isRoot?: boolean;
+  labelType?: string;
 }
 
 export type FilledMindMapNode = RequiredDeep<MindmapNode>;

packages/mermaid/src/docs/.vitepress/config.ts

@@ -1,6 +1,6 @@
 import type { MarkdownOptions } from 'vitepress';
 import { defineConfig } from 'vitepress';
-import packageJson from '../../../package.json' with { type: 'json' };
+import packageJson from '../../../package.json' assert { type: 'json' };
 import { addCanonicalUrls } from './canonical-urls.js';
 import MermaidExample from './mermaid-markdown-all.js';
 

packages/mermaid/src/docs/ecosystem/integrations-community.md

@@ -52,8 +52,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
   - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
-- [GNU Octave](https://octave.org/) ✅
-  - [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
@@ -269,7 +267,6 @@ Communication tools and platforms
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
-- [speccharts: Turn your test suites into specification diagrams](https://github.com/arnaudrenaud/speccharts)
 - [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
 
 <!--- cspell:ignore Blazorade HueHive --->

packages/mermaid/src/mermaidAPI.ts

@@ -7,6 +7,7 @@ import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
 import DOMPurify from 'dompurify';
 import isEmpty from 'lodash-es/isEmpty.js';
+import packageJson from '../package.json' assert { type: 'json' };
 import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
 import assignWithDepth from './assignWithDepth.js';
 import * as configApi from './config.js';
@@ -420,12 +421,12 @@ const render = async function (
   // -------------------------------------------------------------------------------
   // Draw the diagram with the renderer
   try {
-    await diag.renderer.draw(text, id, injected.version, diag);
+    await diag.renderer.draw(text, id, packageJson.version, diag);
   } catch (e) {
     if (config.suppressErrorRendering) {
       removeTempElements();
     } else {
-      errorRenderer.draw(text, id, injected.version);
+      errorRenderer.draw(text, id, packageJson.version);
     }
     throw e;
   }

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

@@ -42,7 +42,7 @@ const registerDefaultLayoutLoaders = () => {
       name: 'dagre',
       loader: async () => await import('./layout-algorithms/dagre/index.js'),
     },
-    ...(injected.includeLargeFeatures
+    ...(includeLargeFeatures
       ? [
           {
             name: 'cose-bilkent',

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

@@ -30,11 +30,17 @@ const rect = async (parent, node) => {
   // Create the label and insert it after the rect
   const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
 
-  const text = await createText(labelEl, node.label, {
-    style: node.labelStyle,
-    useHtmlLabels,
-    isNode: true,
-  });
+  let text;
+  if (node.labelType === 'markdown') {
+    text = await createText(labelEl, node.label, {
+      style: node.labelStyle,
+      useHtmlLabels,
+      isNode: true,
+    });
+  } else {
+    const labelElement = await createLabel(node.label, node.labelStyle, false, true);
+    text = labelEl.node()?.appendChild(labelElement);
+  }
 
   // Get the size of the label
   let bbox = text.getBBox();

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

@@ -81,7 +81,7 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
     return vertexNode;
   } else {
     const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-    svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
+    svgLabel.setAttribute('style', style ? style.replace('color:', 'fill:') : '');
     let rows = [];
     if (typeof vertexText === 'string') {
       rows = vertexText.split(/\\n|\n|<br\s*\/?>/gi);

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

@@ -29,7 +29,7 @@ import {
 import rough from 'roughjs';
 import createLabel from './createLabel.js';
 import { addEdgeMarkers } from './edgeMarker.ts';
-import { isLabelStyle, styles2String } from './shapes/handDrawnShapeStyles.js';
+import { isLabelStyle } from './shapes/handDrawnShapeStyles.js';
 
 export const edgeLabels = new Map();
 export const terminalLabels = new Map();
@@ -47,14 +47,16 @@ export const getLabelStyles = (styleArray) => {
 export const insertEdgeLabel = async (elem, edge) => {
   let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
 
-  const { labelStyles } = styles2String(edge);
-  edge.labelStyle = labelStyles;
-  const labelElement = await createText(elem, edge.label, {
-    style: 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

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

@@ -62,9 +62,12 @@ export async function erBox<T extends SVGGraphicsElement>(parent: D3Selection<T>
 
     // drawRect doesn't center non-htmlLabels correctly as of now, so translate label
     if (!evaluate(config.htmlLabels)) {
-      const textElement = shapeSvg.select('text');
-      const bbox = (textElement.node() as SVGTextElement)?.getBBox();
-      textElement.attr('transform', `translate(${-bbox.width / 2}, 0)`);
+      const textElement = shapeSvg.select('.label text');
+      const textNode = textElement.node() as SVGTextElement;
+      if (textNode) {
+        const bbox = textNode.getBBox();
+        textElement.attr('transform', `translate(${-bbox.width / 2}, 0)`);
+      }
     }
     return shapeSvg;
   }

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';
@@ -13,7 +14,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 {
@@ -40,14 +41,26 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
     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 === 'markdown') {
+    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;

packages/mermaid/src/type.d.ts

@@ -1,5 +1,2 @@
 // eslint-disable-next-line no-var
-declare var injected: {
-  version: string;
-  includeLargeFeatures: boolean;
-};
+declare var includeLargeFeatures: boolean;

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';

vite.config.ts

@@ -35,8 +35,7 @@ export default defineConfig({
   },
   define: {
     // Needs to be string
-    'injected.includeLargeFeatures': 'true',
+    includeLargeFeatures: 'true',
     'import.meta.vitest': 'undefined',
-    packageVersion: "'0.0.0'",
   },
 });