wip: Add optInMarkdownLabels config setting

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

@@ -358,6 +358,19 @@ The maximum allowed size of the users text diagram
 
 ---
 
+### optInMarkdownLabels
+
+• `Optional` **optInMarkdownLabels**: `boolean`
+
+Only process markdown for labels enclosed in double-quote-backtick delimiters, e.g. "`_markdown label_`".
+This can be useful when upgrading from mermaid 10 to 11, as version 11 started interpreting labels as markdown by default.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:217](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L217)
+
+---
+
 ### packet
 
 • `Optional` **packet**: `PacketDiagramConfig`

packages/mermaid/src/config.type.ts

@@ -209,6 +209,12 @@ export interface MermaidConfig {
    *
    */
   suppressErrorRendering?: boolean;
+  /**
+   * Only process markdown for labels enclosed in double-quote-backtick delimiters, e.g. "`_markdown label_`".
+   * This can be useful when upgrading from mermaid 10 to 11, as version 11 started interpreting labels as markdown by default.
+   *
+   */
+  optInMarkdownLabels?: boolean;
 }
 /**
  * The object containing configurations specific for flowcharts

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

@@ -200,6 +200,7 @@ export const createText = async (
     isTitle = false,
     classes = '',
     useHtmlLabels = true,
+    optInMarkdownLabels = false,
     isNode = true,
     width = 200,
     addSvgBackground = false,
@@ -215,12 +216,24 @@ export const createText = async (
     useHtmlLabels,
     isNode,
     'addSvgBackground: ',
-    addSvgBackground
+    addSvgBackground,
+    'optInMarkdownLabels: ',
+    optInMarkdownLabels
   );
   if (useHtmlLabels) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
-
-    const htmlText = markdownToHTML(text, config);
+    let labelMaker = (text, config) => {
+      const match = text.match(/^"`(.*)`"$/);
+      if (match) {
+        return markdownToHTML(match[1], config);
+      } else {
+        return `<span class="${classes}">${text}</span>`;
+      }
+    };
+    if (!optInMarkdownLabels) {
+      labelMaker = markdownToHTML;
+    }
+    const htmlText = labelMaker(text, config);
     const decodedReplacedText = replaceIconSubstring(decodeEntities(htmlText));
 
     //for Katex the text could contain escaped characters, \\relax that should be transformed to \relax

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

@@ -13,7 +13,10 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
   _classes?: string
 ) => {
   let cssClasses;
-  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.htmlLabels);
+  const config = getConfig();
+  const useHtmlLabels = node.useHtmlLabels || evaluate(config?.htmlLabels);
+  const optInMarkdownLabels = evaluate(config?.optInMarkdownLabels);
+
   if (!_classes) {
     cssClasses = 'node default';
   } else {
@@ -42,6 +45,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
 
   const text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
     useHtmlLabels,
+    optInMarkdownLabels,
     width: node.width || getConfig().flowchart?.wrappingWidth,
     // @ts-expect-error -- This is currently not used. Should this be `classes` instead?
     cssClasses: 'markdown-node-label',

packages/mermaid/src/schemas/config.schema.yaml

@@ -311,6 +311,12 @@ properties:
     description: |
       Suppresses inserting 'Syntax error' diagram in the DOM.
       This is useful when you want to control how to handle syntax errors in your application.
+  optInMarkdownLabels:
+    type: boolean
+    default: false
+    description: |
+      Only process markdown for labels enclosed in double-quote-backtick delimiters, e.g. "`_markdown label_`".
+      This can be useful when upgrading from mermaid 10 to 11, as version 11 started interpreting labels as markdown by default.
 
 $defs: # JSON Schema definition (maybe we should move these to a separate file)
   BaseDiagramConfig: