diff --git a/.changeset/eight-crabs-sell.md b/.changeset/eight-crabs-sell.md new file mode 100644 index 00000000000..2ef0a3f73e7 --- /dev/null +++ b/.changeset/eight-crabs-sell.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Support the [`htmlLabels` Mermaid config value](https://mermaid.js.org/config/schema-docs/config.html#htmllabels) whenever possible diff --git a/.changeset/seven-towns-obey.md b/.changeset/seven-towns-obey.md new file mode 100644 index 00000000000..e9cef3473ac --- /dev/null +++ b/.changeset/seven-towns-obey.md @@ -0,0 +1,5 @@ +--- +'mermaid': minor +--- + +feat: Deprecate [`flowchart.htmlLabels`](https://mermaid.js.org/config/schema-docs/config-defs-flowchart-diagram-config.html#htmllabels) in favor of [root-level `htmlLabels`](https://mermaid.js.org/config/schema-docs/config.html#htmllabels) in Mermaid config diff --git a/docs/config/directives.md b/docs/config/directives.md index 40ebd81a46d..be77b3b0170 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -52,8 +52,8 @@ The following code snippet shows the structure of a directive: "theme": "dark", "fontFamily": "monospace", "logLevel": "info", + "htmlLabels": true, "flowchart": { - "htmlLabels": true, "curve": "linear" }, "sequence": { @@ -236,7 +236,7 @@ A --> C[End] Some common flowchart configurations are: -- _htmlLabels_: true/false +- ~~_htmlLabels_~~: Deprecated, [prefer setting this at the root level](/config/schema-docs/config#htmllabels). - _curve_: linear/curve - _diagramPadding_: number - _useMaxWidth_: number @@ -246,10 +246,15 @@ _Soon we plan to publish a complete list of all diagram-specific configurations 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`. +> **Warning** +> **Deprecated:** `flowchart.htmlLabels` has been deprecated from (v\+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level. + ```mermaid-example %%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%% graph TD diff --git a/docs/config/setup/config/README.md b/docs/config/setup/config/README.md index c811c7b08c4..fa87267edf5 100644 --- a/docs/config/setup/config/README.md +++ b/docs/config/setup/config/README.md @@ -17,7 +17,9 @@ ## Functions - [addDirective](functions/addDirective.md) +- [evaluate](functions/evaluate.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/addDirective.md b/docs/config/setup/config/functions/addDirective.md index 1e51c01082c..e5a0f3a70f0 100644 --- a/docs/config/setup/config/functions/addDirective.md +++ b/docs/config/setup/config/functions/addDirective.md @@ -12,7 +12,7 @@ > **addDirective**(`directive`): `void` -Defined in: [packages/mermaid/src/config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188) +Defined in: [packages/mermaid/src/config.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L197) Pushes in a directive to the configuration diff --git a/docs/config/setup/config/functions/evaluate.md b/docs/config/setup/config/functions/evaluate.md new file mode 100644 index 00000000000..f096c00a233 --- /dev/null +++ b/docs/config/setup/config/functions/evaluate.md @@ -0,0 +1,31 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/evaluate.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/evaluate.md). + +[**mermaid**](../../README.md) + +--- + +# Function: evaluate() + +> **evaluate**(`val?`): `boolean` + +Defined in: [packages/mermaid/src/config.ts:16](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L16) + +Converts a string/boolean into a boolean + +## Parameters + +### val? + +String or boolean to convert + +`string` | `boolean` + +## Returns + +`boolean` + +The result from the input diff --git a/docs/config/setup/config/functions/getConfig.md b/docs/config/setup/config/functions/getConfig.md index 0d5a7dc26a9..4be63b52ed3 100644 --- a/docs/config/setup/config/functions/getConfig.md +++ b/docs/config/setup/config/functions/getConfig.md @@ -12,7 +12,7 @@ > **getConfig**(): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md) -Defined in: [packages/mermaid/src/config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131) +Defined in: [packages/mermaid/src/config.ts:140](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L140) ## getConfig diff --git a/docs/config/setup/config/functions/getEffectiveHtmlLabels.md b/docs/config/setup/config/functions/getEffectiveHtmlLabels.md new file mode 100644 index 00000000000..689fe7afc16 --- /dev/null +++ b/docs/config/setup/config/functions/getEffectiveHtmlLabels.md @@ -0,0 +1,31 @@ +> **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:282](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L282) + +Helper function to handle deprecated flowchart.htmlLabels + +## Parameters + +### config + +[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md) + +The configuration object (merged config with defaults) + +## Returns + +`boolean` + +The effective htmlLabels value based on precedence: root flowchart default diff --git a/docs/config/setup/config/functions/getSiteConfig.md b/docs/config/setup/config/functions/getSiteConfig.md index f6490eb5927..342eaae7e5b 100644 --- a/docs/config/setup/config/functions/getSiteConfig.md +++ b/docs/config/setup/config/functions/getSiteConfig.md @@ -12,7 +12,7 @@ > **getSiteConfig**(): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md) -Defined in: [packages/mermaid/src/config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96) +Defined in: [packages/mermaid/src/config.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L105) ## getSiteConfig diff --git a/docs/config/setup/config/functions/getUserDefinedConfig.md b/docs/config/setup/config/functions/getUserDefinedConfig.md index ed39f133700..2510b57b387 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:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L263) ## Returns diff --git a/docs/config/setup/config/functions/reset.md b/docs/config/setup/config/functions/reset.md index 914537e4407..fcd4ea109e1 100644 --- a/docs/config/setup/config/functions/reset.md +++ b/docs/config/setup/config/functions/reset.md @@ -12,7 +12,7 @@ > **reset**(`config`): `void` -Defined in: [packages/mermaid/src/config.ts:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L221) +Defined in: [packages/mermaid/src/config.ts:230](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L230) ## reset diff --git a/docs/config/setup/config/functions/sanitize.md b/docs/config/setup/config/functions/sanitize.md index ce69da6738e..4eada26ced2 100644 --- a/docs/config/setup/config/functions/sanitize.md +++ b/docs/config/setup/config/functions/sanitize.md @@ -12,7 +12,7 @@ > **sanitize**(`options`): `void` -Defined in: [packages/mermaid/src/config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146) +Defined in: [packages/mermaid/src/config.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L155) ## sanitize diff --git a/docs/config/setup/config/functions/saveConfigFromInitialize.md b/docs/config/setup/config/functions/saveConfigFromInitialize.md index e911f493dd9..08f5528f6c0 100644 --- a/docs/config/setup/config/functions/saveConfigFromInitialize.md +++ b/docs/config/setup/config/functions/saveConfigFromInitialize.md @@ -12,7 +12,7 @@ > **saveConfigFromInitialize**(`conf`): `void` -Defined in: [packages/mermaid/src/config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75) +Defined in: [packages/mermaid/src/config.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L84) ## Parameters diff --git a/docs/config/setup/config/functions/setConfig.md b/docs/config/setup/config/functions/setConfig.md index 3ef79580ce6..aab8d946dde 100644 --- a/docs/config/setup/config/functions/setConfig.md +++ b/docs/config/setup/config/functions/setConfig.md @@ -12,7 +12,7 @@ > **setConfig**(`conf`): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md) -Defined in: [packages/mermaid/src/config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113) +Defined in: [packages/mermaid/src/config.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L122) ## setConfig diff --git a/docs/config/setup/config/functions/setSiteConfig.md b/docs/config/setup/config/functions/setSiteConfig.md index d2be54b8865..fb5001aac88 100644 --- a/docs/config/setup/config/functions/setSiteConfig.md +++ b/docs/config/setup/config/functions/setSiteConfig.md @@ -12,7 +12,7 @@ > **setSiteConfig**(`conf`): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md) -Defined in: [packages/mermaid/src/config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61) +Defined in: [packages/mermaid/src/config.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L70) ## setSiteConfig diff --git a/docs/config/setup/config/functions/updateCurrentConfig.md b/docs/config/setup/config/functions/updateCurrentConfig.md index d90b4f49731..6a69dcce5e8 100644 --- a/docs/config/setup/config/functions/updateCurrentConfig.md +++ b/docs/config/setup/config/functions/updateCurrentConfig.md @@ -12,7 +12,7 @@ > **updateCurrentConfig**(`siteCfg`, `_directives`): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md) -Defined in: [packages/mermaid/src/config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15) +Defined in: [packages/mermaid/src/config.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L24) ## Parameters diff --git a/docs/config/setup/config/functions/updateSiteConfig.md b/docs/config/setup/config/functions/updateSiteConfig.md index ba98ede2b78..1ce4720d65a 100644 --- a/docs/config/setup/config/functions/updateSiteConfig.md +++ b/docs/config/setup/config/functions/updateSiteConfig.md @@ -12,7 +12,7 @@ > **updateSiteConfig**(`conf`): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md) -Defined in: [packages/mermaid/src/config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79) +Defined in: [packages/mermaid/src/config.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L88) ## Parameters diff --git a/docs/config/setup/mermaid/interfaces/MermaidConfig.md b/docs/config/setup/mermaid/interfaces/MermaidConfig.md index f4c5b0b2b5e..32b3f8a327d 100644 --- a/docs/config/setup/mermaid/interfaces/MermaidConfig.md +++ b/docs/config/setup/mermaid/interfaces/MermaidConfig.md @@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/config.type.ts:58](https://github.com/mermaid- > `optional` **altFontFamily**: `string` -Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L132) +Defined in: [packages/mermaid/src/config.type.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L139) --- @@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid > `optional` **architecture**: `ArchitectureDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204) +Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211) --- @@ -34,7 +34,7 @@ Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid > `optional` **arrowMarkerAbsolute**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151) +Defined in: [packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158) Controls whether or arrow markers in html code are absolute paths or anchors. This matters if you are using base tag settings. @@ -45,7 +45,7 @@ This matters if you are using base tag settings. > `optional` **block**: `BlockDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211) +Defined in: [packages/mermaid/src/config.type.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L218) --- @@ -53,7 +53,7 @@ Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid > `optional` **c4**: `C4DiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208) +Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L215) --- @@ -61,7 +61,7 @@ Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid > `optional` **class**: `ClassDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197) +Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204) --- @@ -77,7 +77,7 @@ Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid > `optional` **deterministicIds**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184) +Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191) This option controls if the generated ids of nodes in the SVG are generated randomly or based on a seed. @@ -93,7 +93,7 @@ should not change unless content is changed. > `optional` **deterministicIDSeed**: `string` -Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191) +Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198) This option is the optional seed for deterministic ids. If set to `undefined` but deterministicIds is `true`, a simple number iterator is used. @@ -105,7 +105,7 @@ You can set this attribute to base the seed on a static string. > `optional` **dompurifyConfig**: `Config` -Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213) +Defined in: [packages/mermaid/src/config.type.ts:220](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L220) --- @@ -151,7 +151,7 @@ Elk specific option affecting how nodes are placed. > `optional` **er**: `ErDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) +Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206) --- @@ -159,7 +159,7 @@ Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid > `optional` **flowchart**: `FlowchartDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192) +Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199) --- @@ -167,7 +167,7 @@ Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid > `optional` **fontFamily**: `string` -Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131) +Defined in: [packages/mermaid/src/config.type.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L138) Specifies the font to be used in the rendered diagrams. Can be any possible CSS `font-family`. @@ -179,7 +179,7 @@ See > `optional` **fontSize**: `number` -Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L215) +Defined in: [packages/mermaid/src/config.type.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L222) --- @@ -187,7 +187,7 @@ Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid > `optional` **forceLegacyMathML**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173) +Defined in: [packages/mermaid/src/config.type.ts:180](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L180) This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS fonts and browser's MathML implementation, this option is recommended if consistent rendering is important. @@ -199,7 +199,7 @@ If set to true, ignores legacyMathML. > `optional` **gantt**: `GanttDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194) +Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201) --- @@ -207,7 +207,7 @@ Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid > `optional` **gitGraph**: `GitGraphDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207) +Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L214) --- @@ -225,7 +225,12 @@ Defines the seed to be used when using handDrawn look. This is important for the > `optional` **htmlLabels**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L124) +Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131) + +Flag for setting whether or not a html tag should be used for rendering labels on nodes and edges. +**Note:** Diagram-specific `htmlLabels` settings (e.g., `flowchart.htmlLabels`) are deprecated. +Use this root-level `htmlLabels` setting instead. The root-level `htmlLabels` takes precedence +over any diagram-specific settings. --- @@ -233,7 +238,7 @@ Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid > `optional` **journey**: `JourneyDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195) +Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202) --- @@ -241,7 +246,7 @@ Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid > `optional` **kanban**: `KanbanDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206) +Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213) --- @@ -259,7 +264,7 @@ Defines which layout algorithm to use for rendering the diagram. > `optional` **legacyMathML**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166) +Defined in: [packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173) This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers without their own MathML implementation. If this option is disabled and MathML is not supported, the math @@ -272,7 +277,7 @@ fall back to legacy rendering for KaTeX. > `optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5` -Defined in: [packages/mermaid/src/config.type.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137) +Defined in: [packages/mermaid/src/config.type.ts:144](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L144) This option decides the amount of logging to be used by mermaid. @@ -292,7 +297,7 @@ Defines which main look to use for the diagram. > `optional` **markdownAutoWrap**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:216](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L216) +Defined in: [packages/mermaid/src/config.type.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L223) --- @@ -320,7 +325,7 @@ The maximum allowed size of the users text diagram > `optional` **mindmap**: `MindmapDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205) +Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212) --- @@ -328,7 +333,7 @@ Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid > `optional` **packet**: `PacketDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210) +Defined in: [packages/mermaid/src/config.type.ts:217](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L217) --- @@ -336,7 +341,7 @@ Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid > `optional` **pie**: `PieDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200) +Defined in: [packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207) --- @@ -344,7 +349,7 @@ Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid > `optional` **quadrantChart**: `QuadrantChartConfig` -Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201) +Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208) --- @@ -352,7 +357,7 @@ Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid > `optional` **radar**: `RadarDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212) +Defined in: [packages/mermaid/src/config.type.ts:219](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L219) --- @@ -360,7 +365,7 @@ Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid > `optional` **requirement**: `RequirementDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203) +Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210) --- @@ -368,7 +373,7 @@ Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid > `optional` **sankey**: `SankeyDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209) +Defined in: [packages/mermaid/src/config.type.ts:216](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L216) --- @@ -376,7 +381,7 @@ Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid > `optional` **secure**: `string`\[] -Defined in: [packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158) +Defined in: [packages/mermaid/src/config.type.ts:165](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L165) This option controls which `currentConfig` keys are considered secure and can only be changed via call to `mermaid.initialize`. @@ -388,7 +393,7 @@ This prevents malicious graph directives from overriding a site's default securi > `optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"` -Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141) +Defined in: [packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148) Level of trust for parsed diagram @@ -398,7 +403,7 @@ Level of trust for parsed diagram > `optional` **sequence**: `SequenceDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193) +Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200) --- @@ -406,7 +411,7 @@ Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid > `optional` **startOnLoad**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145) +Defined in: [packages/mermaid/src/config.type.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L152) Dictates whether mermaid starts on Page load @@ -416,7 +421,7 @@ Dictates whether mermaid starts on Page load > `optional` **state**: `StateDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198) +Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205) --- @@ -424,7 +429,7 @@ Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid > `optional` **suppressErrorRendering**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L222) +Defined in: [packages/mermaid/src/config.type.ts:229](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L229) Suppresses inserting 'Syntax error' diagram in the DOM. This is useful when you want to control how to handle syntax errors in your application. @@ -462,7 +467,7 @@ Defined in: [packages/mermaid/src/config.type.ts:65](https://github.com/mermaid- > `optional` **timeline**: `TimelineDiagramConfig` -Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196) +Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203) --- @@ -470,7 +475,7 @@ Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid > `optional` **wrap**: `boolean` -Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L214) +Defined in: [packages/mermaid/src/config.type.ts:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L221) --- @@ -478,4 +483,4 @@ Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid > `optional` **xyChart**: `XYChartConfig` -Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202) +Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209) diff --git a/docs/config/usage.md b/docs/config/usage.md index e157d1827bb..0df1e1cbd3e 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/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 23c34509c67..323cd43584c 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -85,8 +85,7 @@ Use double quotes and backticks "\` text \`" to enclose the markdown text. ```mermaid-example --- config: - flowchart: - htmlLabels: false + htmlLabels: false --- flowchart LR markdown["`This **is** _Markdown_`"] @@ -99,8 +98,7 @@ flowchart LR ```mermaid --- config: - flowchart: - htmlLabels: false + htmlLabels: false --- flowchart LR markdown["`This **is** _Markdown_`"] @@ -1611,8 +1609,7 @@ The "Markdown Strings" feature enhances flowcharts and mind maps by offering a m ```mermaid-example --- config: - flowchart: - htmlLabels: false + htmlLabels: false --- flowchart LR subgraph "One" @@ -1628,8 +1625,7 @@ end ```mermaid --- config: - flowchart: - htmlLabels: false + htmlLabels: false --- flowchart LR subgraph "One" @@ -1760,7 +1756,8 @@ Beginner's tip—a full example using interactive links in a html context: }; const config = { startOnLoad: true, - flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' }, + htmlLabels: true, + flowchart: { useMaxWidth: true, curve: 'cardinal' }, securityLevel: 'loose', }; mermaid.initialize(config); diff --git a/packages/mermaid/src/assignWithDepth.ts b/packages/mermaid/src/assignWithDepth.ts index 125b6f434ad..b04c38b0eb1 100644 --- a/packages/mermaid/src/assignWithDepth.ts +++ b/packages/mermaid/src/assignWithDepth.ts @@ -53,6 +53,7 @@ const assignWithDepth = ( Object.keys(src).forEach((key) => { if ( typeof src[key] === 'object' && + src[key] !== null && (dst[key] === undefined || typeof dst[key] === 'object') ) { if (dst[key] === undefined) { diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts index 7fbae03af3e..b0a95c82f4f 100644 --- a/packages/mermaid/src/config.spec.ts +++ b/packages/mermaid/src/config.spec.ts @@ -262,3 +262,72 @@ describe('getUserDefinedConfig', () => { configApi.reset(); }); }); + +describe('getEffectiveHtmlLabels', () => { + beforeEach(() => { + configApi.reset(); + }); + + it('should return true when root-level htmlLabels is true', () => { + configApi.setSiteConfig({ htmlLabels: true }); + const config = configApi.getConfig(); + expect(configApi.getEffectiveHtmlLabels(config)).toBe(true); + }); + + it('should return false when root-level htmlLabels is false', () => { + configApi.setSiteConfig({ htmlLabels: false }); + const config = configApi.getConfig(); + expect(configApi.getEffectiveHtmlLabels(config)).toBe(false); + }); + + it('should return true when flowchart.htmlLabels is true and root is not set', () => { + configApi.setSiteConfig({ flowchart: { htmlLabels: true } }); + const config = configApi.getConfig(); + expect(configApi.getEffectiveHtmlLabels(config)).toBe(true); + }); + + it('should return false when flowchart.htmlLabels is false and root is not set', () => { + configApi.setSiteConfig({ flowchart: { htmlLabels: false } }); + const config = configApi.getConfig(); + expect(configApi.getEffectiveHtmlLabels(config)).toBe(false); + }); + + it('should prioritize root-level htmlLabels over flowchart.htmlLabels', () => { + configApi.setSiteConfig({ + htmlLabels: false, + flowchart: { htmlLabels: true }, + }); + const config = configApi.getConfig(); + expect(configApi.getEffectiveHtmlLabels(config)).toBe(false); + }); + + it('should default to true when neither root nor flowchart htmlLabels is explicitly set', () => { + configApi.setSiteConfig({}); + const config = configApi.getConfig(); + // flowchart.htmlLabels has a default of true in the schema + expect(configApi.getEffectiveHtmlLabels(config)).toBe(true); + }); + + it('should handle directives with flowchart.htmlLabels set to false', () => { + configApi.setSiteConfig({}); + // Add a directive that sets flowchart.htmlLabels to false + configApi.addDirective({ flowchart: { htmlLabels: false } }); + const config = configApi.getConfig(); + // Since flowchart.htmlLabels was explicitly set via directive, it should be false + expect(configApi.getEffectiveHtmlLabels(config)).toBe(false); + }); + + it('should handle directives with root htmlLabels taking precedence', () => { + configApi.setSiteConfig({ flowchart: { htmlLabels: true } }); + configApi.addDirective({ htmlLabels: false }); + const config = configApi.getConfig(); + expect(configApi.getEffectiveHtmlLabels(config)).toBe(false); + }); + + it('should handle directives with root htmlLabels true overriding flowchart htmlLabels false', () => { + configApi.setSiteConfig({ flowchart: { htmlLabels: false } }); + configApi.addDirective({ htmlLabels: true }); + const config = configApi.getConfig(); + expect(configApi.getEffectiveHtmlLabels(config)).toBe(true); + }); +}); diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 4fcb3224dc2..78682b631db 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -7,6 +7,15 @@ import { sanitizeDirective } from './utils/sanitizeDirective.js'; export const defaultConfig: MermaidConfig = Object.freeze(config); +/** + * Converts a string/boolean into a boolean + * + * @param val - String or boolean to convert + * @returns The result from the input + */ +export const evaluate = (val?: string | boolean): boolean => + val === false || ['false', 'null', '0'].includes(String(val).trim().toLowerCase()) ? false : true; + let siteConfig: MermaidConfig = assignWithDepth({}, defaultConfig); let configFromInitialize: MermaidConfig; let directives: MermaidConfig[] = []; @@ -227,6 +236,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 +273,16 @@ export const getUserDefinedConfig = (): MermaidConfig => { return userConfig; }; + +/** + * Helper function to handle deprecated flowchart.htmlLabels + * @param config - The configuration object (merged config with defaults) + * @returns The effective htmlLabels value based on precedence: root flowchart default + */ +export const getEffectiveHtmlLabels = (config: MermaidConfig): boolean => { + // != instead of !== handles null case + if (config.flowchart?.htmlLabels != undefined) { + issueWarning('FLOWCHART_HTML_LABELS_DEPRECATED'); + } + return evaluate(config.htmlLabels ?? config.flowchart?.htmlLabels ?? true); +}; diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 79fadd19531..37e8316fd47 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -121,6 +121,13 @@ export interface MermaidConfig { considerModelOrder?: 'NONE' | 'NODES_AND_EDGES' | 'PREFER_EDGES' | 'PREFER_NODES'; }; darkMode?: boolean; + /** + * Flag for setting whether or not a html tag should be used for rendering labels on nodes and edges. + * **Note:** Diagram-specific `htmlLabels` settings (e.g., `flowchart.htmlLabels`) are deprecated. + * Use this root-level `htmlLabels` setting instead. The root-level `htmlLabels` takes precedence + * over any diagram-specific settings. + * + */ htmlLabels?: boolean; /** * Specifies the font to be used in the rendered diagrams. @@ -248,10 +255,15 @@ 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; + htmlLabels?: boolean | null; /** * Defines the spacing between nodes on the same level * diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js index 4103c48f3ff..f218899867b 100644 --- a/packages/mermaid/src/dagre-wrapper/clusters.js +++ b/packages/mermaid/src/dagre-wrapper/clusters.js @@ -4,7 +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 { evaluate } from '../diagrams/common/common.js'; +import { getEffectiveHtmlLabels } from '../config.js'; import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js'; const rect = async (parent, node) => { @@ -20,7 +20,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 +38,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 +150,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 +190,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 fdab9a34ec6..d65a61f0cdc 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 f945caf94b1..bc0dc58bf33 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 24dd5610f00..ceb064c865d 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -1,6 +1,6 @@ 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 +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 (evaluate(getConfig().flowchart.htmlLabels)) { + if (getEffectiveHtmlLabels(getConfig())) { const div = text.children[0]; const dv = select(text); bbox = div.getBoundingClientRect(); @@ -609,7 +609,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 +917,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 +932,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 +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 (evaluate(getConfig().flowchart.htmlLabels)) { + if (getEffectiveHtmlLabels(getConfig())) { const div = classTitleLabel.children[0]; const dv = select(classTitleLabel); classTitleBBox = div.getBoundingClientRect(); @@ -958,7 +958,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 +972,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 +992,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 +1006,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 514457cf02c..5fa6077e315 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 = node.useHtmlLabels || getEffectiveHtmlLabels(getConfig()); 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 cbe6836047e..8a21b5f7f09 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 f273e58a75b..1d299932b67 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'; @@ -267,8 +268,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr edgeData.arrowheadStyle = 'fill: #333'; 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 a7b1e9ce80b..f76bcffb0ba 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 { evaluate, 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' || level === 'sandbox') { text = removeScript(text); @@ -165,14 +166,7 @@ export const getUrl = (useAbsolute: boolean): string => { return url; }; -/** - * Converts a string/boolean into a boolean - * - * @param val - String or boolean to convert - * @returns The result from the input - */ -export const evaluate = (val?: string | boolean): boolean => - val === false || ['false', 'null', '0'].includes(String(val).trim().toLowerCase()) ? false : true; +export { evaluate }; /** * Wrapper around Math.max which removes non-numeric values diff --git a/packages/mermaid/src/docs/config/directives.md b/packages/mermaid/src/docs/config/directives.md index 668c07c7a1d..e1ed6850ed0 100644 --- a/packages/mermaid/src/docs/config/directives.md +++ b/packages/mermaid/src/docs/config/directives.md @@ -48,8 +48,8 @@ The following code snippet shows the structure of a directive: "theme": "dark", "fontFamily": "monospace", "logLevel": "info", + "htmlLabels": true, "flowchart": { - "htmlLabels": true, "curve": "linear" }, "sequence": { @@ -185,7 +185,7 @@ A --> C[End] Some common flowchart configurations are: -- _htmlLabels_: true/false +- ~~_htmlLabels_~~: Deprecated, [prefer setting this at the root level](/config/schema-docs/config#htmllabels). - _curve_: linear/curve - _diagramPadding_: number - _useMaxWidth_: number @@ -195,10 +195,16 @@ _Soon we plan to publish a complete list of all diagram-specific configurations 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`. +```warning +**Deprecated:** `flowchart.htmlLabels` has been deprecated from (v+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level. +``` + ```mermaid-example %%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%% graph TD diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md index 9e82ab87aa6..9af070e52f3 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/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 341143c47db..8eb24b70b47 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -66,8 +66,7 @@ Use double quotes and backticks "\` text \`" to enclose the markdown text. ```mermaid-example --- config: - flowchart: - htmlLabels: false + htmlLabels: false --- flowchart LR markdown["`This **is** _Markdown_`"] @@ -988,8 +987,7 @@ The "Markdown Strings" feature enhances flowcharts and mind maps by offering a m ```mermaid-example --- config: - flowchart: - htmlLabels: false + htmlLabels: false --- flowchart LR subgraph "One" @@ -1098,7 +1096,8 @@ Beginner's tip—a full example using interactive links in a html context: }; const config = { startOnLoad: true, - flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' }, + htmlLabels: true, + flowchart: { useMaxWidth: true, curve: 'cardinal' }, securityLevel: 'loose', }; mermaid.initialize(config); diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index ff794abb17b..db7ef07254e 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -11,6 +11,7 @@ import mermaidAPI, { putIntoIFrame, removeExistingElements, } from './mermaidAPI.js'; +import * as configApi from './config.js'; // -------------- // Mocks @@ -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"', () => { diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 80deda740fc..d6efc9d08c0 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -10,6 +10,7 @@ import isEmpty from 'lodash-es/isEmpty.js'; 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'; @@ -127,7 +128,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 1dd87d4388e..d005106344f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.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 { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js'; import { select } from 'd3'; @@ -25,7 +25,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 +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(); @@ -188,7 +188,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 +264,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 +295,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 +310,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 de6f0403d29..1a0f2accd49 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 81cd79d466b..13567e23fa8 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'; @@ -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'; } 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 bc1e2d27788..23a67a957ca 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 = node.useHtmlLabels || getEffectiveHtmlLabels(getConfig()); if (!useHtmlLabels) { node.centerLabel = true; } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts index bcaf2787aa9..96c348f21f3 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts @@ -1,6 +1,5 @@ import type { Node } from '../../types.js'; import { select } from 'd3'; -import { evaluate } from '../../../diagrams/common/common.js'; import { updateNodeBounds } from './util.js'; import createLabel from '../createLabel.js'; import intersect from '../intersect/index.js'; @@ -10,6 +9,7 @@ import { getConfig } from '../../../diagram-api/diagramAPI.js'; import { createRoundedRectPathD } from './roundedRectPath.js'; import { log } from '../../../logger.js'; import type { D3Selection } from '../../../types.js'; +import { getEffectiveHtmlLabels } from '../../../config.js'; export async function rectWithTitle( parent: D3Selection, @@ -42,7 +42,7 @@ export async function rectWithTitle( 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(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts index d4bd3c34783..236f0a155fe 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts @@ -5,16 +5,15 @@ import type { Node } from '../../types.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; import { createPathFromPoints } from './util.js'; -import { evaluate } from '../../../diagrams/common/common.js'; import { getConfig } from '../../../diagram-api/diagramAPI.js'; import type { D3Selection } from '../../../types.js'; +import { getEffectiveHtmlLabels } from '../../../config.js'; export async function triangle(parent: D3Selection, node: Node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); - const useHtmlLabels = evaluate(getConfig().flowchart?.htmlLabels); - + const useHtmlLabels = node.useHtmlLabels || getEffectiveHtmlLabels(getConfig()); const w = bbox.width + (node.padding ?? 0); const h = w + bbox.height; 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 52471ecc078..96edee0fbe3 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 = options.useHtmlLabels ?? getEffectiveHtmlLabels(getConfig()); // 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 4b75c9704bf..c32b53ef6dd 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -152,7 +152,12 @@ properties: type: boolean default: false htmlLabels: - type: boolean # maybe unused, seems to be copied in each diagram config + description: | + Flag for setting whether or not a html tag should be used for rendering labels on nodes and edges. + **Note:** Diagram-specific `htmlLabels` settings (e.g., `flowchart.htmlLabels`) are deprecated. + Use this root-level `htmlLabels` setting instead. The root-level `htmlLabels` takes precedence + over any diagram-specific settings. + type: boolean fontFamily: description: | Specifies the font to be used in the rendered diagrams. @@ -2052,7 +2057,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) - titleTopMargin - subGraphTitleMargin - diagramPadding - - htmlLabels - nodeSpacing - rankSpacing - curve @@ -2084,9 +2088,16 @@ $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. - type: boolean - default: true + **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 + - 'null' + deprecated: true + default: null nodeSpacing: description: | Defines the spacing between nodes on the same level