fix: Upgrade npm to v11 to support trusted publishing

Version Packages

.changeset/deep-pumas-run.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: Fix mindmap rendering in docs and apply tidytree layout

.changeset/four-eyes-wish.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Ensure edge label color is applied when using classDef with edge IDs

.changeset/moody-fans-try.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Resolve gantt chart crash due to invalid array length

.changeset/proud-colts-smell.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Add IDs in architecture diagrams

.changeset/revert-marked-dependency.md

@@ -1,9 +0,0 @@
----
-'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

.changeset/seven-towns-obey.md

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

.github/workflows/release.yml

@@ -32,7 +32,9 @@ jobs:
           node-version-file: '.node-version'
 
       - name: Install Packages
-        run: pnpm install --frozen-lockfile
+        run: |
+          pnpm install --frozen-lockfile
+          npm install -g npm@11
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets

cypress/integration/rendering/gantt.spec.js

@@ -833,4 +833,34 @@ describe('Gantt diagram', () => {
       {}
     );
   });
+  it('should handle seconds-only format with tickInterval (issue #5496)', () => {
+    imgSnapshotTest(
+      `
+     gantt
+     tickInterval 1second
+     dateFormat ss
+     axisFormat %s
+
+     section Network Request
+     RTT : rtt, 0, 20
+    `,
+      {}
+    );
+  });
+  it('should handle dates with year typo like 202 instead of 2024 (issue #5496)', () => {
+    imgSnapshotTest(
+      `
+     gantt
+     title Schedule
+     dateFormat YYYY-MM-DD
+     tickInterval 1week
+     axisFormat %m-%d
+
+     section Vacation
+     London : 2024-12-01, 7d
+     London : 202-12-01, 7d
+    `,
+      {}
+    );
+  });
 });

docs/config/directives.md

@@ -236,27 +236,22 @@ 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: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
-```
+`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`
 
-**Note:** `flowchart.htmlLabels` has been deprecated. Use the global `htmlLabels` configuration instead.
+Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.
 
 ```mermaid-example
-%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
+%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
 graph TD
 A(Forest) --> B[/Another/]
 A --> C[End]
@@ -267,7 +262,7 @@ A --> C[End]
 ```
 
 ```mermaid
-%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
+%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
 graph TD
 A(Forest) --> B[/Another/]
 A --> C[End]

docs/config/setup/config/README.md

@@ -18,7 +18,6 @@
 
 - [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

@@ -1,29 +0,0 @@
-> **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:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L254)
+Defined in: [packages/mermaid/src/config.ts:252](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L252)
 
 ## 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, htmlLabels: true, flowchart: { useMaxWidth: false } };
