direction inside subgraphs is ignored

[nourhenta]

Description

When using flowchart diagrams, specifying a direction inside a subgraph block is silently ignored. This gives the impression that subgraph direction is supported, but it has no effect on layout.
This is misleading behavior and inconsistent with Mermaid’s syntax expectations.

Steps to reproduce

Use this code in the Mermaid Live Editor:

flowchart LR
  A --> B

  subgraph Group
    direction TB
    C --> D --> E
  end

  E --> F

- Actual Output:

All nodes — including those in the subgraph — are laid out left-to-right:

• Expected Output:

The subgraph should respect direction TB, resulting in:

A --> B flowing left-to-right

The Group subgraph showing nodes vertically:

C
↓
D
↓
E

Then E --> F continues left-to-right

Setup

• Mermaid version:v11.4.1 (also reproducible in latest live editor
  v11.5.0)
• Browser and Version: Chrome Version 134.0.6998.118 (Build officiel) (64 bits)

Suggested Solutions

• Detect and respect direction statements inside subgraph blocks during parsing.
• Store subgraph-level direction separately in flowDb.ts
• Pass local direction when rendering subgraph nodes using recursive layout.

Additional Context

• The direction line is currently not throwing an error, which implies it’s supported — this creates silent layout bugs.
• This issue causes confusion for users building complex flows where mixed layout directions are needed.

[nour0205]

Hi Nour, great catch and thanks for the detailed reproduction steps

I've investigated this further and found that the issue with subgraph direction being ignored only happens when you include E --> F after the subgraph block.
You can see this clearly in your screenshot:

Despite direction TB being declared, the subgraph Group appears correctly rendered top-to-bottom, with C → D → E stacked vertically inside the yellow box.

However, the moment you add E --> F outside the subgraph, the entire layout switches to LR, and the subgraph contents are laid out left-to-right, ignoring their TB direction.

This suggests that the global layout is being inherited by subgraphs during recursive layout, overriding their internal direction—even if explicitly declared.

Thanks again for reporting this.

[nour0205]

Hi @nourhenta , thanks again for opening this issue and sharing the clear reproduction steps!

I’ve looked into it and confirmed that this is actually a documented limitation of Mermaid’s flowcharts. When any node inside a subgraph is linked to the outside, the subgraph’s direction is ignored and it inherits the parent graph’s layout. I’ve attached the relevant screenshot from the official docs for reference.

Still, I agree that this behaviour is confusing—especially since the direction line doesn’t throw any warning and gives the impression it’s being respected.