Merge pull request #6470 from nour0205/fix/flowchart-inherit-dir

feat(flowchart): add inheritDir option for subgraph direction

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',
+      }
+    );
+  });
 });

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:278](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L278)

packages/mermaid/src/config.type.ts

@@ -295,6 +295,12 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    *
    */
   wrappingWidth?: number;
+  /**
+   * 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;
 }
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema

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 {

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,

packages/mermaid/src/schemas/config.schema.yaml

@@ -2124,6 +2124,13 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
         type: number
         default: 200
 
+      inheritDir:
+        type: boolean
+        default: false
+        description: |
+          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.
+
   SankeyLinkColor:
     description: |
       Picks the color of the sankey diagram links, using the colors of the source and/or target of the links.