Mermaid flowchart with edges targeting subgraph IDs now renders correctly (v12.0.0)
Comments · 0
Be the first to comment.
Explanation— by SceneRecap AI
At [0.0s], the Mermaid Live Editor opens displaying a default sample flowchart. Between [3.0s] and [13.0s], the user replaces the default template with a custom top-down flowchart script (flowchart TD) designed to test diagram connections where decision edges target subgraph IDs directly (such as Decision -- Then --> ThenSequence and Decision -- Else --> ElseSequence).
While entering the code between [5.0s] and [11.0s], the user establishes nested subgraphs including OuterSequence, InnerSequence, ThenSequence, and ElseSequence, which contain internal execution steps like Execute, GetContent, Click, and Extract. Once the concluding end statements are entered by [13.0s], the syntax resolves completely.
From [13.0s] through [58.0s], the user inspects the resulting diagram preview. The rendered flowchart demonstrates that Mermaid v12.0.0 successfully routes arrows from the Decision node directly into the nested subgraph boundaries without layout corruption, subsequently routing from the outer container down to the final Chat node.
Key moments
What to know
- •Mermaid v12.0.0 resolves and renders edges connecting directly to subgraph IDs without layout distortion.
- •Console parse errors appear momentarily while typing incomplete syntax blocks and resolve automatically once all `end` tags are present.
Glossary
- Subgraph
- A visual container in Mermaid diagrams used to group related nodes within a dedicated labeled box.
- Mermaid Live Editor
- A browser-based editor that provides real-time rendering and syntax validation for Mermaid diagram definitions.
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →