chore: add changeset

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
fix: requirement diagram edge labels
2025-10-24 16:34:09 +02:00 · 2025-09-25 17:33:06 +05:30 · 2025-09-25 15:50:29 +05:30 · 2025-09-25 14:44:12 +05:30 · 2025-09-25 14:07:50 +05:30 · 2025-09-25 11:58:18 +05:30
42 changed files with 783 additions and 644 deletions
--- a/.changeset/deep-pumas-run.md
+++ b/.changeset/deep-pumas-run.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: Fix mindmap rendering in docs and apply tidytree layout
--- a/.changeset/four-eyes-wish.md
+++ b/.changeset/four-eyes-wish.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Ensure edge label color is applied when using classDef with edge IDs
--- a/.changeset/moody-fans-try.md
+++ b/.changeset/moody-fans-try.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Resolve gantt chart crash due to invalid array length
--- a/.changeset/proud-colts-smell.md
+++ b/.changeset/proud-colts-smell.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add IDs in architecture diagrams
--- a/.changeset/revert-marked-dependency.md
+++ b/.changeset/revert-marked-dependency.md
@@ -0,0 +1,9 @@
+---
+'mermaid': patch
+---
+
+chore: revert marked dependency from ^15.0.7 to ^16.0.0
+
+- Reverted marked package version to ^16.0.0 for better compatibility
+- This is a dependency update that maintains API compatibility
+- All tests pass with the updated version
--- a/.changeset/seven-towns-obey.md
+++ b/.changeset/seven-towns-obey.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Deprecate flowchart.htmlLabels in favor of root-level htmlLabels
--- a/docs/config/directives.md
+++ b/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]
--- a/docs/config/setup/config/README.md
+++ b/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)
--- a/docs/config/setup/config/functions/getEffectiveHtmlLabels.md
+++ b/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`
--- a/docs/config/setup/config/functions/getUserDefinedConfig.md
+++ b/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

--- a/docs/config/usage.md
+++ b/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>
 ```
--- a/package.json
+++ b/package.json
@@ -63,12 +63,12 @@
    ]
  },
  "devDependencies": {
-    "@applitools/eyes-cypress": "^3.44.9",
+    "@applitools/eyes-cypress": "^3.55.2",
    "@argos-ci/cypress": "^6.1.1",
    "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.27.12",
+    "@changesets/cli": "^2.29.7",
    "@cspell/eslint-plugin": "^8.19.4",
-    "@cypress/code-coverage": "^3.12.49",
+    "@cypress/code-coverage": "^3.14.6",
    "@eslint/js": "^9.26.0",
    "@rollup/plugin-typescript": "^12.1.4",
    "@types/cors": "^2.8.19",
@@ -77,22 +77,22 @@
    "@types/jsdom": "^21.1.7",
    "@types/lodash": "^4.17.20",
    "@types/mdast": "^4.0.4",
-    "@types/node": "^22.13.17",
+    "@types/node": "^22.18.6",
    "@types/rollup-plugin-visualizer": "^5.0.3",
-    "@vitest/coverage-v8": "^3.0.9",
-    "@vitest/spy": "^3.0.9",
-    "@vitest/ui": "^3.0.9",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/spy": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
    "ajv": "^8.17.1",
    "chokidar": "3.6.0",
-    "concurrently": "^9.1.2",
+    "concurrently": "^9.2.1",
    "cors": "^2.8.5",
    "cpy-cli": "^5.0.0",
    "cross-env": "^7.0.3",
-    "cspell": "^9.1.5",
+    "cspell": "^9.2.1",
    "cypress": "^14.5.4",
    "cypress-image-snapshot": "^4.0.1",
-    "cypress-split": "^1.24.21",
-    "esbuild": "^0.25.9",
+    "cypress-split": "^1.24.23",
+    "esbuild": "^0.25.10",
    "eslint": "^9.26.0",
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-cypress": "^4.3.0",
@@ -106,10 +106,10 @@
    "eslint-plugin-tsdoc": "^0.4.0",
    "eslint-plugin-unicorn": "^59.0.1",
    "express": "^5.1.0",
-    "globals": "^16.0.0",
+    "globals": "^16.4.0",
    "globby": "^14.1.0",
    "husky": "^9.1.7",
-    "jest": "^30.0.5",
+    "jest": "^30.1.3",
    "jison": "^0.4.18",
    "js-yaml": "^4.1.0",
    "jsdom": "^26.1.0",
@@ -118,18 +118,18 @@
    "markdown-table": "^3.0.4",
    "nyc": "^17.1.0",
    "path-browserify": "^1.0.1",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
    "prettier-plugin-jsdoc": "^1.3.3",
    "rimraf": "^6.0.1",
    "rollup-plugin-visualizer": "^6.0.3",
-    "start-server-and-test": "^2.0.13",
+    "start-server-and-test": "^2.1.2",
    "tslib": "^2.8.1",
-    "tsx": "^4.7.3",
+    "tsx": "^4.20.5",
    "typescript": "~5.7.3",
    "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.6",
+    "vite": "^7.0.7",
    "vite-plugin-istanbul": "^7.0.0",
-    "vitest": "^3.0.9"
+    "vitest": "^3.2.4"
  },
  "nyc": {
    "report-dir": "coverage/cypress"
--- a/packages/mermaid-example-diagram/package.json
+++ b/packages/mermaid-example-diagram/package.json
@@ -42,7 +42,7 @@
    "khroma": "^2.1.0"
  },
  "devDependencies": {
-    "concurrently": "^9.1.2",
+    "concurrently": "^9.2.1",
    "mermaid": "workspace:*",
    "rimraf": "^6.0.1"
  },
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -33,7 +33,7 @@
  ],
  "license": "MIT",
  "dependencies": {
-    "@zenuml/core": "^3.35.2"
+    "@zenuml/core": "^3.41.4"
  },
  "devDependencies": {
    "mermaid": "workspace:^"
--- a/packages/mermaid/CHANGELOG.md
+++ b/packages/mermaid/CHANGELOG.md
@@ -1,24 +1,5 @@
 # mermaid

-## 11.12.0
-
-### Minor Changes
-
- [#6921](https://github.com/mermaid-js/mermaid/pull/6921) [`764b315`](https://github.com/mermaid-js/mermaid/commit/764b315dc16d0359add7c6b8e3ef7592e9bdc09c) Thanks [@quilicicf](https://github.com/quilicicf)! - feat: Add IDs in architecture diagrams
-
-### Patch Changes
-
- [#6950](https://github.com/mermaid-js/mermaid/pull/6950) [`a957908`](https://github.com/mermaid-js/mermaid/commit/a9579083bfba367a4f4678547ec37ed7b61b9f5b) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - chore: Fix mindmap rendering in docs and apply tidytree layout
-
- [#6826](https://github.com/mermaid-js/mermaid/pull/6826) [`1d36810`](https://github.com/mermaid-js/mermaid/commit/1d3681053b9168354e48e5763023b6305cd1ca72) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Ensure edge label color is applied when using classDef with edge IDs
-
- [#6945](https://github.com/mermaid-js/mermaid/pull/6945) [`d318f1a`](https://github.com/mermaid-js/mermaid/commit/d318f1a13cd7429334a29c70e449074ec1cb9f68) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Resolve gantt chart crash due to invalid array length
-
- [#6918](https://github.com/mermaid-js/mermaid/pull/6918) [`cfe9238`](https://github.com/mermaid-js/mermaid/commit/cfe9238882cbe95416db1feea3112456a71b6aaf) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - chore: revert marked dependency from ^15.0.7 to ^16.0.0
-  - Reverted marked package version to ^16.0.0 for better compatibility
-  - This is a dependency update that maintains API compatibility
-  - All tests pass with the updated version
-
 ## 11.11.0

 ### Minor Changes
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "11.12.0",
+  "version": "11.11.0",
  "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
@@ -68,10 +68,10 @@
  },
  "dependencies": {
    "@braintree/sanitize-url": "^7.1.1",
-    "@iconify/utils": "^3.0.1",
+    "@iconify/utils": "^3.0.2",
    "@mermaid-js/parser": "workspace:^",
    "@types/d3": "^7.4.3",
-    "cytoscape": "^3.29.3",
+    "cytoscape": "^3.33.1",
    "cytoscape-cose-bilkent": "^4.1.0",
    "cytoscape-fcose": "^2.2.0",
    "d3": "^7.9.0",
@@ -82,7 +82,7 @@
    "katex": "^0.16.22",
    "khroma": "^2.1.0",
    "lodash-es": "^4.17.21",
-    "marked": "^16.2.1",
+    "marked": "^16.3.0",
    "roughjs": "^4.6.6",
    "stylis": "^4.3.6",
    "ts-dedent": "^2.2.0",
@@ -105,9 +105,9 @@
    "@types/stylis": "^4.2.7",
    "@types/uuid": "^10.0.0",
    "ajv": "^8.17.1",
-    "canvas": "^3.1.2",
+    "canvas": "^3.2.0",
    "chokidar": "3.6.0",
-    "concurrently": "^9.1.2",
+    "concurrently": "^9.2.1",
    "csstree-validator": "^4.0.1",
    "globby": "^14.1.0",
    "jison": "^0.4.18",
@@ -116,14 +116,14 @@
    "json-schema-to-typescript": "^15.0.4",
    "micromatch": "^4.0.8",
    "path-browserify": "^1.0.1",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
    "remark": "^15.0.1",
    "remark-frontmatter": "^5.0.0",
    "remark-gfm": "^4.0.1",
    "rimraf": "^6.0.1",
-    "start-server-and-test": "^2.0.13",
-    "type-fest": "^4.35.0",
-    "typedoc": "^0.28.12",
+    "start-server-and-test": "^2.1.2",
+    "type-fest": "^4.41.0",
+    "typedoc": "^0.28.13",
    "typedoc-plugin-markdown": "^4.8.1",
    "typescript": "~5.7.3",
    "unist-util-flatmap": "^1.0.0",
--- a/packages/mermaid/src/config.ts
+++ b/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;
+};
--- a/packages/mermaid/src/config.type.ts
+++ b/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;
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/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
    })`
  );
--- a/packages/mermaid/src/dagre-wrapper/createLabel.js
+++ b/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);
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/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';
  }
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/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 += '&lt;' + node.classData.type + '&gt;';
    } 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();
--- a/packages/mermaid/src/dagre-wrapper/shapes/note.js
+++ b/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;
  }
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/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);

--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/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 {
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/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);
--- a/packages/mermaid/src/diagrams/requirement/requirementDb.ts
+++ b/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: `&lt;&lt;${relation.type}&gt;&gt;`,
+        label: `«${relation.type}»`,
        classes: 'relationshipLine',
        style: ['fill:none', isContains ? '' : 'stroke-dasharray: 10,7'],
        labelpos: 'c',
--- a/packages/mermaid/src/diagrams/requirement/styles.js
+++ b/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;
--- a/packages/mermaid/src/docs/config/directives.md
+++ b/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]
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/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>
 ```
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -17,7 +17,7 @@
  },
  "dependencies": {
    "@mdi/font": "^7.4.47",
-    "@vueuse/core": "^13.1.0",
+    "@vueuse/core": "^13.9.0",
    "font-awesome": "^4.7.0",
    "jiti": "^2.4.2",
    "mermaid": "workspace:^",
@@ -25,17 +25,17 @@
  },
  "devDependencies": {
    "@iconify-json/carbon": "^1.2.13",
-    "@unocss/reset": "^66.0.0",
+    "@unocss/reset": "^66.5.1",
    "@vite-pwa/vitepress": "^1.0.0",
    "@vitejs/plugin-vue": "^6.0.1",
    "fast-glob": "^3.3.3",
    "https-localhost": "^4.7.1",
    "pathe": "^2.0.3",
-    "unocss": "^66.4.2",
-    "unplugin-vue-components": "^28.4.0",
-    "vite": "^7.0.0",
-    "vite-plugin-pwa": "^1.0.0",
-    "vitepress": "1.6.3",
+    "unocss": "^66.5.1",
+    "unplugin-vue-components": "^28.4.1",
+    "vite": "^7.0.7",
+    "vite-plugin-pwa": "^1.0.3",
+    "vitepress": "1.6.4",
    "workbox-window": "^7.3.0"
  }
 }
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/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);
+    });
+  });
 });
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/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
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/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();
--- a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
+++ b/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);
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/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';
  }
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ b/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;
  }
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts
+++ b/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);

