chore: Fix types of MermaidConfig

.cspell/code-terms.txt

@@ -83,6 +83,7 @@ NODIR
 NSTR
 outdir
 Qcontrolx
+regexes
 reinit
 rels
 reqs

docs/config/setup/modules/config.md

@@ -6,6 +6,16 @@
 
 # Module: config
 
+## Type Aliases
+
+### PartialMermaidConfig
+
+Ƭ **PartialMermaidConfig**: `PartialDeep`<`MermaidConfig`>
+
+#### Defined in
+
+[config.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L10)
+
 ## Variables
 
 ### defaultConfig
@@ -14,7 +24,7 @@
 
 #### Defined in
 
-[config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
+[config.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L9)
 
 ## Functions
 
@@ -26,9 +36,9 @@ Pushes in a directive to the configuration
 
 #### Parameters
 
-| Name        | Type            | Description              |
+| Name        | Type                                     | Description              |
-| :---------- | :-------------- | :----------------------- |
+| :---------- | :--------------------------------------- | :----------------------- |
-| `directive` | `MermaidConfig` | The directive to push in |
+| `directive` | `PartialObjectDeep`<`MermaidConfig`, {}> | The directive to push in |
 
 #### Returns
 
@@ -36,7 +46,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
+[config.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L193)
 
 ---
 
@@ -60,7 +70,7 @@ The currentConfig
 
 #### Defined in
 
-[config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
+[config.ts:136](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L136)
 
 ---
 
@@ -84,7 +94,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
+[config.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L101)
 
 ---
 
@@ -118,7 +128,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)
+[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223)
 
 ---
 
@@ -147,7 +157,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
+[config.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L151)
 
 ---
 
@@ -157,9 +167,9 @@ options in-place
 
 #### Parameters
 
-| Name   | Type            |
+| Name   | Type                                     |
-| :----- | :-------------- |
+| :----- | :--------------------------------------- |
-| `conf` | `MermaidConfig` |
+| `conf` | `PartialObjectDeep`<`MermaidConfig`, {}> |
 
 #### Returns
 
@@ -167,7 +177,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
+[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80)
 
 ---
 
@@ -187,9 +197,9 @@ corresponding siteConfig value.
 
 #### Parameters
 
-| Name   | Type            | Description                 |
+| Name   | Type                                     | Description                 |
-| :----- | :-------------- | :-------------------------- |
+| :----- | :--------------------------------------- | :-------------------------- |
-| `conf` | `MermaidConfig` | The potential currentConfig |
+| `conf` | `PartialObjectDeep`<`MermaidConfig`, {}> | The potential currentConfig |
 
 #### Returns
 
@@ -199,7 +209,7 @@ The currentConfig merged with the sanitized conf
 
 #### Defined in
 
-[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
+[config.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L118)
 
 ---
 
@@ -220,9 +230,9 @@ function _Default value: At default, will mirror Global Config_
 
 #### Parameters
 
-| Name   | Type            | Description                                 |
+| Name   | Type                                     | Description                                 |
-| :----- | :-------------- | :------------------------------------------ |
+| :----- | :--------------------------------------- | :------------------------------------------ |
-| `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig |
+| `conf` | `PartialObjectDeep`<`MermaidConfig`, {}> | The base currentConfig to use as siteConfig |
 
 #### Returns
 
@@ -232,7 +242,7 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
+[config.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L66)
 
 ---
 
@@ -242,10 +252,10 @@ The new siteConfig
 
 #### Parameters
 
-| Name          | Type               |
+| Name          | Type                                        |
-| :------------ | :----------------- |
+| :------------ | :------------------------------------------ |
-| `siteCfg`     | `MermaidConfig`    |
+| `siteCfg`     | `MermaidConfig`                             |
-| `_directives` | `MermaidConfig`\[] |
+| `_directives` | `PartialObjectDeep`<`MermaidConfig`, {}>\[] |
 
 #### Returns
 
@@ -253,7 +263,7 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
+[config.ts:17](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L17)
 
 ---
 
@@ -263,9 +273,9 @@ The new siteConfig
 
 #### Parameters
 
-| Name   | Type            |
+| Name   | Type                                     |
-| :----- | :-------------- |
+| :----- | :--------------------------------------- |
-| `conf` | `MermaidConfig` |
+| `conf` | `PartialObjectDeep`<`MermaidConfig`, {}> |
 
 #### Returns
 
@@ -273,4 +283,4 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
+[config.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L84)

docs/config/setup/modules/mermaidAPI.md

@@ -32,7 +32,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 ### mermaidAPI
 
-• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
+• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `PartialObjectDeep`<`MermaidConfig`, {}>) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `PartialObjectDeep`<`MermaidConfig`, {}>) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `PartialObjectDeep`<`MermaidConfig`, {}>) => `MermaidConfig` = configApi.updateSiteConfig }>
 
 ## mermaidAPI configuration defaults
 

packages/mermaid/src/config.spec.ts

@@ -17,14 +17,14 @@ describe('when working with site config', () => {
     expect(config_1).toEqual(config_2);
   });
   it('should respect secure keys when applying directives', () => {
-    const config_0: MermaidConfig = {
+    const config_0 = {
       fontFamily: 'foo-font',
       securityLevel: 'strict', // can't be changed
       fontSize: 12345, // can't be changed
       secure: [...configApi.defaultConfig.secure!, 'fontSize'],
-    };
+    } as MermaidConfig;
     configApi.setSiteConfig(config_0);
-    const directive: MermaidConfig = {
+    const directive: configApi.PartialMermaidConfig = {
       fontFamily: 'baf',
       // fontSize and securityLevel shouldn't be changed
       fontSize: 54321,

packages/mermaid/src/config.ts

@@ -1,24 +1,29 @@
+import type { PartialDeep } from 'type-fest';
 import assignWithDepth from './assignWithDepth.js';
+import type { MermaidConfig } from './config.type.js';
+import config from './defaultConfig.js';
 import { log } from './logger.js';
 import theme from './themes/index.js';
-import config from './defaultConfig.js';
-import type { MermaidConfig } from './config.type.js';
 import { sanitizeDirective } from './utils/sanitizeDirective.js';
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
+export type PartialMermaidConfig = PartialDeep<MermaidConfig>;
 
 let siteConfig: MermaidConfig = assignWithDepth({}, defaultConfig);
-let configFromInitialize: MermaidConfig;
+let configFromInitialize: PartialMermaidConfig;
-let directives: MermaidConfig[] = [];
+let directives: PartialMermaidConfig[] = [];
 let currentConfig: MermaidConfig = assignWithDepth({}, defaultConfig);
 
-export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: MermaidConfig[]) => {
+export const updateCurrentConfig = (
+  siteCfg: MermaidConfig,
+  _directives: PartialMermaidConfig[]
+) => {
   // start with config being the siteConfig
   let cfg: MermaidConfig = assignWithDepth({}, siteCfg);
   // let sCfg = assignWithDepth(defaultConfig, siteConfigDelta);
 
   // Join directives
-  let sumOfDirectives: MermaidConfig = {};
+  let sumOfDirectives: PartialMermaidConfig = {};
   for (const d of _directives) {
     sanitize(d);
     // Apply the data from the directive where the overrides the themeVariables
@@ -58,7 +63,7 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: Mermaid
  * @param conf - The base currentConfig to use as siteConfig
  * @returns The new siteConfig
  */
-export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
+export const setSiteConfig = (conf: PartialMermaidConfig): MermaidConfig => {
   siteConfig = assignWithDepth({}, defaultConfig);
   siteConfig = assignWithDepth(siteConfig, conf);
 
@@ -72,11 +77,11 @@ export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
   return siteConfig;
 };
 
-export const saveConfigFromInitialize = (conf: MermaidConfig): void => {
+export const saveConfigFromInitialize = (conf: PartialMermaidConfig): void => {
   configFromInitialize = assignWithDepth({}, conf);
 };
 
-export const updateSiteConfig = (conf: MermaidConfig): MermaidConfig => {
+export const updateSiteConfig = (conf: PartialMermaidConfig): MermaidConfig => {
   siteConfig = assignWithDepth(siteConfig, conf);
   updateCurrentConfig(siteConfig, directives);
 
@@ -110,7 +115,7 @@ export const getSiteConfig = (): MermaidConfig => {
  * @param conf - The potential currentConfig
  * @returns The currentConfig merged with the sanitized conf
  */
-export const setConfig = (conf: MermaidConfig): MermaidConfig => {
+export const setConfig = (conf: PartialMermaidConfig): MermaidConfig => {
   checkConfig(conf);
   assignWithDepth(currentConfig, conf);
 
@@ -185,7 +190,7 @@ export const sanitize = (options: any) => {
  *
  * @param directive - The directive to push in
  */
-export const addDirective = (directive: MermaidConfig) => {
+export const addDirective = (directive: PartialMermaidConfig) => {
   sanitizeDirective(directive);
 
   // If the directive has a fontFamily, but no themeVariables, add the fontFamily to the themeVariables
@@ -236,7 +241,7 @@ const issueWarning = (warning: ConfigWarningStrings) => {
   issuedWarnings[warning] = true;
 };
 
-const checkConfig = (config: MermaidConfig) => {
+const checkConfig = (config: PartialMermaidConfig) => {
   if (!config) {
     return;
   }

packages/mermaid/src/diagram-api/detectType.ts

@@ -1,13 +1,13 @@
 import type { MermaidConfig } from '../config.type.js';
+import { UnknownDiagramError } from '../errors.js';
 import { log } from '../logger.js';
+import { anyCommentRegex, directiveRegex, frontMatterRegex } from './regexes.js';
 import type {
   DetectorRecord,
   DiagramDetector,
   DiagramLoader,
   ExternalDiagramDefinition,
 } from './types.js';
-import { anyCommentRegex, directiveRegex, frontMatterRegex } from './regexes.js';
-import { UnknownDiagramError } from '../errors.js';
 
 export const detectors: Record<string, DetectorRecord> = {};
 

packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts

@@ -1,4 +1,5 @@
-import { it, describe, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
+import type { MermaidConfig } from '../config.type.js';
 import { detectType } from './detectType.js';
 import { addDiagrams } from './diagram-orchestration.js';
 
@@ -46,30 +47,40 @@ describe('diagram-orchestration', () => {
       // graph & dagre-d3 => flowchart
       expect(detectType('graph TD; A-->B')).toBe('flowchart');
       // graph & dagre-d3 => flowchart
-      expect(detectType('graph TD; A-->B', { flowchart: { defaultRenderer: 'dagre-d3' } })).toBe(
+      expect(
-        'flowchart'
+        detectType('graph TD; A-->B', {
-      );
+          flowchart: { defaultRenderer: 'dagre-d3' },
+        } as MermaidConfig)
+      ).toBe('flowchart');
       // flowchart & dagre-d3 => error
       expect(() =>
-        detectType('flowchart TD; A-->B', { flowchart: { defaultRenderer: 'dagre-d3' } })
+        detectType('flowchart TD; A-->B', {
+          flowchart: { defaultRenderer: 'dagre-d3' },
+        } as MermaidConfig)
       ).toThrowErrorMatchingInlineSnapshot(
         `[UnknownDiagramError: No diagram type detected matching given configuration for text: flowchart TD; A-->B]`
       );
 
       // graph & dagre-wrapper => flowchart-v2
       expect(
-        detectType('graph TD; A-->B', { flowchart: { defaultRenderer: 'dagre-wrapper' } })
+        detectType('graph TD; A-->B', {
+          flowchart: { defaultRenderer: 'dagre-wrapper' },
+        } as MermaidConfig)
       ).toBe('flowchart-v2');
       // flowchart ==> flowchart-v2
       expect(detectType('flowchart TD; A-->B')).toBe('flowchart-v2');
       // flowchart && dagre-wrapper ==> flowchart-v2
       expect(
-        detectType('flowchart TD; A-->B', { flowchart: { defaultRenderer: 'dagre-wrapper' } })
+        detectType('flowchart TD; A-->B', {
+          flowchart: { defaultRenderer: 'dagre-wrapper' },
+        } as MermaidConfig)
       ).toBe('flowchart-v2');
       // flowchart && elk ==> flowchart-elk
-      expect(detectType('flowchart TD; A-->B', { flowchart: { defaultRenderer: 'elk' } })).toBe(
+      expect(
-        'flowchart-elk'
+        detectType('flowchart TD; A-->B', {
-      );
+          flowchart: { defaultRenderer: 'elk' },
+        } as MermaidConfig)
+      ).toBe('flowchart-elk');
     });
 
     it('should not detect flowchart if pie contains flowchart', () => {

packages/mermaid/src/diagram-api/frontmatter.ts

@@ -1,4 +1,5 @@
-import type { GanttDiagramConfig, MermaidConfig } from '../config.type.js';
+import type { PartialMermaidConfig } from '../config.js';
+import type { GanttDiagramConfig } from '../config.type.js';
 import { frontMatterRegex } from './regexes.js';
 // The "* as yaml" part is necessary for tree-shaking
 import * as yaml from 'js-yaml';
@@ -7,7 +8,7 @@ interface FrontMatterMetadata {
   title?: string;
   // Allows custom display modes. Currently used for compact mode in gantt charts.
   displayMode?: GanttDiagramConfig['displayMode'];
-  config?: MermaidConfig;
+  config?: PartialMermaidConfig;
 }
 
 export interface FrontMatterResult {

packages/mermaid/src/diagram-api/types.ts

@@ -2,11 +2,12 @@
 import type * as d3 from 'd3';
 import type { SetRequired } from 'type-fest';
 import type { Diagram } from '../Diagram.js';
-import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js';
+import type { PartialMermaidConfig } from '../config.js';
+import type { BaseDiagramConfig } from '../config.type.js';
 
 export interface DiagramMetadata {
   title?: string;
-  config?: MermaidConfig;
+  config?: PartialMermaidConfig;
 }
 
 export interface InjectUtils {
@@ -78,7 +79,7 @@ export interface DiagramDefinition {
   renderer: DiagramRenderer;
   parser: ParserDefinition;
   styles?: any;
-  init?: (config: MermaidConfig) => void;
+  init?: (config: PartialMermaidConfig) => void;
   injectUtils?: (
     _log: InjectUtils['_log'],
     _setLogLevel: InjectUtils['_setLogLevel'],
@@ -102,7 +103,7 @@ export interface ExternalDiagramDefinition {
   loader: DiagramLoader;
 }
 
-export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
+export type DiagramDetector = (text: string, config?: PartialMermaidConfig) => boolean;
 export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>;
 
 /**

packages/mermaid/src/diagrams/c4/c4Diagram.ts

@@ -1,17 +1,16 @@
-// @ts-ignore: JISON doesn't support types
+import type { DiagramDefinition } from '../../diagram-api/types.js';
-import parser from './parser/c4Diagram.jison';
 import db from './c4Db.js';
 import renderer from './c4Renderer.js';
+// @ts-ignore: JISON doesn't support types
+import parser from './parser/c4Diagram.jison';
 import styles from './styles.js';
-import type { MermaidConfig } from '../../config.type.js';
-import type { DiagramDefinition } from '../../diagram-api/types.js';
 
 export const diagram: DiagramDefinition = {
   parser,
   db,
   renderer,
   styles,
-  init: ({ c4, wrap }: MermaidConfig) => {
+  init: ({ c4, wrap }) => {
     renderer.setConf(c4);
     db.setWrap(wrap);
   },

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

@@ -1,4 +1,5 @@
-import { sanitizeText, removeScript, parseGenericTypes, countOccurrence } from './common.js';
+import type { MermaidConfig } from '../../config.type.js';
+import { countOccurrence, parseGenericTypes, removeScript, sanitizeText } from './common.js';
 
 describe('when securityLevel is antiscript, all script must be removed', () => {
   /**
@@ -67,7 +68,7 @@ describe('Sanitize text', () => {
     const result = sanitizeText(maliciousStr, {
       securityLevel: 'strict',
       flowchart: { htmlLabels: true },
-    });
+    } as MermaidConfig);
     expect(result).not.toContain('javascript:alert(1)');
   });
 });

packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts

@@ -1,17 +1,17 @@
-// @ts-ignore: JISON doesn't support types
+import { setConfig } from '../../diagram-api/diagramAPI.js';
-import flowParser from './parser/flow.jison';
+import type { DiagramDefinition } from '../../diagram-api/types.js';
 import flowDb from './flowDb.js';
 import flowRendererV2 from './flowRenderer-v2.js';
+// @ts-ignore: JISON doesn't support types
+import flowParser from './parser/flow.jison';
 import flowStyles from './styles.js';
-import type { MermaidConfig } from '../../config.type.js';
-import { setConfig } from '../../diagram-api/diagramAPI.js';
 
-export const diagram = {
+export const diagram: DiagramDefinition = {
   parser: flowParser,
   db: flowDb,
   renderer: flowRendererV2,
   styles: flowStyles,
-  init: (cnf: MermaidConfig) => {
+  init: (cnf) => {
     if (!cnf.flowchart) {
       cnf.flowchart = {};
     }

packages/mermaid/src/diagrams/flowchart/flowDiagram.ts

@@ -1,17 +1,17 @@
+import type { DiagramDefinition } from '../../diagram-api/types.js';
+import flowDb from './flowDb.js';
+import flowRendererV2 from './flowRenderer-v2.js';
+import flowRenderer from './flowRenderer.js';
 // @ts-ignore: JISON doesn't support types
 import flowParser from './parser/flow.jison';
-import flowDb from './flowDb.js';
-import flowRenderer from './flowRenderer.js';
-import flowRendererV2 from './flowRenderer-v2.js';
 import flowStyles from './styles.js';
-import type { MermaidConfig } from '../../config.type.js';
 
-export const diagram = {
+export const diagram: DiagramDefinition = {
   parser: flowParser,
   db: flowDb,
   renderer: flowRendererV2,
   styles: flowStyles,
-  init: (cnf: MermaidConfig) => {
+  init: (cnf) => {
     if (!cnf.flowchart) {
       cnf.flowchart = {};
     }

packages/mermaid/src/mermaidAPI.spec.ts

@@ -1,4 +1,4 @@
-import { vi, it, expect, describe, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 // -------------------------------------
 //  Mocks and mocking
@@ -67,8 +67,8 @@ vi.mock('stylis', () => {
 });
 
 import { compile, serialize } from 'stylis';
-import { decodeEntities, encodeEntities } from './utils.js';
 import { Diagram } from './Diagram.js';
+import { decodeEntities, encodeEntities } from './utils.js';
 
 /**
  * @see https://vitest.dev/guide/mocking.html Mock part of a module
@@ -283,12 +283,12 @@ describe('mermaidAPI', () => {
   describe('createCssStyles', () => {
     const serif = 'serif';
     const sansSerif = 'sans-serif';
-    const mocked_config_with_htmlLabels: MermaidConfig = {
+    const mocked_config_with_htmlLabels = {
       themeCSS: 'default',
       fontFamily: serif,
       altFontFamily: sansSerif,
       htmlLabels: true,
-    };
+    } as MermaidConfig;
 
     it('gets the cssStyles from the theme', () => {
       const styles = createCssStyles(mocked_config_with_htmlLabels, null);
@@ -389,14 +389,14 @@ describe('mermaidAPI', () => {
         });
 
         it('there are flowchart.htmlLabels in the configuration', () => {
-          const mocked_config_flowchart_htmlLabels: MermaidConfig = {
+          const mocked_config_flowchart_htmlLabels = {
             themeCSS: 'default',
             fontFamily: 'serif',
             altFontFamily: 'sans-serif',
             flowchart: {
               htmlLabels: true,
             },
-          };
+          } as MermaidConfig;
           expect_correct_styles_with_htmlElements(mocked_config_flowchart_htmlLabels);
         });
 
@@ -405,7 +405,7 @@ describe('mermaidAPI', () => {
             themeCSS: 'default',
             fontFamily: 'serif',
             altFontFamily: 'sans-serif',
-          };
+          } as MermaidConfig;
 
           describe('creates styles for shape elements "rect", "polygon", "ellipse", and "circle"', () => {
             const htmlElements = ['rect', 'polygon', 'ellipse', 'circle'];
@@ -430,7 +430,7 @@ describe('mermaidAPI', () => {
       themeCSS: 'default',
       htmlLabels: true,
       themeVariables: { fontFamily: 'serif' },
-    };
+    } as MermaidConfig;
 
     const classDef1 = { id: 'classDef1', styles: ['style1-1'], textStyles: [] };
 

packages/mermaid/src/mermaidAPI.ts

@@ -14,22 +14,22 @@
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
 // @ts-ignore: TODO Fix ts errors
+import DOMPurify from 'dompurify';
+import isEmpty from 'lodash-es/isEmpty.js';
 import { version } from '../package.json';
-import * as configApi from './config.js';
-import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { Diagram } from './Diagram.js';
+import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
+import * as configApi 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';
+import { evaluate } from './diagrams/common/common.js';
 import errorRenderer from './diagrams/error/errorRenderer.js';
 import { attachFunctions } from './interactionDb.js';
 import { log, setLogLevel } from './logger.js';
+import { preprocessDiagram } from './preprocess.js';
 import getStyles from './styles.js';
 import theme from './themes/index.js';
-import DOMPurify from 'dompurify';
-import type { MermaidConfig } from './config.type.js';
-import { evaluate } from './diagrams/common/common.js';
-import isEmpty from 'lodash-es/isEmpty.js';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
-import { preprocessDiagram } from './preprocess.js';
 import { decodeEntities } from './utils.js';
 
 const MAX_TEXTLENGTH = 50_000;
@@ -517,7 +517,7 @@ const render = async function (
 /**
  * @param  options - Initial Mermaid options
  */
-function initialize(options: MermaidConfig = {}) {
+function initialize(options: configApi.PartialMermaidConfig = {}) {
   // Handle legacy location of font-family configuration
   if (options?.fontFamily && !options.themeVariables?.fontFamily) {
     if (!options.themeVariables) {

packages/mermaid/src/preprocess.ts

@@ -1,3 +1,4 @@
+import type { PartialMermaidConfig } from './config.js';
 import { cleanupComments } from './diagram-api/comments.js';
 import { extractFrontMatter } from './diagram-api/frontmatter.js';
 import type { DiagramMetadata } from './diagram-api/types.js';
@@ -30,7 +31,7 @@ const processFrontmatter = (code: string) => {
 };
 
 const processDirectives = (code: string) => {
-  const initDirective = utils.detectInit(code) ?? {};
+  const initDirective: PartialMermaidConfig = utils.detectInit(code) ?? {};
   const wrapDirectives = utils.detectDirective(code, 'wrap');
   if (Array.isArray(wrapDirectives)) {
     initDirective.wrap = wrapDirectives.some(({ type }) => {

packages/mermaid/src/rendering-util/handle-markdown-text.ts

@@ -1,14 +1,14 @@
 import type { Content } from 'mdast';
 import { fromMarkdown } from 'mdast-util-from-markdown';
 import { dedent } from 'ts-dedent';
+import type { PartialMermaidConfig } from '../config.js';
 import type { MarkdownLine, MarkdownWordType } from './types.js';
-import type { MermaidConfig } from '../config.type.js';
 
 /**
  * @param markdown - markdown to process
  * @returns processed markdown
  */
-function preprocessMarkdown(markdown: string, { markdownAutoWrap }: MermaidConfig): string {
+function preprocessMarkdown(markdown: string, { markdownAutoWrap }: PartialMermaidConfig): string {
   // Replace multiple newlines with a single newline
   const withoutMultipleNewlines = markdown.replace(/\n{2,}/g, '\n');
   // Remove extra spaces at the beginning of each line
@@ -22,7 +22,10 @@ function preprocessMarkdown(markdown: string, { markdownAutoWrap }: MermaidConfi
 /**
  * @param markdown - markdown to split into lines
  */
-export function markdownToLines(markdown: string, config: MermaidConfig = {}): MarkdownLine[] {
+export function markdownToLines(
+  markdown: string,
+  config: PartialMermaidConfig = {}
+): MarkdownLine[] {
   const preprocessedMarkdown = preprocessMarkdown(markdown, config);
   const { children } = fromMarkdown(preprocessedMarkdown);
   const lines: MarkdownLine[] = [[]];
@@ -60,7 +63,7 @@ export function markdownToLines(markdown: string, config: MermaidConfig = {}): M
   return lines;
 }
 
-export function markdownToHTML(markdown: string, { markdownAutoWrap }: MermaidConfig = {}) {
+export function markdownToHTML(markdown: string, { markdownAutoWrap }: PartialMermaidConfig = {}) {
   const { children } = fromMarkdown(markdown);
 
   function output(node: Content): string {

packages/mermaid/src/utils.ts

@@ -7,12 +7,12 @@ import {
   curveBumpX,
   curveBumpY,
   curveBundle,
+  curveCardinal,
   curveCardinalClosed,
   curveCardinalOpen,
-  curveCardinal,
+  curveCatmullRom,
   curveCatmullRomClosed,
   curveCatmullRomOpen,
-  curveCatmullRom,
   curveLinear,
   curveLinearClosed,
   curveMonotoneX,
@@ -23,17 +23,18 @@ import {
   curveStepBefore,
   select,
 } from 'd3';
-import common from './diagrams/common/common.js';
-import { sanitizeDirective } from './utils/sanitizeDirective.js';
-import { log } from './logger.js';
-import { detectType } from './diagram-api/detectType.js';
-import assignWithDepth from './assignWithDepth.js';
-import type { MermaidConfig } from './config.type.js';
 import memoize from 'lodash-es/memoize.js';
 import merge from 'lodash-es/merge.js';
+import assignWithDepth from './assignWithDepth.js';
+import type { PartialMermaidConfig } from './config.js';
+import type { MermaidConfig } from './config.type.js';
+import { detectType } from './diagram-api/detectType.js';
 import { directiveRegex } from './diagram-api/regexes.js';
+import common from './diagrams/common/common.js';
+import { log } from './logger.js';
 import type { D3Element } from './mermaidAPI.js';
 import type { Point, TextDimensionConfig, TextDimensions } from './types.js';
+import { sanitizeDirective } from './utils/sanitizeDirective.js';
 
 export const ZERO_WIDTH_SPACE = '\u200b';
 
@@ -97,26 +98,23 @@ const directiveWithoutOpen =
  * @param config - Optional mermaid configuration object.
  * @returns The json object representing the init passed to mermaid.initialize()
  */
-export const detectInit = function (
+export const detectInit = function (text: string): PartialMermaidConfig | undefined {
-  text: string,
-  config?: MermaidConfig
-): MermaidConfig | undefined {
   const inits = detectDirective(text, /(?:init\b)|(?:initialize\b)/);
-  let results: MermaidConfig & { config?: unknown } = {};
+  let results: PartialMermaidConfig & { config?: unknown } = {};
 
   if (Array.isArray(inits)) {
     const args = inits.map((init) => init.args);
     sanitizeDirective(args);
     results = assignWithDepth(results, [...args]);
   } else {
-    results = inits.args as MermaidConfig;
+    results = inits.args as PartialMermaidConfig;
   }
 
   if (!results) {
     return;
   }
 
-  let type = detectType(text, config);
+  let type = detectType(text);
 
   // Move the `config` value to appropriate diagram type value
   const prop = 'config';
@@ -250,7 +248,10 @@ export function interpolateToCurve(
  * @param config - Configuration passed to MermaidJS
  * @returns The formatted URL or `undefined`.
  */
-export function formatUrl(linkStr: string, config: MermaidConfig): string | undefined {
+export function formatUrl(
+  linkStr: string,
+  config: Pick<MermaidConfig, 'securityLevel'>
+): string | undefined {
   const url = linkStr.trim();
 
   if (!url) {

packages/mermaid/src/utils/subGraphTitleMargins.ts

@@ -3,7 +3,7 @@ import type { FlowchartDiagramConfig } from '../config.type.js';
 export const getSubGraphTitleMargins = ({
   flowchart,
 }: {
-  flowchart: FlowchartDiagramConfig;
+  flowchart: Pick<FlowchartDiagramConfig, 'subGraphTitleMargin'>;
 }): {
   subGraphTitleTopMargin: number;
   subGraphTitleBottomMargin: number;