chore: add changeset

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

.changeset/seven-towns-obey.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Deprecate flowchart.htmlLabels in favor of root-level htmlLabels

.github/workflows/codeql.yml

@@ -26,8 +26,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ['javascript', 'actions']
-        # CodeQL supports [ 'actions', 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        language: ['javascript']
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:

docs/config/directives.md

@@ -236,22 +236,27 @@ A --> C[End]
 
 Some common flowchart configurations are:
 
-- _htmlLabels_: true/false
 - _curve_: linear/curve
 - _diagramPadding_: number
 - _useMaxWidth_: number
 
+**Deprecated configurations:**
+
+- ~~_htmlLabels_~~: Use global `htmlLabels` instead
+
 For a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
 _Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._
 
 The following code snippet changes flowchart config:
 
-`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`
+```
+%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
+```
 
-Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.
+**Note:** `flowchart.htmlLabels` has been deprecated. Use the global `htmlLabels` configuration instead.
 
 ```mermaid-example
-%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
+%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
 graph TD
 A(Forest) --> B[/Another/]
 A --> C[End]
@@ -262,7 +267,7 @@ A --> C[End]
 ```
 
 ```mermaid
-%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
+%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
 graph TD
 A(Forest) --> B[/Another/]
 A --> C[End]

docs/config/setup/config/README.md

@@ -18,6 +18,7 @@
 
 - [addDirective](functions/addDirective.md)
 - [getConfig](functions/getConfig.md)
+- [getEffectiveHtmlLabels](functions/getEffectiveHtmlLabels.md)
 - [getSiteConfig](functions/getSiteConfig.md)
 - [getUserDefinedConfig](functions/getUserDefinedConfig.md)
 - [reset](functions/reset.md)

docs/config/setup/config/functions/getEffectiveHtmlLabels.md

@@ -0,0 +1,29 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getEffectiveHtmlLabels.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getEffectiveHtmlLabels.md).
+
+[**mermaid**](../../README.md)
+
+---
+
+# Function: getEffectiveHtmlLabels()
+
+> **getEffectiveHtmlLabels**(`config`): `boolean`
+
+Defined in: [packages/mermaid/src/config.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L272)
+
+Helper function to handle deprecated flowchart.htmlLabels
+
+## Parameters
+
+### config
+
+[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
+
+The configuration object
+
+## Returns
+
+`boolean`

docs/config/setup/config/functions/getUserDefinedConfig.md

@@ -12,7 +12,7 @@
 
 > **getUserDefinedConfig**(): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/config.ts:252](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L252)
+Defined in: [packages/mermaid/src/config.ts:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L254)
 
 ## Returns
 

docs/config/usage.md

@@ -372,7 +372,7 @@ The list of configuration objects are described [in the mermaidAPI documentation
 ```html
 <script type="module">
   import mermaid from './mermaid.esm.mjs';
-  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
+  let config = { startOnLoad: true, htmlLabels: true, flowchart: { useMaxWidth: false } };
   mermaid.initialize(config);
 </script>
 ```

packages/mermaid/src/config.ts

@@ -227,6 +227,8 @@ export const reset = (config = siteConfig): void => {
 const ConfigWarning = {
   LAZY_LOAD_DEPRECATED:
     'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.',
+  FLOWCHART_HTML_LABELS_DEPRECATED:
+    'flowchart.htmlLabels is deprecated. Please use global htmlLabels instead.',
 } as const;
 
 type ConfigWarningStrings = keyof typeof ConfigWarning;
@@ -262,3 +264,15 @@ export const getUserDefinedConfig = (): MermaidConfig => {
 
   return userConfig;
 };
+
+/**
+ * Helper function to handle deprecated flowchart.htmlLabels
+ * @param config - The configuration object
+ */
+export const getEffectiveHtmlLabels = (config: MermaidConfig): boolean => {
+  if (config.flowchart?.htmlLabels !== undefined) {
+    issueWarning('FLOWCHART_HTML_LABELS_DEPRECATED');
+  }
+
+  return config.htmlLabels ?? config.flowchart?.htmlLabels ?? true;
+};

packages/mermaid/src/config.type.ts

@@ -248,7 +248,12 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    */
   diagramPadding?: number;
   /**
-   * Flag for setting whether or not a html tag should be used for rendering labels on the edges.
+   * @deprecated
+   * **DEPRECATED: Use global `htmlLabels` instead.**
+   *
+   * Flag for setting whether or not a html tag should be used for rendering labels on nodes and edges.
+   * This property is deprecated.
+   * Please use the global `htmlLabels` configuration instead.
    *
    */
   htmlLabels?: boolean;

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

@@ -4,7 +4,8 @@ import createLabel from './createLabel.js';
 import { createText } from '../rendering-util/createText.js';
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
-import { evaluate } from '../diagrams/common/common.js';
+import { getEffectiveHtmlLabels } from '../config.js';
+
 import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 
 const rect = async (parent, node) => {
@@ -20,7 +21,7 @@ const rect = async (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
+  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);
 
   // Create the label and insert it after the rect
   const label = shapeSvg.insert('g').attr('class', 'cluster-label');
@@ -38,7 +39,7 @@ const rect = async (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (evaluate(siteConfig.flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(siteConfig)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -150,7 +151,7 @@ const roundedWithTitle = async (parent, node) => {
 
   // Get the size of the label
   let bbox = text.getBBox();
-  if (evaluate(siteConfig.flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(siteConfig)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -190,7 +191,7 @@ const roundedWithTitle = async (parent, node) => {
       node.y -
       node.height / 2 -
       node.padding / 3 +
-      (evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3) +
+      (getEffectiveHtmlLabels(siteConfig) ? 5 : 3) +
       subGraphTitleTopMargin
     })`
   );

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

