From 36fe04bd46535c586b6aa5c117674ec3a2b8995a Mon Sep 17 00:00:00 2001
From: nour kouider <nourkouider05@gmail.com>
Date: Wed, 9 Apr 2025 10:56:30 +0100
Subject: [PATCH] feat(flowchart): add inheritDir option for subgraph direction

---
 .../integration/rendering/flowchart.spec.js   | 39 +++++++++++++++++++
 .../defaultConfig/variables/configKeys.md     |  2 +-
 packages/mermaid/src/config.type.ts           |  7 ++++
 packages/mermaid/src/defaultConfig.ts         |  4 ++
 .../mermaid/src/diagrams/flowchart/flowDb.ts  | 15 ++++++-
 5 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 7b986cd2f..40713ac4e 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -934,4 +934,43 @@ graph TD
       }
     );
   });
+  it('68: should honor subgraph direction when inheritDir is false', () => {
+    imgSnapshotTest(
+      `
+      %%{init: {"flowchart": { "inheritDir": false }}}%%
+      flowchart TB
+        direction LR
+        subgraph A
+          direction TB
+          a --> b
+        end
+        subgraph B
+          c --> d
+        end
+      `,
+      {
+        fontFamily: 'courier',
+      }
+    );
+  });
+
+  it('69: should inherit global direction when inheritDir is true', () => {
+    imgSnapshotTest(
+      `
+      %%{init: {"flowchart": { "inheritDir": true }}}%%
+      flowchart TB
+        direction LR
+        subgraph A
+          direction TB
+          a --> b
+        end
+        subgraph B
+          c --> d
+        end
+      `,
+      {
+        fontFamily: 'courier',
+      }
+    );
+  });
 });
diff --git a/docs/config/setup/defaultConfig/variables/configKeys.md b/docs/config/setup/defaultConfig/variables/configKeys.md
index 4687ad8bc..ea65e33d6 100644
--- a/docs/config/setup/defaultConfig/variables/configKeys.md
+++ b/docs/config/setup/defaultConfig/variables/configKeys.md
@@ -12,4 +12,4 @@
 
 > `const` **configKeys**: `Set`<`string`>
 
-Defined in: [packages/mermaid/src/defaultConfig.ts:274](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L274)
+Defined in: [packages/mermaid/src/defaultConfig.ts:279](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L279)
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 5c34ff462..4e38152c7 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -226,6 +226,12 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Defines a top/bottom margin for subgraph titles
    *
    */
+  /**
+   * If true, subgraphs without explicit direction will inherit the global graph direction (e.g., LR, TB, RL, BT).
+   * Defaults to `false` to preserve legacy layout behavior.
+   */
+  inheritDir?: boolean;
+
   subGraphTitleMargin?: {
     top?: number;
     bottom?: number;
@@ -300,6 +306,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "BaseDiagramConfig".
  */
+
 export interface BaseDiagramConfig {
   useWidth?: number;
   /**
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 2e4e20f50..11ff581c1 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -71,6 +71,10 @@ const config: RequiredDeep<MermaidConfig> = {
         fontWeight: this.personFontWeight,
       };
     },
+    flowchart: {
+      ...defaultConfigJson.flowchart,
+      inheritDir: false, // default to legacy behavior
+    },
 
     external_personFont: function () {
       return {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index de926f294..d4ddf006b 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -651,7 +651,8 @@ You have to call mermaid.initialize.`
       const prims: any = { boolean: {}, number: {}, string: {} };
       const objs: any[] = [];
 
-      let dir; //  = undefined; direction.trim();
+      let dir: string | undefined;
+
       const nodeList = a.filter(function (item) {
         const type = typeof item;
         if (item.stmt && item.stmt === 'dir') {
@@ -670,7 +671,16 @@ You have to call mermaid.initialize.`
       return { nodeList, dir };
     };
 
-    const { nodeList, dir } = uniq(list.flat());
+    const result = uniq(list.flat());
+    const nodeList = result.nodeList;
+    let dir = result.dir;
+    const flowchartConfig = getConfig().flowchart ?? {};
+    dir =
+      dir ??
+      (flowchartConfig.inheritDir
+        ? (this.getDirection() ?? (getConfig() as any).direction ?? undefined)
+        : undefined);
+
     if (this.version === 'gen-1') {
       for (let i = 0; i < nodeList.length; i++) {
         nodeList[i] = this.lookUpDomId(nodeList[i]);
@@ -681,6 +691,7 @@ You have to call mermaid.initialize.`
     title = title || '';
     title = this.sanitizeText(title);
     this.subCount = this.subCount + 1;
+
     const subGraph = {
       id: id,
       nodes: nodeList,