--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/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
--- a/packages/tiny/CHANGELOG.md
+++ b/packages/tiny/CHANGELOG.md
@@ -1,24 +1,5 @@
 # mermaid

-## 11.12.0
-
-### Minor Changes
-
- [#6921](https://github.com/mermaid-js/mermaid/pull/6921) [`764b315`](https://github.com/mermaid-js/mermaid/commit/764b315dc16d0359add7c6b8e3ef7592e9bdc09c) Thanks [@quilicicf](https://github.com/quilicicf)! - feat: Add IDs in architecture diagrams
-
-### Patch Changes
-
- [#6950](https://github.com/mermaid-js/mermaid/pull/6950) [`a957908`](https://github.com/mermaid-js/mermaid/commit/a9579083bfba367a4f4678547ec37ed7b61b9f5b) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - chore: Fix mindmap rendering in docs and apply tidytree layout
-
- [#6826](https://github.com/mermaid-js/mermaid/pull/6826) [`1d36810`](https://github.com/mermaid-js/mermaid/commit/1d3681053b9168354e48e5763023b6305cd1ca72) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Ensure edge label color is applied when using classDef with edge IDs
-
- [#6945](https://github.com/mermaid-js/mermaid/pull/6945) [`d318f1a`](https://github.com/mermaid-js/mermaid/commit/d318f1a13cd7429334a29c70e449074ec1cb9f68) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Resolve gantt chart crash due to invalid array length
-
- [#6918](https://github.com/mermaid-js/mermaid/pull/6918) [`cfe9238`](https://github.com/mermaid-js/mermaid/commit/cfe9238882cbe95416db1feea3112456a71b6aaf) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - chore: revert marked dependency from ^15.0.7 to ^16.0.0
-  - Reverted marked package version to ^16.0.0 for better compatibility
-  - This is a dependency update that maintains API compatibility
-  - All tests pass with the updated version
-
 ## 11.11.0

 ### Minor Changes
--- a/packages/tiny/package.json
+++ b/packages/tiny/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/tiny",
-  "version": "11.12.0",
+  "version": "11.11.0",
  "description": "Tiny version of mermaid",
  "type": "commonjs",
  "main": "./dist/mermaid.tiny.js",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
darshanr0107	e82e464595	chore: add changeset on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-25 17:33:06 +05:30
darshanr0107	3b5bbb0e29	fix: requirement diagram edge labels on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-25 15:50:29 +05:30
darshanr0107	8f8c5c8d01	chore: remove default value of flowchart.htmlLabels from schema on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-25 14:44:12 +05:30
darshanr0107	0c659d486d	fix: add tests for deprecated flowchart.htmlLabels config option , update insertEdgeLabel to use new getEffectiveHtmlLabels helper on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-25 14:07:50 +05:30
darshanr0107	1672edbd49	fix: deprecate flowchart.htmlLabels on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-25 11:58:18 +05:30
Shubham P	d5c4eff251	Merge pull request #6972 from mermaid-js/renovate/patch-all-patch fix(deps): update all patch dependencies (patch)	2025-09-22 13:49:30 +00:00
renovate[bot]	5324fd8dfd	fix(deps): update all patch dependencies	2025-09-22 13:35:45 +00:00