Merge pull request #6898 from mermaid-js/user-defined-layout-detection

feat: Add getUserDefinedConfig to merge init config and directives

docs/config/setup/config/README.md

@@ -19,6 +19,7 @@
 - [addDirective](functions/addDirective.md)
 - [getConfig](functions/getConfig.md)
 - [getSiteConfig](functions/getSiteConfig.md)
+- [getUserDefinedConfig](functions/getUserDefinedConfig.md)
 - [reset](functions/reset.md)
 - [sanitize](functions/sanitize.md)
 - [saveConfigFromInitialize](functions/saveConfigFromInitialize.md)

docs/config/setup/config/functions/getUserDefinedConfig.md

@@ -0,0 +1,19 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getUserDefinedConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getUserDefinedConfig.md).
+
+[**mermaid**](../../README.md)
+
+---
+
+# Function: getUserDefinedConfig()
+
+> **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)
+
+## Returns
+
+[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)

packages/mermaid/src/config.spec.ts

@@ -78,3 +78,187 @@ describe('when working with site config', () => {
     expect(config_4.altFontFamily).toBeUndefined();
   });
 });
+
+describe('getUserDefinedConfig', () => {
+  beforeEach(() => {
+    configApi.reset();
+  });
+
+  it('should return empty object when no user config is defined', () => {
+    const userConfig = configApi.getUserDefinedConfig();
+    expect(userConfig).toEqual({});
+  });
+
+  it('should return config from initialize only', () => {
+    const initConfig: MermaidConfig = { theme: 'dark', fontFamily: 'Arial' };
+    configApi.saveConfigFromInitialize(initConfig);
+
+    const userConfig = configApi.getUserDefinedConfig();
+    expect(userConfig).toEqual(initConfig);
+  });
+
+  it('should return config from directives only', () => {
+    const directive1: MermaidConfig = { layout: 'elk', fontSize: 14 };
+    const directive2: MermaidConfig = { theme: 'forest' };
+
+    configApi.addDirective(directive1);
+    configApi.addDirective(directive2);
+
+    expect(configApi.getUserDefinedConfig()).toMatchInlineSnapshot(`
+      {
+        "fontFamily": "Arial",
+        "fontSize": 14,
+        "layout": "elk",
+        "theme": "forest",
+      }
+    `);
+  });
+
+  it('should combine initialize config and directives', () => {
+    const initConfig: MermaidConfig = { theme: 'dark', fontFamily: 'Arial', layout: 'dagre' };
+    const directive1: MermaidConfig = { layout: 'elk', fontSize: 14 };
+    const directive2: MermaidConfig = { theme: 'forest' };
+
+    configApi.saveConfigFromInitialize(initConfig);
+    configApi.addDirective(directive1);
+    configApi.addDirective(directive2);
+
+    const userConfig = configApi.getUserDefinedConfig();
+    expect(userConfig).toMatchInlineSnapshot(`
+      {
+        "fontFamily": "Arial",
+        "fontSize": 14,
+        "layout": "elk",
+        "theme": "forest",
+      }
+    `);
+  });
+
+  it('should handle nested config objects properly', () => {
+    const initConfig: MermaidConfig = {
+      flowchart: { nodeSpacing: 50, rankSpacing: 100 },
+      theme: 'default',
+    };
+    const directive: MermaidConfig = {
+      flowchart: { nodeSpacing: 75, curve: 'basis' },
+      mindmap: { padding: 20 },
+    };
+
+    configApi.saveConfigFromInitialize(initConfig);
+    configApi.addDirective(directive);
+
+    const userConfig = configApi.getUserDefinedConfig();
+    expect(userConfig).toMatchInlineSnapshot(`
+      {
+        "flowchart": {
+          "curve": "basis",
+          "nodeSpacing": 75,
+          "rankSpacing": 100,
+        },
+        "mindmap": {
+          "padding": 20,
+        },
+        "theme": "default",
+      }
+    `);
+  });
+
+  it('should handle complex nested overrides', () => {
+    const initConfig: MermaidConfig = {
+      flowchart: {
+        nodeSpacing: 50,
+        rankSpacing: 100,
+        curve: 'linear',
+      },
+      theme: 'default',
+    };
+    const directive1: MermaidConfig = {
+      flowchart: {
+        nodeSpacing: 75,
+      },
+      fontSize: 12,
+    };
+    const directive2: MermaidConfig = {
+      flowchart: {
+        curve: 'basis',
+        nodeSpacing: 100,
+      },
+      mindmap: {
+        padding: 15,
+      },
+    };
+
+    configApi.saveConfigFromInitialize(initConfig);
+    configApi.addDirective(directive1);
+    configApi.addDirective(directive2);
+
+    const userConfig = configApi.getUserDefinedConfig();
+    expect(userConfig).toMatchInlineSnapshot(`
+      {
+        "flowchart": {
+          "curve": "basis",
+          "nodeSpacing": 100,
+          "rankSpacing": 100,
+        },
+        "fontSize": 12,
+        "mindmap": {
+          "padding": 15,
+        },
+        "theme": "default",
+      }
+    `);
+  });
+
+  it('should return independent copies (not references)', () => {
+    const initConfig: MermaidConfig = { theme: 'dark', flowchart: { nodeSpacing: 50 } };
+    configApi.saveConfigFromInitialize(initConfig);
+
+    const userConfig1 = configApi.getUserDefinedConfig();
+    const userConfig2 = configApi.getUserDefinedConfig();
+
+    userConfig1.theme = 'neutral';
+    userConfig1.flowchart!.nodeSpacing = 999;
+
+    expect(userConfig2).toMatchInlineSnapshot(`
+      {
+        "flowchart": {
+          "nodeSpacing": 50,
+        },
+        "theme": "dark",
+      }
+    `);
+  });
+
+  it('should handle edge cases with undefined values', () => {
+    const initConfig: MermaidConfig = { theme: 'dark', layout: undefined };
+    const directive: MermaidConfig = { fontSize: 14, fontFamily: undefined };
+
+    configApi.saveConfigFromInitialize(initConfig);
+    configApi.addDirective(directive);
+
+    expect(configApi.getUserDefinedConfig()).toMatchInlineSnapshot(`
+      {
+        "fontSize": 14,
+        "layout": undefined,
+        "theme": "dark",
+      }
+    `);
+  });
+
+  it('should retain config from initialize after reset', () => {
+    const initConfig: MermaidConfig = { theme: 'dark' };
+    const directive: MermaidConfig = { layout: 'elk' };
+
+    configApi.saveConfigFromInitialize(initConfig);
+    configApi.addDirective(directive);
+
+    expect(configApi.getUserDefinedConfig()).toMatchInlineSnapshot(`
+      {
+        "layout": "elk",
+        "theme": "dark",
+      }
+    `);
+
+    configApi.reset();
+  });
+});

packages/mermaid/src/config.ts

@@ -248,3 +248,17 @@ const checkConfig = (config: MermaidConfig) => {
     issueWarning('LAZY_LOAD_DEPRECATED');
   }
 };
+
+export const getUserDefinedConfig = (): MermaidConfig => {
+  let userConfig: MermaidConfig = {};
+
+  if (configFromInitialize) {
+    userConfig = assignWithDepth(userConfig, configFromInitialize);
+  }
+
+  for (const d of directives) {
+    userConfig = assignWithDepth(userConfig, d);
+  }
+
+  return userConfig;
+};