Direction TD Inside subgraph Causes Parsing Error

[nour0205]

Description

In Mermaid.js, setting direction TD inside a subgraph results in a parsing error, while other directions (LR, RL, BT) function correctly.

This is inconsistent because:

• TD is a valid global direction.
• direction is generally allowed inside subgraph for other layouts.

---

Steps to reproduce

Case 1: direction TD Fails Inside Subgraph

graph LR
  subgraph A ["Subgraph A - Top to Bottom"]
    direction TD
    X["Node X"] --> Y["Node Y"]
  end

Expected Behavior:
The subgraph should follow TD direction, positioning nodes from top to bottom.

Actual Behavior:
Mermaid.js throws a parsing error.

---

Case 2: TD Works Globally

graph TD
  subgraph A ["Subgraph A - Top to Bottom"]
    X["Node X"]
    Y["Node Y"]
    X --> Y
  end

Expected and Actual Behavior:
The subgraph correctly follows TD layout, confirming that TD is valid globally.

---

Case 3: Other Directions Work Inside Subgraphs

graph LR
  subgraph A ["Right to Left"]
    direction RL
    X["Node X"] --> Y["Node Y"]
  end

  subgraph B ["Bottom to Top"]
    direction BT
    M["Node M"] --> N["Node N"]
  end

Expected and Actual Behavior:
Both subgraphs respect their assigned directions (RL and BT).
This confirms that direction is supported inside subgraphs—except for TD.

Screenshots

Code Sample

Setup

• Mermaid.js Version: v11.4.1
• Browser and Version:Microsoft Edge v132.0.2957.115
• OS: Windows 11

Suggested Solutions

No response

Additional Context

This issue prevents using TD inside subgraphs, making it inconsistent with how direction works for other layouts.

Since TD works globally and TB works inside subgraphs, this behavior is likely a parser inconsistency.

[BambioGaming]

This issue might be caused by a parsing inconsistency in Mermaid.js when handling direction TD inside a subgraph. While other directions like LR, RL, and BT seem to work, TD might not be properly recognized within subgraphs due to how Mermaid processes directional changes.

Will try to investigate this issue further.

[BambioGaming]

Hi @nour0205

I’ve resolved the issue with direction TD inside subgraphs — directions like TD, RL, BT, etc. now correctly apply within subgraphs when declared using direction.

However, this fix has introduced a new problem: global directions declared via graph TD, graph RL, etc. are now not working as expected. In particular, global RL, BT, and LR seem to default back to TD despite being correctly parsed and passed to setDirection().

I suspect this may be due to the direction rule still being parsed at the top level and unintentionally overwriting the global direction after it’s initially set. I’m currently investigating a grammar-level solution to prevent this.

[BambioGaming]

Hi @nour0205 👋

I've implemented a fix for subgraphs using direction TD — they now parse correctly and render as expected. This applies to all valid direction values (TD, LR, RL, BT, etc.) inside subgraphs.

A pull request has been opened here: #6415

Let me know if you'd like me to extend the fix further