@@ -1,6 +1,7 @@
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
-import { evaluate, sanitizeText } from '../diagrams/common/common.js';
+import { getEffectiveHtmlLabels } from '../config.js';
+import { sanitizeText } from '../diagrams/common/common.js';
 import { log } from '../logger.js';
 import { replaceIconSubstring } from '../rendering-util/createText.js';
 import { decodeEntities } from '../utils.js';
@@ -50,7 +51,7 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
     vertexText = vertexText[0];
   }
   const config = getConfig();
-  if (evaluate(config.flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(config)) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '<br />');
     log.debug('vertexText' + vertexText);

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

@@ -3,8 +3,9 @@ import createLabel from './createLabel.js';
 import { createText } from '../rendering-util/createText.js';
 import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
+import { getEffectiveHtmlLabels } from '../config.js';
 import utils from '../utils.js';
-import { evaluate, getUrl } from '../diagrams/common/common.js';
+import { getUrl } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
 import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 import { addEdgeMarkers } from './edgeMarker.js';
@@ -19,7 +20,7 @@ export const clear = () => {
 
 export const insertEdgeLabel = async (elem, edge) => {
   const config = getConfig();
-  const useHtmlLabels = evaluate(config.flowchart.htmlLabels);
+  const useHtmlLabels = getEffectiveHtmlLabels(config);
   // Create the actual text element
   const labelElement =
     edge.labelType === 'markdown'
@@ -133,7 +134,7 @@ export const insertEdgeLabel = async (elem, edge) => {
  * @param {any} value
  */
 function setTerminalWidth(fo, value) {
-  if (getConfig().flowchart.htmlLabels && fo) {
+  if (getEffectiveHtmlLabels(getConfig()) && fo) {
     fo.style.width = value.length * 9 + 'px';
     fo.style.height = '12px';
   }

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

@@ -1,6 +1,7 @@
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
-import { evaluate } from '../diagrams/common/common.js';
+import { getEffectiveHtmlLabels } from '../config.js';
+
 import { log } from '../logger.js';
 import { getArrowPoints } from './blockArrowHelper.js';
 import createLabel from './createLabel.js';
@@ -588,7 +589,7 @@ const rectWithTitle = async (parent, node) => {
 
   const text = label.node().appendChild(await createLabel(title, node.labelStyle, true, true));
   let bbox = { width: 0, height: 0 };
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(getConfig())) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -609,7 +610,7 @@ const rectWithTitle = async (parent, node) => {
       )
     );
 
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(getConfig())) {
     const div = descr.children[0];
     const dv = select(descr);
     bbox = div.getBoundingClientRect();
@@ -917,7 +918,7 @@ const class_box = async (parent, node) => {
     .node()
     .appendChild(await createLabel(interfaceLabelText, node.labelStyle, true, true));
   let interfaceBBox = interfaceLabel.getBBox();
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(getConfig())) {
     const div = interfaceLabel.children[0];
     const dv = select(interfaceLabel);
     interfaceBBox = div.getBoundingClientRect();
@@ -932,7 +933,7 @@ const class_box = async (parent, node) => {
   let classTitleString = node.classData.label;
 
   if (node.classData.type !== undefined && node.classData.type !== '') {
-    if (getConfig().flowchart.htmlLabels) {
+    if (getEffectiveHtmlLabels(getConfig())) {
       classTitleString += '<' + node.classData.type + '>';
     } else {
       classTitleString += '<' + node.classData.type + '>';
@@ -943,7 +944,7 @@ const class_box = async (parent, node) => {
     .appendChild(await createLabel(classTitleString, node.labelStyle, true, true));
   select(classTitleLabel).attr('class', 'classTitle');
   let classTitleBBox = classTitleLabel.getBBox();
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(getConfig())) {
     const div = classTitleLabel.children[0];
     const dv = select(classTitleLabel);
     classTitleBBox = div.getBoundingClientRect();
@@ -958,7 +959,7 @@ const class_box = async (parent, node) => {
   node.classData.members.forEach(async (member) => {
     const parsedInfo = member.getDisplayDetails();
     let parsedText = parsedInfo.displayText;
-    if (getConfig().flowchart.htmlLabels) {
+    if (getEffectiveHtmlLabels(getConfig())) {
       parsedText = parsedText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
     const lbl = labelContainer
@@ -972,7 +973,7 @@ const class_box = async (parent, node) => {
         )
       );
     let bbox = lbl.getBBox();
-    if (evaluate(getConfig().flowchart.htmlLabels)) {
+    if (getEffectiveHtmlLabels(getConfig())) {
       const div = lbl.children[0];
       const dv = select(lbl);
       bbox = div.getBoundingClientRect();
@@ -992,7 +993,7 @@ const class_box = async (parent, node) => {
   node.classData.methods.forEach(async (member) => {
     const parsedInfo = member.getDisplayDetails();
     let displayText = parsedInfo.displayText;
-    if (getConfig().flowchart.htmlLabels) {
+    if (getEffectiveHtmlLabels(getConfig())) {
       displayText = displayText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
     const lbl = labelContainer
@@ -1006,7 +1007,7 @@ const class_box = async (parent, node) => {
         )
       );
     let bbox = lbl.getBBox();
-    if (evaluate(getConfig().flowchart.htmlLabels)) {
+    if (getEffectiveHtmlLabels(getConfig())) {
       const div = lbl.children[0];
       const dv = select(lbl);
       bbox = div.getBoundingClientRect();

packages/mermaid/src/dagre-wrapper/shapes/note.js

@@ -1,10 +1,11 @@
 import { updateNodeBounds, labelHelper } from './util.js';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
+import { getEffectiveHtmlLabels } from '../../config.js';
 import intersect from '../intersect/index.js';
 
 const note = async (parent, node) => {
-  const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
+  const useHtmlLabels = getEffectiveHtmlLabels(getConfig()) || node.useHtmlLabels;
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }

packages/mermaid/src/dagre-wrapper/shapes/util.js

@@ -1,14 +1,15 @@
 import createLabel from '../createLabel.js';
 import { createText } from '../../rendering-util/createText.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
+import { getEffectiveHtmlLabels } from '../../config.js';
 import { select } from 'd3';
-import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
+import { sanitizeText } from '../../diagrams/common/common.js';
 import { decodeEntities } from '../../utils.js';
 
 export const labelHelper = async (parent, node, _classes, isNode) => {
   const config = getConfig();
   let classes;
-  const useHtmlLabels = node.useHtmlLabels || evaluate(config.flowchart.htmlLabels);
+  const useHtmlLabels = node.useHtmlLabels || getEffectiveHtmlLabels(config);
   if (!_classes) {
     classes = 'node default';
   } else {
@@ -60,7 +61,7 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
   let bbox = text.getBBox();
   const halfPadding = node.padding / 2;
 
-  if (evaluate(config.flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(config)) {
     const div = text.children[0];
     const dv = select(text);
 

packages/mermaid/src/diagrams/architecture/architectureDb.ts

@@ -3,9 +3,7 @@ import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
 import type { DiagramDB } from '../../diagram-api/types.js';
 import type { D3Element } from '../../types.js';
-import { cleanAndMerge, getEdgeId } from '../../utils.js';
-import type { LayoutData, Node, Edge } from '../../rendering-util/types.js';
-
+import { cleanAndMerge } from '../../utils.js';
 import {
   clear as commonClear,
   getAccDescription,
@@ -353,147 +351,15 @@ export class ArchitectureDB implements DiagramDB {
   public getDiagramTitle = getDiagramTitle;
   public getAccDescription = getAccDescription;
   public setAccDescription = setAccDescription;
-
-  /**
-   * Converts architecture diagram data to LayoutData format for unified rendering
-   */
-  public getData(): LayoutData {
-    const config = commonGetConfig();
-    const nodes: Node[] = [];
-    const edges: Edge[] = [];
-
-    const groups = this.getGroups();
-    for (const group of groups) {
-      const padding = this.getConfigField('padding');
-      const fontSize = this.getConfigField('fontSize');
-
-      const groupWidth = 200;
-      let groupHeight = 150;
-
-      if (group.title || group.icon) {
-        groupHeight += fontSize + padding;
-      }
-
-      nodes.push({
-        id: group.id,
-        label: group.title,
-        parentId: group.in,
-        isGroup: true,
-        shape: 'rect',
-        icon: group.icon,
-        width: groupWidth,
-        height: groupHeight,
-        padding: padding,
-        cssClasses: 'architecture-group',
-        cssCompiledStyles: [
-          'stroke: #cccccc',
-          'stroke-width: 2px',
-          'stroke-dasharray: 8,8',
-          'fill: transparent',
-        ],
-        labelStyle: '',
-        look: config.look || 'classic',
-        rx: 5,
-        ry: 5,
-      });
-    }
-
-    const services = this.getServices();
-    for (const service of services) {
-      const iconSize = this.getConfigField('iconSize');
-      let nodeWidth = iconSize;
-      let nodeHeight = iconSize;
-
-      if (service.title) {
-        nodeHeight += iconSize * 0.3;
-        nodeWidth = Math.max(nodeWidth, iconSize * 1.5);
-      }
-
-      nodes.push({
-        id: service.id,
-        label: service.title,
-        parentId: service.in,
-        isGroup: false,
-        shape: service.icon || (service as any).iconText ? 'icon' : 'squareRect',
-        icon: service.icon ? `mermaid-architecture:${service.icon}` : 'mermaid-architecture:blank',
-        width: service.width || nodeWidth,
-        height: service.height || nodeHeight,
-        cssClasses: 'architecture-service',
-        look: config.look,
-        padding: this.getConfigField('padding') / 4,
-        description: (service as any).iconText ? [(service as any).iconText] : undefined,
-        assetWidth: iconSize,
-        assetHeight: iconSize,
-      });
-    }
-
-    const junctions = this.getJunctions();
-    for (const junction of junctions) {
-      nodes.push({
-        id: junction.id,
-        parentId: junction.in,
-        isGroup: false,
-        shape: 'squareRect',
-        width: 2,
-        height: 2,
-        cssClasses: 'architecture-junction',
-        look: config.look,
-        type: 'junction' as any,
-        padding: 0,
-      });
-    }
-
-    const architectureEdges = this.getEdges();
-    let edgeCounter = 0;
-    for (const edge of architectureEdges) {
-      const edgeData = {
-        id: getEdgeId(edge.lhsId, edge.rhsId, { counter: edgeCounter, prefix: 'L' }),
-        start: edge.lhsId,
-        end: edge.rhsId,
-        source: edge.lhsId,
-        target: edge.rhsId,
-        label: edge.title || '',
-        labelpos: 'c',
-        type: 'normal',
-        minlen: 2,
-        weight: 1,
-        classes: 'edge-thickness-normal edge-pattern-solid architecture-edge',
-        look: config.look || 'classic',
-        curve: 'linear',
-        arrowTypeStart: edge.lhsInto ? 'point' : 'none',
-        arrowTypeEnd: edge.rhsInto ? 'point' : 'none',
-        arrowheadStyle: 'fill: #333',
-        thickness: 'normal',
-        pattern: 'solid',
-        style: ['stroke: #333333', 'stroke-width: 3px', 'fill: none'],
-        cssCompiledStyles: [],
-        labelStyle: [],
-        lhsDir: edge.lhsDir,
-        rhsDir: edge.rhsDir,
-        lhsInto: edge.lhsInto,
-        rhsInto: edge.rhsInto,
-        lhsGroup: edge.lhsGroup,
-        rhsGroup: edge.rhsGroup,
-      } as Edge & {
-        lhsDir: any;
-        rhsDir: any;
-        lhsInto?: boolean;
-        rhsInto?: boolean;
-        lhsGroup?: boolean;
-        rhsGroup?: boolean;
-      };
-
-      edges.push(edgeData);
-      edgeCounter++;
-    }
-
-    const result = {
-      nodes,
-      edges,
-      config,
-      dataStructures: this.getDataStructures(),
-    };
-
-    return result;
-  }
 }
+
+/**
+ * Typed wrapper for resolving an architecture diagram's config fields. Returns the default value if undefined
+ * @param field - the config field to access
+ * @returns
+ */
+// export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
+//   field: T
+// ): Required<ArchitectureDiagramConfig>[T] {
+//   return db.getConfig()[field];
+// }

packages/mermaid/src/diagrams/architecture/architectureDiagram.ts

@@ -2,7 +2,7 @@ import type { DiagramDefinition } from '../../diagram-api/types.js';
 import { parser } from './architectureParser.js';
 import { ArchitectureDB } from './architectureDb.js';
 import styles from './architectureStyles.js';
-import { renderer } from './architectureRenderer-unified.js';
+import { renderer } from './architectureRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,

packages/mermaid/src/diagrams/architecture/architectureRenderer-unified.ts

@@ -1,50 +0,0 @@
-import { getConfig } from '../../diagram-api/diagramAPI.js';
-import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
-import { log } from '../../logger.js';
-import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
-import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
-import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
-import type { LayoutData } from '../../rendering-util/types.js';
-import utils from '../../utils.js';
-
-import { registerIconPacks } from '../../rendering-util/icons.js';
-import { architectureIcons } from './architectureIcons.js';
-
-export const getClasses = function (
-  _text: string,
-  _diagramObj: any
-): Map<string, DiagramStyleClassDef> {
-  return new Map();
-};
-
-export const draw = async function (_text: string, id: string, _version: string, diag: any) {
-  registerIconPacks([
-    {
-      name: architectureIcons.prefix,
-      icons: architectureIcons,
-    },
-  ]);
-  const { securityLevel, architecture: conf, layout } = getConfig();
-
-  const data4Layout = diag.db.getData() as LayoutData;
-
-  const svg = getDiagramElement(id, securityLevel);
-
-  data4Layout.type = diag.type;
-  data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout, { fallback: 'dagre' });
-
-  data4Layout.nodeSpacing = 100;
-  data4Layout.rankSpacing = 100;
-  data4Layout.markers = ['point'];
-  data4Layout.diagramId = id;
-
-  log.debug('Architecture layout data:', data4Layout);
-  await render(data4Layout, svg);
-
-  const padding = conf?.padding ?? 8;
-  utils.insertTitle(svg, 'architectureTitleText', 0, diag.db.getDiagramTitle());
-
-  setupViewPortForSVG(svg, padding, 'architecture', conf?.useMaxWidth ?? true);
-};
-
-export const renderer = { draw };

packages/mermaid/src/diagrams/architecture/architectureTypes.ts

@@ -2,7 +2,6 @@ import type { DiagramDBBase } from '../../diagram-api/types.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import type { D3Element } from '../../types.js';
 import type cytoscape from 'cytoscape';
-import type { LayoutData } from '../../rendering-util/types.js';
 
 /*=======================================*\
 |       Architecture Diagram Types        |
@@ -257,8 +256,7 @@ export interface ArchitectureDB extends DiagramDBBase<ArchitectureDiagramConfig>
   getEdges: () => ArchitectureEdge[];
   setElementForId: (id: string, element: D3Element) => void;
   getElementById: (id: string) => D3Element;
-  getData: () => LayoutData;
-  getDirection: () => string;
+  getDataStructures: () => ArchitectureDataStructures;
 }
 
 export type ArchitectureAdjacencyList = Record<string, ArchitectureDirectionPairMap>;

packages/mermaid/src/diagrams/class/classRenderer-v2.ts

@@ -3,6 +3,7 @@ import { select, curveLinear } from 'd3';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
+import { getEffectiveHtmlLabels } from '../../config.js';
 import { render } from '../../dagre-wrapper/index.js';
 import utils, { getEdgeId } from '../../utils.js';
 import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
@@ -260,7 +261,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr
       edgeData.labelpos = 'c';
 
       // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
-      if (getConfig().flowchart?.htmlLabels ?? getConfig().htmlLabels) {
+      if (getEffectiveHtmlLabels(getConfig())) {
         edgeData.labelType = 'html';
         edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
       } else {

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

@@ -1,4 +1,5 @@
 import DOMPurify from 'dompurify';
+import { getEffectiveHtmlLabels } from '../../config.js';
 import type { MermaidConfig } from '../../config.type.js';
 
 // Remove and ignore br:s
@@ -64,7 +65,7 @@ export const removeScript = (txt: string): string => {
 };
 
 const sanitizeMore = (text: string, config: MermaidConfig) => {
-  if (config.flowchart?.htmlLabels !== false) {
+  if (getEffectiveHtmlLabels(config)) {
     const level = config.securityLevel;
     if (level === 'antiscript' || level === 'strict') {
       text = removeScript(text);

packages/mermaid/src/diagrams/requirement/requirementDb.ts

@@ -321,7 +321,7 @@ export class RequirementDB implements DiagramDB {
         id: `${relation.src}-${relation.dst}-${counter}`,
         start: this.requirements.get(relation.src)?.name ?? this.elements.get(relation.src)?.name,
         end: this.requirements.get(relation.dst)?.name ?? this.elements.get(relation.dst)?.name,
-        label: `<<${relation.type}>>`,
+        label: `«${relation.type}»`,
         classes: 'relationshipLine',
         style: ['fill:none', isContains ? '' : 'stroke-dasharray: 10,7'],
         labelpos: 'c',

packages/mermaid/src/diagrams/requirement/styles.js

@@ -40,6 +40,15 @@ const getStyles = (options) => `
   .relationshipLabel {
     fill: ${options.relationLabelColor};
   }
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+  }
+  .edgeLabel .label rect {
+    fill: ${options.edgeLabelBackground};
+  }
+  .edgeLabel .label text {
+    fill: ${options.relationLabelColor};
+  }
   .divider {
     stroke: ${options.nodeBorder};
     stroke-width: 1;

packages/mermaid/src/docs/config/directives.md

@@ -185,22 +185,27 @@ A --> C[End]
 
 Some common flowchart configurations are:
 
-- _htmlLabels_: true/false
 - _curve_: linear/curve
 - _diagramPadding_: number
 - _useMaxWidth_: number
 
+**Deprecated configurations:**
+
+- ~~_htmlLabels_~~: Use global `htmlLabels` instead
+
 For a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
 _Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._
 
 The following code snippet changes flowchart config:
 
-`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`
+```
+%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
+```
 
-Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.
+**Note:** `flowchart.htmlLabels` has been deprecated. Use the global `htmlLabels` configuration instead.
 
 ```mermaid-example
-%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
+%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
 graph TD
 A(Forest) --> B[/Another/]
 A --> C[End]

packages/mermaid/src/docs/config/usage.md

@@ -368,7 +368,7 @@ The list of configuration objects are described [in the mermaidAPI documentation
 ```html
 <script type="module">
   import mermaid from './mermaid.esm.mjs';
-  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
+  let config = { startOnLoad: true, htmlLabels: true, flowchart: { useMaxWidth: false } };
   mermaid.initialize(config);
 </script>
 ```

packages/mermaid/src/mermaidAPI.spec.ts

@@ -2,6 +2,7 @@ import { assert, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import assignWithDepth from './assignWithDepth.js';
 import type { MermaidConfig } from './config.type.js';
+import { getEffectiveHtmlLabels } from './config.js';
 import mermaid from './mermaid.js';
 import mermaidAPI, {
   appendDivSvgG,
@@ -358,10 +359,11 @@ describe('mermaidAPI', () => {
         });
 
         describe('no htmlLabels in the configuration', () => {
-          const mocked_config_no_htmlLabels = {
+          const mocked_config_no_htmlLabels: MermaidConfig = {
             themeCSS: 'default',
             fontFamily: 'serif',
             altFontFamily: 'sans-serif',
+            htmlLabels: false, // Explicitly set to false
           };
 
           describe('creates styles for shape elements "rect", "polygon", "ellipse", and "circle"', () => {
@@ -1148,4 +1150,63 @@ flowchart TD
       }
     );
   });
+
+  describe('flowchart.htmlLabels deprecation behavior', () => {
+    beforeEach(() => {
+      mermaidAPI.globalReset();
+    });
+
+    it('should use root-level htmlLabels when only root-level is set', () => {
+      const config: MermaidConfig = { htmlLabels: true };
+      expect(config.htmlLabels).toBe(true);
+
+      const config2: MermaidConfig = { htmlLabels: false };
+      expect(config2.htmlLabels).toBe(false);
+    });
+
+    it('should check config.htmlLabels value directly when set', () => {
+      const config1: MermaidConfig = { htmlLabels: true };
+      expect(config1.htmlLabels).toBe(true);
+
+      const config2: MermaidConfig = { htmlLabels: false };
+      expect(config2.htmlLabels).toBe(false);
+
+      const config3: MermaidConfig = { htmlLabels: undefined };
+      expect(config3.htmlLabels).toBeUndefined();
+    });
+
+    it('should use getEffectiveHtmlLabels only when fallback logic is needed', () => {
+      // Only call getEffectiveHtmlLabels when we need the fallback behavior
+      const configWithDeprecated: MermaidConfig = { flowchart: { htmlLabels: true } };
+      expect(getEffectiveHtmlLabels(configWithDeprecated)).toBe(true);
+
+      const configWithBoth: MermaidConfig = {
+        htmlLabels: false,
+        flowchart: { htmlLabels: true },
+      };
+      expect(getEffectiveHtmlLabels(configWithBoth)).toBe(false); // Root takes precedence
+
+      const configEmpty: MermaidConfig = {};
+      expect(getEffectiveHtmlLabels(configEmpty)).toBe(true); // Default to true
+    });
+
+    it('should verify the precedence logic: config.htmlLabels ?? config.flowchart?.htmlLabels ?? true', () => {
+      // Test the exact precedence chain
+      const config1: MermaidConfig = { htmlLabels: true };
+      const result1 = config1.htmlLabels ?? config1.flowchart?.htmlLabels ?? true;
+      expect(result1).toBe(true);
+
+      const config2: MermaidConfig = { htmlLabels: false };
+      const result2 = config2.htmlLabels ?? config2.flowchart?.htmlLabels ?? true;
+      expect(result2).toBe(false);
+
+      const config3: MermaidConfig = { flowchart: { htmlLabels: true } };
+      const result3 = config3.htmlLabels ?? config3.flowchart?.htmlLabels ?? true;
+      expect(result3).toBe(true);
+
+      const config4: MermaidConfig = {};
+      const result4 = config4.htmlLabels ?? config4.flowchart?.htmlLabels ?? true;
+      expect(result4).toBe(true);
+    });
+  });
 });

packages/mermaid/src/mermaidAPI.ts

@@ -11,6 +11,7 @@ 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';
+import { getEffectiveHtmlLabels } from './config.js';
 import type { MermaidConfig } from './config.type.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
@@ -128,7 +129,7 @@ export const createCssStyles = (
 
   // classDefs defined in the diagram text
   if (classDefs instanceof Map) {
-    const htmlLabels = config.htmlLabels ?? config.flowchart?.htmlLabels; // TODO why specifically check the Flowchart diagram config?
+    const htmlLabels = getEffectiveHtmlLabels(config);
 
     const cssHtmlElements = ['> *', 'span']; // TODO make a constant
     const cssShapeElements = ['rect', 'polygon', 'ellipse', 'circle', 'path']; // TODO make a constant

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

@@ -1,5 +1,6 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { evaluate } from '../../diagrams/common/common.js';
+import { getEffectiveHtmlLabels } from '../../config.js';
+
 import { log } from '../../logger.js';
 import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
 import { select } from 'd3';
@@ -25,7 +26,7 @@ const rect = async (parent, node) => {
     .attr('id', node.id)
     .attr('data-look', node.look);
 
-  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
+  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);
 
   // Create the label and insert it after the rect
   const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
@@ -39,7 +40,7 @@ const rect = async (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (evaluate(siteConfig.flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(siteConfig)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -188,7 +189,7 @@ const roundedWithTitle = async (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (evaluate(siteConfig.flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(siteConfig)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -264,7 +265,7 @@ const roundedWithTitle = async (parent, node) => {
 
   label.attr(
     'transform',
-    `translate(${node.x - bbox.width / 2}, ${y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})`
+    `translate(${node.x - bbox.width / 2}, ${y + 1 - (getEffectiveHtmlLabels(siteConfig) ? 0 : 3)})`
   );
 
   const rectBox = rect.node().getBBox();
@@ -295,7 +296,7 @@ const kanbanSection = async (parent, node) => {
     .attr('id', node.id)
     .attr('data-look', node.look);
 
-  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
+  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);
 
   // Create the label and insert it after the rect
   const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
@@ -310,7 +311,7 @@ const kanbanSection = async (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (evaluate(siteConfig.flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(siteConfig)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();

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

@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
+import { getEffectiveHtmlLabels } from '../../config.js';
 import common, {
-  evaluate,
   hasKatex,
   renderKatexSanitized,
   sanitizeText,
@@ -64,7 +64,7 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
     vertexText = vertexText[0];
   }
 
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (getEffectiveHtmlLabels(getConfig())) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '<br />');
     log.info('vertexText' + vertexText);

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

@@ -1,5 +1,5 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { evaluate } from '../../diagrams/common/common.js';
+import { getEffectiveHtmlLabels } from '../../config.js';
 import { log } from '../../logger.js';
 import { createText } from '../createText.js';
 import utils from '../../utils.js';
@@ -45,7 +45,7 @@ export const getLabelStyles = (styleArray) => {
 };
 
 export const insertEdgeLabel = async (elem, edge) => {
-  let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
+  let useHtmlLabels = getEffectiveHtmlLabels(getConfig());
 
   const { labelStyles } = styles2String(edge);
   edge.labelStyle = labelStyles;
@@ -161,7 +161,7 @@ export const insertEdgeLabel = async (elem, edge) => {
  * @param {any} value
  */
 function setTerminalWidth(fo, value) {
-  if (getConfig().flowchart.htmlLabels && fo) {
+  if (getEffectiveHtmlLabels(getConfig()) && fo) {
     fo.style.width = value.length * 9 + 'px';
     fo.style.height = '12px';
   }

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

@@ -5,6 +5,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import type { D3Selection } from '../../../types.js';
 import { getConfig } from '../../../config.js';
+import { getEffectiveHtmlLabels } from '../../../config.js';
 
 export async function note<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -13,7 +14,7 @@ export async function note<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart?.htmlLabels !== false;
+  const useHtmlLabels = getEffectiveHtmlLabels(getConfig()) || node.useHtmlLabels;
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }

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

@@ -1,6 +1,7 @@
 import { createText } from '../../createText.js';
 import type { Node } from '../../types.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
+import { getEffectiveHtmlLabels } from '../../../config.js';
 import { select } from 'd3';
 import defaultConfig from '../../../defaultConfig.js';
 import { evaluate, sanitizeText } from '../../../diagrams/common/common.js';
@@ -130,7 +131,7 @@ export const insertLabel = async <T extends SVGGraphicsElement>(
     addSvgBackground?: boolean | undefined;
   }
 ) => {
-  const useHtmlLabels = options.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
+  const useHtmlLabels = getEffectiveHtmlLabels(getConfig()) || options.useHtmlLabels;
 
   // Create the label and insert it after the rect
   const labelEl = parent
@@ -148,7 +149,7 @@ export const insertLabel = async <T extends SVGGraphicsElement>(
   let bbox = text.getBBox();
   const halfPadding = options.padding / 2;
 
-  if (evaluate(getConfig()?.flowchart?.htmlLabels)) {
+  if (getEffectiveHtmlLabels(getConfig())) {
     const div = text.children[0];
     const dv = select(text);
 

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

@@ -153,6 +153,8 @@ properties:
     default: false
   htmlLabels:
     type: boolean # maybe unused, seems to be copied in each diagram config
+    default: true
+
   fontFamily:
     description: |
       Specifies the font to be used in the rendered diagrams.
@@ -2052,7 +2054,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       - titleTopMargin
       - subGraphTitleMargin
       - diagramPadding
-      - htmlLabels
       - nodeSpacing
       - rankSpacing
       - curve
@@ -2084,9 +2085,13 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
         default: 8
       htmlLabels:
         description: |
-          Flag for setting whether or not a html tag should be used for rendering labels on the edges.
+          **DEPRECATED: Use global `htmlLabels` instead.**
+
+          Flag for setting whether or not a html tag should be used for rendering labels on nodes and edges.
+          This property is deprecated.
+          Please use the global `htmlLabels` configuration instead.
         type: boolean
-        default: true
+        deprecated: true
       nodeSpacing:
         description: |
           Defines the spacing between nodes on the same level