From 1672edbd4919666857c8b9f731d7358b78c38436 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Thu, 25 Sep 2025 11:58:18 +0530 Subject: [PATCH] fix: deprecate flowchart.htmlLabels on-behalf-of: @Mermaid-Chart --- docs/config/directives.md | 15 ++++++---- docs/config/setup/config/README.md | 1 + .../functions/getEffectiveHtmlLabels.md | 29 +++++++++++++++++++ .../config/functions/getUserDefinedConfig.md | 2 +- docs/config/usage.md | 2 +- packages/mermaid/src/config.ts | 14 +++++++++ packages/mermaid/src/config.type.ts | 7 ++++- .../mermaid/src/dagre-wrapper/clusters.js | 11 +++---- .../mermaid/src/dagre-wrapper/createLabel.js | 5 ++-- packages/mermaid/src/dagre-wrapper/edges.js | 7 +++-- packages/mermaid/src/dagre-wrapper/nodes.js | 21 +++++++------- .../mermaid/src/dagre-wrapper/shapes/note.js | 3 +- .../mermaid/src/dagre-wrapper/shapes/util.js | 7 +++-- .../src/diagrams/class/classRenderer-v2.ts | 3 +- .../mermaid/src/diagrams/common/common.ts | 3 +- .../mermaid/src/docs/config/directives.md | 13 ++++++--- packages/mermaid/src/docs/config/usage.md | 2 +- packages/mermaid/src/mermaidAPI.ts | 3 +- .../rendering-elements/clusters.js | 15 +++++----- .../rendering-elements/createLabel.js | 4 +-- .../rendering-elements/edges.js | 5 ++-- .../rendering-elements/shapes/note.ts | 3 +- .../rendering-elements/shapes/util.ts | 5 ++-- .../mermaid/src/schemas/config.schema.yaml | 10 +++++-- 24 files changed, 134 insertions(+), 56 deletions(-) create mode 100644 docs/config/setup/config/functions/getEffectiveHtmlLabels.md diff --git a/docs/config/directives.md b/docs/config/directives.md index 40ebd81a4..327ea5bf4 100644 --- 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] diff --git a/docs/config/setup/config/README.md b/docs/config/setup/config/README.md index c811c7b08..6f7e451cb 100644 --- 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) diff --git a/docs/config/setup/config/functions/getEffectiveHtmlLabels.md b/docs/config/setup/config/functions/getEffectiveHtmlLabels.md new file mode 100644 index 000000000..da7f8a4a3 --- /dev/null +++ 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` diff --git a/docs/config/setup/config/functions/getUserDefinedConfig.md b/docs/config/setup/config/functions/getUserDefinedConfig.md index ed39f1337..5c037a84e 100644 --- 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 diff --git a/docs/config/usage.md b/docs/config/usage.md index e157d1827..0df1e1cbd 100644 --- 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 ``` diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 4fcb3224d..a9d3c1159 100644 --- 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; +}; diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 79fadd195..4a2555348 100644 --- 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; diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js index 4103c48f3..49f243384 100644 --- 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 })` ); diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js index fdab9a34e..d65a61f0c 100644 --- 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, '
'); log.debug('vertexText' + vertexText); diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js index f945caf94..bc0dc58bf 100644 --- 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'; } diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index 24dd5610f..28365f7eb 100644 --- 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 += '<' + node.classData.type + '>'; } else { classTitleString += '<' + node.classData.type + '>'; @@ -943,7 +944,7 @@ const class_box = async (parent, node) => { .appendChild(await createLabel(classTitleString, node.labelStyle, true, true)); select(classTitleLabel).attr('class', 'classTitle'); let classTitleBBox = classTitleLabel.getBBox(); - if (evaluate(getConfig().flowchart.htmlLabels)) { + if (getEffectiveHtmlLabels(getConfig())) { const div = classTitleLabel.children[0]; const dv = select(classTitleLabel); classTitleBBox = div.getBoundingClientRect(); @@ -958,7 +959,7 @@ const class_box = async (parent, node) => { node.classData.members.forEach(async (member) => { const parsedInfo = member.getDisplayDetails(); let parsedText = parsedInfo.displayText; - if (getConfig().flowchart.htmlLabels) { + if (getEffectiveHtmlLabels(getConfig())) { parsedText = parsedText.replace(//g, '>'); } 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, '>'); } 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(); diff --git a/packages/mermaid/src/dagre-wrapper/shapes/note.js b/packages/mermaid/src/dagre-wrapper/shapes/note.js index 514457cf0..9e7aad220 100644 --- 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; } diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js index cbe683604..8a21b5f7f 100644 --- 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); diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts index 0f02efa0d..0fe4ce3aa 100644 --- 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 = '' + edge.text + ''; } else { diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts index 045a729f7..0334782ef 100644 --- 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); diff --git a/packages/mermaid/src/docs/config/directives.md b/packages/mermaid/src/docs/config/directives.md index 668c07c7a..e583565de 100644 --- 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] diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md index 9e82ab87a..9af070e52 100644 --- 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 ``` diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index cf08d02f8..e69b52247 100644 --- 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 diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 1dd87d438..a8e829b6f 100644 --- 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(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js index de6f0403d..1a0f2accd 100644 --- 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, '
'); log.info('vertexText' + vertexText); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 9e308631a..1c875bfdf 100644 --- 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'; @@ -30,6 +30,7 @@ import rough from 'roughjs'; import createLabel from './createLabel.js'; import { addEdgeMarkers } from './edgeMarker.ts'; import { isLabelStyle, styles2String } from './shapes/handDrawnShapeStyles.js'; +import { evaluate } from '../../diagrams/common/common.js'; export const edgeLabels = new Map(); export const terminalLabels = new Map(); @@ -161,7 +162,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'; } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts index bc1e2d277..2680426d0 100644 --- 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( parent: D3Selection, @@ -13,7 +14,7 @@ export async function note( ) { 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; } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts index 52471ecc0..8f7b2ea82 100644 --- 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 ( 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 ( 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); diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 4b75c9704..f230eebee 100644 --- 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,14 @@ $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