graph/flowchart TB/TD/TB with subgraphs have inconsistent orientation and ordering

[SamHasler]

Taking this graph:

flowchart TB
    N1
    subgraph Default
        D1
        D2
    end
    N2
    subgraph TopToBottom
        direction TB
        TB1
        TB2
    end
    N3
    subgraph LeftToRight
        direction LR
        LR1
        LR2
    end
    N4

and changing only the first line it renders as follows:

(rendered on mermaid.live on 2022/03/03 version 8.14.0)

flowchart TB	flowchart TD	flowchart LR
graph TB	graph TD	graph LR

Note that:

1. TB / TD / LR seem to set the wrong orientation ( RL / BT are also wrong)
2. flowchart TB / flowchart TD swaps the orientation of the subgraph with default direction, I would expect them to be the same
3. The order the subgraphs appear in seems to be reversed in all examples. I would expect to see Default first and LeftToRight last.
4. flowchart / graph order the subgraphs and the nodes differently

[SamHasler]

Upon reflection I think I've misunderstood how direction affects layout, so I'm wrong about the first issue. The other points still appear to be inconsistencies though:

1. I think I'm wrong about the orientation being wrong. It's positioning them so that the links will be in the correct direction.
2. This seems to be a genuine inconsistency between graph/flowchart rendering
3. I would still expect nodes/subgraphs to appear in the order they are defined, unless they have links which force a different position for layout reasons.
4. This still seems to be another genuine inconsistency between graph/flowchart rendering.

[SamHasler]

Adding links shows more inconsistencies between graph/flowchart:

flowchart TB
    N1
    subgraph Default
        D1
        D2
    end
    N2
    subgraph TopToBottom
        direction TB
        TB1
        TB2
    end
    N3
    subgraph LeftToRight
        direction LR
        LR1
        LR2
    end
    subgraph RightToLeft
        direction RL
        RL1
        RL2
    end
    N4
    N5

    N4 --> N5
    D1 --> D2
    TB1 --> TB2
    LR1 --> LR2
    RL1 --> RL2

graph TB

graph appears to have only one direction through all subgraphs

[Cayan]

it works well if you don't connect them:

flowchart TB
    subgraph TopToBottom
        direction TB
        TB1
        TB2
    end
    subgraph LeftToRight
        direction LR
        LR1
        LR2
    end

    TB1 --> TB2
    LR1 --> LR2

flowchart TB
    subgraph TopToBottom
        direction TB
        TB1
        TB2
    end
    subgraph LeftToRight
        direction LR
        LR1
        LR2
    end

    TB1 --> TB2
    LR1 --> LR2

But if you connect them it only uses one direction:

flowchart TB
    subgraph TopToBottom
        direction TB
        TB1
        TB2
    end
    subgraph LeftToRight
        direction LR
        LR1
        LR2
    end

    TB1 --> TB2
    TB2 --> LR1
    LR1 --> LR2

flowchart TB
    subgraph TopToBottom
        direction TB
        TB1
        TB2
    end
    subgraph LeftToRight
        direction LR
        LR1
        LR2
    end

    TB1 --> TB2
    TB2 --> LR1
    LR1 --> LR2

[Kochise]

But if you connect them it only uses one direction:

https://mermaid-js.github.io/mermaid/#/flowchart?id=direction-in-subgraphs -> A clarification is in order here. at the bottom

[ferdnyc]

Yeah, but it's still not that simple.

Let's start with the fact that TD and TB layout are different, despite being documented as interchangeable synonyms.

flowchart TB

flowchart TB
  subgraph SUB1
    A
    B
    C
  end
  subgraph SUB2
    direction LR
    D
    E
  end
  subgraph SUB3
    direction LR
    DB[(Database)]
    F
  end
DB -.- F
SUB1 --> SUB2
SUB3 -.- SUB2
SUB1 --> SUB3

flowchart TD

flowchart TD
  subgraph SUB1
    A
    B
    C
  end
  subgraph SUB2
    direction LR
    D
    E
  end
  subgraph SUB3
    direction LR
    DB[(Database)]
    F
  end
DB -.- F
SUB1 --> SUB2
SUB3 -.- SUB2
SUB1 --> SUB3

The ONLY code change between those two graphs is starting with flowchart TB vs. flowchart TD.

(Ah, I see @SamHasler actually had already covered that in the initial report. My apologies.)

[ferdnyc]

Actually, here's an even better one: Why is inserting direction TD into a subgraph a parse error?

flowchart TD
  subgraph SUB1
    A
    B
    C
  end
  subgraph SUB2
    direction LR
    D
    E
  end
  subgraph SUB3
    direction TD
    DB[(Database)]
    F
  end
DB -.- F
SUB1 --> SUB2
SUB3 -.- SUB2
SUB1 --> SUB3

direction TB works just fine:

flowchart TD
  subgraph SUB1
    A
    B
    C
  end
  subgraph SUB2
    direction LR
    D
    E
  end
  subgraph SUB3
    direction TB
    DB[(Database)]
    F
  end
DB -.- F
SUB1 --> SUB2
SUB3 -.- SUB2
SUB1 --> SUB3

flowchart TD
  subgraph SUB1
    A
    B
    C
  end
  subgraph SUB2
    direction LR
    D
    E
  end
  subgraph SUB3
    direction TB
    DB[(Database)]
    F
  end
DB -.- F
SUB1 --> SUB2
SUB3 -.- SUB2
SUB1 --> SUB3

[jakubLangr]

Hello any update on this? I get the same error.