+  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
   mermaid.initialize(config);
 </script>
 ```

docs/ecosystem/mermaid-chart.md

@@ -47,7 +47,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 ## Plans
 
-- **Free** - A free plan that includes three diagrams.
+- **Free** - A free plan that includes six diagrams.
 
 - **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
 

package.json

@@ -63,12 +63,12 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.55.2",
+    "@applitools/eyes-cypress": "^3.44.9",
     "@argos-ci/cypress": "^6.1.1",
     "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.29.7",
+    "@changesets/cli": "^2.27.12",
     "@cspell/eslint-plugin": "^8.19.4",
-    "@cypress/code-coverage": "^3.14.6",
+    "@cypress/code-coverage": "^3.12.49",
     "@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.18.6",
+    "@types/node": "^22.13.17",
     "@types/rollup-plugin-visualizer": "^5.0.3",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/spy": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
+    "@vitest/coverage-v8": "^3.0.9",
+    "@vitest/spy": "^3.0.9",
+    "@vitest/ui": "^3.0.9",
     "ajv": "^8.17.1",
     "chokidar": "3.6.0",
-    "concurrently": "^9.2.1",
+    "concurrently": "^9.1.2",
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "cspell": "^9.2.1",
+    "cspell": "^9.1.5",
     "cypress": "^14.5.4",
     "cypress-image-snapshot": "^4.0.1",
-    "cypress-split": "^1.24.23",
-    "esbuild": "^0.25.10",
+    "cypress-split": "^1.24.21",
+    "esbuild": "^0.25.9",
     "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.4.0",
+    "globals": "^16.0.0",
     "globby": "^14.1.0",
     "husky": "^9.1.7",
-    "jest": "^30.1.3",
+    "jest": "^30.0.5",
     "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.6.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-jsdoc": "^1.3.3",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^6.0.3",
-    "start-server-and-test": "^2.1.2",
+    "start-server-and-test": "^2.0.13",
     "tslib": "^2.8.1",
-    "tsx": "^4.20.5",
+    "tsx": "^4.7.3",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.7",
+    "vite": "^7.0.6",
     "vite-plugin-istanbul": "^7.0.0",
-    "vitest": "^3.2.4"
+    "vitest": "^3.0.9"
   },
   "nyc": {
     "report-dir": "coverage/cypress"

packages/mermaid-example-diagram/package.json

@@ -42,7 +42,7 @@
     "khroma": "^2.1.0"
   },
   "devDependencies": {
-    "concurrently": "^9.2.1",
+    "concurrently": "^9.1.2",
     "mermaid": "workspace:*",
     "rimraf": "^6.0.1"
   },

packages/mermaid-zenuml/package.json

@@ -33,7 +33,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@zenuml/core": "^3.41.4"
+    "@zenuml/core": "^3.35.2"
   },
   "devDependencies": {
     "mermaid": "workspace:^"

packages/mermaid/CHANGELOG.md

@@ -1,5 +1,36 @@
 # mermaid
 
+## 11.12.2
+
+### Patch Changes
+
+- [#7200](https://github.com/mermaid-js/mermaid/pull/7200) [`de7ed10`](https://github.com/mermaid-js/mermaid/commit/de7ed1033996d702e3983dcf8114f33faea89577) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - fix: validate dates and tick interval to prevent UI freeze/crash in gantt diagramtype
+
+## 11.12.1
+
+### Patch Changes
+
+- [#7107](https://github.com/mermaid-js/mermaid/pull/7107) [`cbf8946`](https://github.com/mermaid-js/mermaid/commit/cbf89462acecac7a06f19843e8d48cb137df0753) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - fix: Updated the dependency dagre-d3-es to 7.0.13 to fix GHSA-cc8p-78qf-8p7q
+
+## 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

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.11.0",
+  "version": "11.12.2",
   "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,21 +68,21 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^7.1.1",
-    "@iconify/utils": "^3.0.2",
+    "@iconify/utils": "^3.0.1",
     "@mermaid-js/parser": "workspace:^",
     "@types/d3": "^7.4.3",
-    "cytoscape": "^3.33.1",
+    "cytoscape": "^3.29.3",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.2.0",
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
-    "dagre-d3-es": "7.0.11",
+    "dagre-d3-es": "7.0.13",
     "dayjs": "^1.11.18",
     "dompurify": "^3.2.5",
     "katex": "^0.16.22",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "marked": "^16.3.0",
+    "marked": "^16.2.1",
     "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.2.0",
+    "canvas": "^3.1.2",
     "chokidar": "3.6.0",
-    "concurrently": "^9.2.1",
+    "concurrently": "^9.1.2",
     "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.6.2",
+    "prettier": "^3.5.3",
     "remark": "^15.0.1",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "rimraf": "^6.0.1",
-    "start-server-and-test": "^2.1.2",
-    "type-fest": "^4.41.0",
-    "typedoc": "^0.28.13",
+    "start-server-and-test": "^2.0.13",
+    "type-fest": "^4.35.0",
+    "typedoc": "^0.28.12",
     "typedoc-plugin-markdown": "^4.8.1",
     "typescript": "~5.7.3",
     "unist-util-flatmap": "^1.0.0",

packages/mermaid/src/config.ts

@@ -227,8 +227,6 @@ 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;
@@ -264,15 +262,3 @@ 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,12 +248,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    */
   diagramPadding?: number;
   /**
-   * @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.
+   * Flag for setting whether or not a html tag should be used for rendering labels on the edges.
    *
    */
   htmlLabels?: boolean;

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

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

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

@@ -1,7 +1,6 @@
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../config.js';
-import { sanitizeText } from '../diagrams/common/common.js';
+import { evaluate, sanitizeText } from '../diagrams/common/common.js';
 import { log } from '../logger.js';
 import { replaceIconSubstring } from '../rendering-util/createText.js';
 import { decodeEntities } from '../utils.js';
@@ -51,7 +50,7 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
     vertexText = vertexText[0];
   }
   const config = getConfig();
-  if (getEffectiveHtmlLabels(config)) {
+  if (evaluate(config.flowchart.htmlLabels)) {
     // 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,9 +3,8 @@ 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 { getUrl } from '../diagrams/common/common.js';
+import { evaluate, getUrl } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
 import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 import { addEdgeMarkers } from './edgeMarker.js';
@@ -20,7 +19,7 @@ export const clear = () => {
 
 export const insertEdgeLabel = async (elem, edge) => {
   const config = getConfig();
-  const useHtmlLabels = getEffectiveHtmlLabels(config);
+  const useHtmlLabels = evaluate(config.flowchart.htmlLabels);
   // Create the actual text element
   const labelElement =
     edge.labelType === 'markdown'
@@ -134,7 +133,7 @@ export const insertEdgeLabel = async (elem, edge) => {
  * @param {any} value
  */
 function setTerminalWidth(fo, value) {
-  if (getEffectiveHtmlLabels(getConfig()) && fo) {
+  if (getConfig().flowchart.htmlLabels && fo) {
     fo.style.width = value.length * 9 + 'px';
     fo.style.height = '12px';
   }

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

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

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

@@ -1,11 +1,10 @@
 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 = getEffectiveHtmlLabels(getConfig()) || node.useHtmlLabels;
+  const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }

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

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

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

@@ -3,7 +3,6 @@ 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';
@@ -261,7 +260,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 (getEffectiveHtmlLabels(getConfig())) {
+      if (getConfig().flowchart?.htmlLabels ?? getConfig().htmlLabels) {
         edgeData.labelType = 'html';
         edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
       } else {

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

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

packages/mermaid/src/diagrams/gantt/ganttDb.js

@@ -268,7 +268,15 @@ const fixTaskDates = function (startTime, endTime, dateFormat, excludes, include
 
 const getStartDate = function (prevTime, dateFormat, str) {
   str = str.trim();
-  if ((dateFormat.trim() === 'x' || dateFormat.trim() === 'X') && /^\d+$/.test(str)) {
+
+  // Helper function to check if format is a timestamp format (x or X)
+  const isTimestampFormat = (format) => {
+    const trimmedFormat = format.trim();
+    return trimmedFormat === 'x' || trimmedFormat === 'X';
+  };
+
+  // Handle timestamp formats (x, X) with numeric strings
+  if (isTimestampFormat(dateFormat) && /^\d+$/.test(str)) {
     return new Date(Number(str));
   }
   // Test for after
@@ -293,13 +301,15 @@ const getStartDate = function (prevTime, dateFormat, str) {
     return today;
   }
 
-  // Check for actual date set
+  // Check for actual date set using dayjs strict parsing
   let mDate = dayjs(str, dateFormat.trim(), true);
   if (mDate.isValid()) {
     return mDate.toDate();
   } else {
     log.debug('Invalid date:' + str);
     log.debug('With date format:' + dateFormat.trim());
+
+    // Timestamp formats can fall back to new Date()
     const d = new Date(str);
     if (
       d === undefined ||

packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts

@@ -505,4 +505,27 @@ describe('when using the ganttDb', function () {
     ganttDb.addTask('test1', 'id1,202304,1d');
     expect(() => ganttDb.getTasks()).toThrowError('Invalid date:202304');
   });
+
+  it('should handle seconds-only format with valid numeric values (issue #5496)', function () {
+    ganttDb.setDateFormat('ss');
+    ganttDb.addSection('Network Request');
+    ganttDb.addTask('RTT', 'rtt, 0, 20');
+    const tasks = ganttDb.getTasks();
+    expect(tasks).toHaveLength(1);
+    expect(tasks[0].task).toBe('RTT');
+    expect(tasks[0].id).toBe('rtt');
+  });
+
+  it('should handle dates with year typo like 202 instead of 2024 (issue #5496)', function () {
+    ganttDb.setDateFormat('YYYY-MM-DD');
+    ganttDb.addSection('Vacation');
+    ganttDb.addTask('London Trip 1', '2024-12-01, 7d');
+    ganttDb.addTask('London Trip 2', '202-12-01, 7d');
+    const tasks = ganttDb.getTasks();
+    expect(tasks).toHaveLength(2);
+    // First task should be in year 2024
+    expect(tasks[0].startTime.getFullYear()).toBe(2024);
+    // Second task will be parsed as year 202 (fallback to new Date())
+    expect(tasks[1].startTime.getFullYear()).toBe(202);
+  });
 });

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import dayjsDuration from 'dayjs/plugin/duration.js';
 import { log } from '../../logger.js';
 import {
   select,
@@ -28,6 +29,8 @@ import common from '../common/common.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 
+dayjs.extend(dayjsDuration);
+
 export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
 };
@@ -78,6 +81,7 @@ const getMaxIntersections = (tasks, orderOffset) => {
 };
 
 let w;
+const MAX_TICK_COUNT = 10000;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
 
@@ -602,6 +606,27 @@ export const draw = function (text, id, version, diagObj) {
       .attr('class', 'exclude-range');
   }
 
+  /**
+   * Calculates the estimated number of ticks based on the time domain and tick interval.
+   * Returns the estimated number of ticks as a number.
+   * @param {Date} minTime - The minimum time in the domain
+   * @param {Date} maxTime - The maximum time in the domain
+   * @param {number} every - The interval count (e.g., 1 for "1second")
+   * @param {string} interval - The interval unit (e.g., "second", "day")
+   * @returns {number} The estimated number of ticks
+   */
+  function getEstimatedTickCount(minTime, maxTime, every, interval) {
+    if (every <= 0 || minTime > maxTime) {
+      return Infinity;
+    }
+    const timeDiffMs = maxTime - minTime;
+    const intervalMs = dayjs.duration({ [interval ?? 'day']: every }).asMilliseconds();
+    if (intervalMs <= 0) {
+      return Infinity;
+    }
+    return Math.ceil(timeDiffMs / intervalMs);
+  }
+
   /**
    * @param theSidePad
    * @param theTopPad
@@ -630,32 +655,54 @@ export const draw = function (text, id, version, diagObj) {
     );
 
     if (resultTickInterval !== null) {
-      const every = resultTickInterval[1];
-      const interval = resultTickInterval[2];
-      const weekday = diagObj.db.getWeekday() || conf.weekday;
+      const every = parseInt(resultTickInterval[1], 10);
+      if (isNaN(every) || every <= 0) {
+        log.warn(
+          `Invalid tick interval value: "${resultTickInterval[1]}". Skipping custom tick interval.`
+        );
+        // Skip applying custom ticks
+      } else {
+        const interval = resultTickInterval[2];
+        const weekday = diagObj.db.getWeekday() || conf.weekday;
 
-      switch (interval) {
-        case 'millisecond':
-          bottomXAxis.ticks(timeMillisecond.every(every));
-          break;
-        case 'second':
-          bottomXAxis.ticks(timeSecond.every(every));
-          break;
-        case 'minute':
-          bottomXAxis.ticks(timeMinute.every(every));
-          break;
-        case 'hour':
-          bottomXAxis.ticks(timeHour.every(every));
-          break;
-        case 'day':
-          bottomXAxis.ticks(timeDay.every(every));
-          break;
-        case 'week':
-          bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
-          break;
-        case 'month':
-          bottomXAxis.ticks(timeMonth.every(every));
-          break;
+        // Get the time domain to check tick count
+        const domain = timeScale.domain();
+        const minTime = domain[0];
+        const maxTime = domain[1];
+        const estimatedTicks = getEstimatedTickCount(minTime, maxTime, every, interval);
+
+        if (estimatedTicks > MAX_TICK_COUNT) {
+          log.warn(
+            `The tick interval "${every}${interval}" would generate ${estimatedTicks} ticks, ` +
+              `which exceeds the maximum allowed (${MAX_TICK_COUNT}). ` +
+              `This may indicate an invalid date or time range. Skipping custom tick interval.`
+          );
+          // D3 will use its default automatic tick generation
+        } else {
+          switch (interval) {
+            case 'millisecond':
+              bottomXAxis.ticks(timeMillisecond.every(every));
+              break;
+            case 'second':
+              bottomXAxis.ticks(timeSecond.every(every));
+              break;
+            case 'minute':
+              bottomXAxis.ticks(timeMinute.every(every));
+              break;
+            case 'hour':
+              bottomXAxis.ticks(timeHour.every(every));
+              break;
+            case 'day':
+              bottomXAxis.ticks(timeDay.every(every));
+              break;
+            case 'week':
+              bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
+              break;
+            case 'month':
+              bottomXAxis.ticks(timeMonth.every(every));
+              break;
+          }
+        }
       }
     }
 
@@ -677,32 +724,48 @@ export const draw = function (text, id, version, diagObj) {
         .tickFormat(timeFormat(axisFormat));
 
       if (resultTickInterval !== null) {
-        const every = resultTickInterval[1];
-        const interval = resultTickInterval[2];
-        const weekday = diagObj.db.getWeekday() || conf.weekday;
+        const every = parseInt(resultTickInterval[1], 10);
+        if (isNaN(every) || every <= 0) {
+          log.warn(
+            `Invalid tick interval value: "${resultTickInterval[1]}". Skipping custom tick interval.`
+          );
+          // Skip applying custom ticks
+        } else {
+          const interval = resultTickInterval[2];
+          const weekday = diagObj.db.getWeekday() || conf.weekday;
 
-        switch (interval) {
-          case 'millisecond':
-            topXAxis.ticks(timeMillisecond.every(every));
-            break;
-          case 'second':
-            topXAxis.ticks(timeSecond.every(every));
-            break;
-          case 'minute':
-            topXAxis.ticks(timeMinute.every(every));
-            break;
-          case 'hour':
-            topXAxis.ticks(timeHour.every(every));
-            break;
-          case 'day':
-            topXAxis.ticks(timeDay.every(every));
-            break;
-          case 'week':
-            topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
-            break;
-          case 'month':
-            topXAxis.ticks(timeMonth.every(every));
-            break;
+          // Get the time domain to check tick count
+          const domain = timeScale.domain();
+          const minTime = domain[0];
+          const maxTime = domain[1];
+          const estimatedTicks = getEstimatedTickCount(minTime, maxTime, every, interval);
+
+          // Only apply custom ticks if the count is reasonable
+          if (estimatedTicks <= MAX_TICK_COUNT) {
+            switch (interval) {
+              case 'millisecond':
+                topXAxis.ticks(timeMillisecond.every(every));
+                break;
+              case 'second':
+                topXAxis.ticks(timeSecond.every(every));
+                break;
+              case 'minute':
+                topXAxis.ticks(timeMinute.every(every));
+                break;
+              case 'hour':
+                topXAxis.ticks(timeHour.every(every));
+                break;
+              case 'day':
+                topXAxis.ticks(timeDay.every(every));
+                break;
+              case 'week':
+                topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
+                break;
+              case 'month':
+                topXAxis.ticks(timeMonth.every(every));
+                break;
+            }
+          }
         }
       }
 

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,15 +40,6 @@ 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,27 +185,22 @@ 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: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
-```
+`%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%`
 
