Mermaid: subgraph `direction TB` — checking whether fix is live on mermaid.live
Comments · 0
Be the first to comment.
Explanation— by SceneRecap AI
The recording shows a user testing the rendering behavior of Mermaid flowcharts with subgraphs using direction TB on Mermaid Live Editor. At [0:00], the editor displays a default flowchart sample. The user dismisses a notification banner in the top-right corner at [0:04] and clicks into the code editor at [0:04].
At [0:05], the user replaces the default diagram script with a flowchart script defining a subgraph Test set to direction TB containing nodes one and two. The diagram on the canvas renders the vertical layout within a horizontal parent chart, and the user clicks the "Reset view" button at [0:09] to center the diagram canvas.
At [0:21], the user selects all code in the editor again and pastes a nested subgraph example featuring an outer subgraph Outer containing Node C and a nested subgraph Inner configured with direction TB containing Node A and Node B. At [0:26], the user clicks "Reset view" again and hovers over the rendered components between [0:29] and [0:34] to inspect the hierarchy and layout.
Key moments
What to know
- •The user was evaluating Mermaid's rendering of `direction TB` (top-to-bottom) within subgraphs on `mermaid.live`.
- •Both single subgraphs and nested subgraphs correctly aligned child nodes vertically despite parent graph orientations.
Glossary
- Mermaid Live Editor
- A web-based interactive tool for creating and rendering text-based Mermaid diagrams.
- direction TB
- A Mermaid diagram statement specifying top-to-bottom layout orientation for nodes within a flowchart or subgraph.
- Reset view
- A canvas control button that recenters and scales the diagram to fit the viewport.
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →