flowchart TD doesn't honour top-down layout

[tribbloid]

Description

here is a quick example:

https://mermaid.live/edit#pako:eNqNUsFOwzAM_RUrp07aDnBsNU47wgU4oVycJl0r1qTKUtFq3T6DAz_CB_AnfAlOuq7dYBJVZdnPL8-O4x1LjVQsZtnGvKU5WgfPK6653tZibbHKgTP6uZaFVakrjIb7R64BGm9arpWWnt7AYrEAV1dR9P3-MZtx3Q5InzQgmyj6-hxSFLdDfFZtufyrHEBvJ0ShMmOVJ0P4pMoGwR4Itb0Tehw1CAcTOlDZFW3MnLKjNIk3E78dfYenC58g8Qua6sDhcKBjiUOawl2HN92F-CXhtjurOCiIxAk_4k5cURgJE4UwiuOb0fUDE5NQyY8DRlQk4fQRpWZGqqH2CBITHkHiP2uD3ohjC2zOSmVLLCQt4M5nOHO5KulRY3Il2levsSce1s48tTplsbO1mjNr6nXO4gw3W4rqSqJTqwKpdnlClSycsQ_9foc1n7MK9YsxA2f_A7pj784

flowchart TD

subgraph " "
  x
  y
end

x --- tup
y --- tup
x --o dx
y --o dy

subgraph "=="
    
    subgraph "before"
      def((÷))
      tup((▚))
    end
    
    tup o--o def
    
    subgraph "after"
        dx((÷))
        dy((÷))
        ta((▚))
        tb((▚))
        
        ta -->|a1| dx
        ta -->|a2| dy
        tb ---|b1| dx
        tb ---|b2| dy
    end
end

def ~~~ a
a --> def 
def ~~~ b
b --- def 
ta ~~~ a
a --o ta
tb ~~~ b
b --o tb

subgraph " "
  a
  b
end

%% Add direction to force a and b to bottom
direction TB

Loading

how did a and b end up on the side? and why are all the edges mangled?

Steps to reproduce

use the plot

Screenshots

Code Sample

No response

Setup

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

Suggested Solutions

No response

Additional Context

No response