-**Note:** `flowchart.htmlLabels` has been deprecated. Use the global `htmlLabels` configuration instead.
+Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.
 
 ```mermaid-example
-%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
+%%{init: { "flowchart": { "htmlLabels": true, "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, htmlLabels: true, flowchart: { useMaxWidth: false } };
+  let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
   mermaid.initialize(config);
 </script>
 ```

packages/mermaid/src/docs/ecosystem/mermaid-chart.md

@@ -41,7 +41,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 ## Plans
 
-- **Free** - A free plan that includes three diagrams.
+- **Free** - A free plan that includes six diagrams.
 
 - **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
 

packages/mermaid/src/docs/package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
-    "@vueuse/core": "^13.9.0",
+    "@vueuse/core": "^13.1.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.5.1",
+    "@unocss/reset": "^66.0.0",
     "@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.5.1",
-    "unplugin-vue-components": "^28.4.1",
-    "vite": "^7.0.7",
-    "vite-plugin-pwa": "^1.0.3",
-    "vitepress": "1.6.4",
+    "unocss": "^66.4.2",
+    "unplugin-vue-components": "^28.4.0",
+    "vite": "^7.0.0",
+    "vite-plugin-pwa": "^1.0.0",
+    "vitepress": "1.6.3",
     "workbox-window": "^7.3.0"
   }
 }

packages/mermaid/src/mermaidAPI.spec.ts

@@ -2,7 +2,6 @@ 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,
@@ -359,11 +358,10 @@ describe('mermaidAPI', () => {
         });
 
         describe('no htmlLabels in the configuration', () => {
-          const mocked_config_no_htmlLabels: MermaidConfig = {
+          const mocked_config_no_htmlLabels = {
             themeCSS: 'default',
             fontFamily: 'serif',
             altFontFamily: 'sans-serif',
-            htmlLabels: false, // Explicitly set to false
           };
 
           describe('creates styles for shape elements "rect", "polygon", "ellipse", and "circle"', () => {
@@ -1150,63 +1148,4 @@ 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,7 +11,6 @@ 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';
@@ -129,7 +128,7 @@ export const createCssStyles = (
 
   // classDefs defined in the diagram text
   if (classDefs instanceof Map) {
-    const htmlLabels = getEffectiveHtmlLabels(config);
+    const htmlLabels = config.htmlLabels ?? config.flowchart?.htmlLabels; // TODO why specifically check the Flowchart diagram 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,6 +1,5 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { getEffectiveHtmlLabels } from '../../config.js';
-
+import { evaluate } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
 import { select } from 'd3';
@@ -26,7 +25,7 @@ const rect = async (parent, node) => {
     .attr('id', node.id)
     .attr('data-look', node.look);
 
-  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);
+  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
 
   // Create the label and insert it after the rect
   const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
@@ -40,7 +39,7 @@ const rect = async (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (getEffectiveHtmlLabels(siteConfig)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -189,7 +188,7 @@ const roundedWithTitle = async (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (getEffectiveHtmlLabels(siteConfig)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -265,7 +264,7 @@ const roundedWithTitle = async (parent, node) => {
 
   label.attr(
     'transform',
-    `translate(${node.x - bbox.width / 2}, ${y + 1 - (getEffectiveHtmlLabels(siteConfig) ? 0 : 3)})`
+    `translate(${node.x - bbox.width / 2}, ${y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})`
   );
 
   const rectBox = rect.node().getBBox();
@@ -296,7 +295,7 @@ const kanbanSection = async (parent, node) => {
     .attr('id', node.id)
     .attr('data-look', node.look);
 
-  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);
+  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
 
   // Create the label and insert it after the rect
   const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
@@ -311,7 +310,7 @@ const kanbanSection = async (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (getEffectiveHtmlLabels(siteConfig)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
     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 (getEffectiveHtmlLabels(getConfig())) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
     // 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 { getEffectiveHtmlLabels } from '../../config.js';
+import { evaluate } from '../../diagrams/common/common.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 = getEffectiveHtmlLabels(getConfig());
+  let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
 
   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 (getEffectiveHtmlLabels(getConfig()) && fo) {
+  if (getConfig().flowchart.htmlLabels && fo) {
     fo.style.width = value.length * 9 + 'px';
     fo.style.height = '12px';
   }

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

@@ -5,7 +5,6 @@ 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>,
@@ -14,7 +13,7 @@ export async function note<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const useHtmlLabels = getEffectiveHtmlLabels(getConfig()) || node.useHtmlLabels;
+  const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart?.htmlLabels !== false;
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }

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

@@ -1,7 +1,6 @@
 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';
@@ -131,7 +130,7 @@ export const insertLabel = async <T extends SVGGraphicsElement>(
     addSvgBackground?: boolean | undefined;
   }
 ) => {
-  const useHtmlLabels = getEffectiveHtmlLabels(getConfig()) || options.useHtmlLabels;
+  const useHtmlLabels = options.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
 
   // Create the label and insert it after the rect
   const labelEl = parent
@@ -149,7 +148,7 @@ export const insertLabel = async <T extends SVGGraphicsElement>(
   let bbox = text.getBBox();
   const halfPadding = options.padding / 2;
 
-  if (getEffectiveHtmlLabels(getConfig())) {
+  if (evaluate(getConfig()?.flowchart?.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
 

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

@@ -153,8 +153,6 @@ 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.
@@ -2054,6 +2052,7 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       - titleTopMargin
       - subGraphTitleMargin
       - diagramPadding
+      - htmlLabels
       - nodeSpacing
       - rankSpacing
       - curve
@@ -2085,13 +2084,9 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
         default: 8
       htmlLabels:
         description: |
-          **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.
+          Flag for setting whether or not a html tag should be used for rendering labels on the edges.
         type: boolean
-        deprecated: true
+        default: true
       nodeSpacing:
         description: |
           Defines the spacing between nodes on the same level

packages/parser/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @mermaid-js/parser
 
+## 0.6.3
+
+### Patch Changes
+
+- [#7051](https://github.com/mermaid-js/mermaid/pull/7051) [`63df702`](https://github.com/mermaid-js/mermaid/commit/63df7021462e8dc1f2aaecb9c5febbbbde4c38e3) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - Add validation for negative values in pie charts:
+
+  Prevents crashes during parsing by validating values post-parsing.
+
+  Provides clearer, user-friendly error messages for invalid negative inputs.
+
 ## 0.6.2
 
 ### Patch Changes

packages/parser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/parser",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "MermaidJS parser",
   "author": "Yokozuna59",
   "contributors": [

packages/tiny/CHANGELOG.md

@@ -1,5 +1,36 @@
 # mermaid
 
+## 11.12.2
+
+### Patch Changes
+
+- [#7200](https://github.com/mermaid-js/mermaid/pull/7200) [`de7ed10`](https://github.com/mermaid-js/mermaid/commit/de7ed1033996d702e3983dcf8114f33faea89577) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - fix: validate dates and tick interval to prevent UI freeze/crash in gantt diagramtype
+
+## 11.12.1
+
+### Patch Changes
+
+- [#7107](https://github.com/mermaid-js/mermaid/pull/7107) [`cbf8946`](https://github.com/mermaid-js/mermaid/commit/cbf89462acecac7a06f19843e8d48cb137df0753) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - fix: Updated the dependency dagre-d3-es to 7.0.13 to fix GHSA-cc8p-78qf-8p7q
+
+## 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

packages/tiny/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/tiny",
-  "version": "11.11.0",
+  "version": "11.12.2",
   "description": "Tiny version of mermaid",
   "type": "commonjs",
   "main": "./dist/mermaid.tiny.js",