unexpected graph direction

[SailorMax]

Description

Trying to format my graph with different directions subgraphs: 2 horizontal columns of vertical subgraphs

Expected: aa and bb in 1 line: 1 line with 2 columns

Actual: aa and bb in 1 column + bb at first. Why?

Steps to reproduce

1. copy-paste my sample to your Mermaid Live Editor

Screenshots

Code Sample

flowchart TB;
    subgraph zero
        direction LR;

        subgraph aa
            direction TB;
            a-->b
        end

        subgraph bb
            direction TB;
            c-->d
        end
    end

Setup

• Mermaid version: latest?
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

No response

Additional Context

No response

[nourhenta]

Hi @SailorMax ,

Thanks for reporting this!
I can confirm that this issue has been previously discussed, notably in issue #2767.
After analyzing the behavior, it seems that Mermaid does not correctly apply the direction attribute inside subgraphs, leading to unexpected layouts.

Issue Overview:
The Mermaid code explicitly declares direction LR for the outer subgraph (zero) and direction TB for the inner subgraphs (aa and bb).
Expected behavior: aa and bb should be positioned side by side within zero, each following a top-to-bottom (TB) layout.
Actual behavior: aa and bb are stacked vertically, ignoring the direction LR of zero.

Possible Solution:
I'll investigate this further and try to implement a fix. From my initial analysis, it looks like the subgraph direction might not be correctly passed to the layout engine. A potential solution could involve ensuring that subgraph directions are explicitly processed before node positioning is calculated.

I will try to implement a fix for this and will post updates here. If you have any insights, test cases, or additional concerns, feel free to share them!