Bug reportAug 19, 2026· 0:30· 18 views
Mermaid 11.16: subgraph `direction TB` ignored and incoming edges stop at the cluster border
0:30 total
Comments · 0
Be the first to comment.
Bug report— by SceneRecap AI
mediumrendering/flowchart-layout
os: macOSbrowser: Chromium 151.0.7922.34viewport: 1280x720mermaid_version: v11.16.1
Repro steps
- 1.Open Mermaid Live Editor at /edit
- 2.In the Code editor, enter a flowchart diagram with 'flowchart LR', containing subgraphs 'Branches' and 'Orgs' where 'Orgs' specifies 'direction TB' with standalone nodes ('org1', 'org2', 'org3'), and edges connecting from 'Branches' nodes to 'Orgs' nodes ('dev -.-> org1', 'uat -.-> org2', 'main -.-> org3')
- 3.Inspect the rendered diagram preview
Expected
The nodes inside subgraph 'Orgs' should align vertically according to 'direction TB', and the dotted edges from 'dev', 'uat', and 'main' should connect directly to their target nodes ('org1', 'org2', 'org3').
Actual
The 'direction TB' directive is ignored, causing nodes inside 'Orgs' ('org1', 'org2', 'org3') to lay out horizontally side-by-side. Additionally, all incoming dotted edges terminate at the outer border of the 'Orgs' subgraph box instead of reaching their respective target nodes.
Evidence
visualRendered preview displays subgraph 'Orgs' with org1, org2, and org3 lined up horizontally instead of top-to-bottom, and cross-subgraph edges dev -.-> org1, uat -.-> org2, main -.-> org3 terminate on the left bounding border of the Orgs cluster.
visualUser highlights line 6 'direction TB' in the editor demonstrating that the vertical layout directive inside the 'Orgs' subgraph is not honored by the renderer.
Issue markdown (copy-paste ready)
### Summary
When defining a flowchart with subgraphs where one subgraph specifies an internal vertical layout (`direction TB`) containing isolated nodes, Mermaid ignores the `direction TB` instruction (laying them out horizontally) and cross-subgraph edges targeting those nodes terminate at the outer bounding box of the subgraph rather than connecting to the nodes themselves.
### Steps to Reproduce
1. Go to Mermaid Live Editor (`/edit`).
2. Paste the following flowchart code:
```mermaid
flowchart LR
subgraph Branches
dev --> uat --> main
end
subgraph Orgs
direction TB
org1([org1])
org2([org2])
org3([org3])
end
dev -.-> org1
uat -.-> org2
main -.-> org3
```
3. Observe the diagram rendered in the preview area.
### Expected Result
- Subgraph `Orgs` arranges `org1`, `org2`, and `org3` vertically from top to bottom.
- Dotted arrows (`dev -.-> org1`, `uat -.-> org2`, `main -.-> org3`) connect directly into `org1`, `org2`, and `org3` nodes.
### Actual Result
- Subgraph `Orgs` displays nodes horizontally in a single row.
- The incoming edges terminate and point to the left boundary of the `Orgs` subgraph box.
*Recorded with SceneRecap.*Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →