Mermaid 12: edge targeting a subgraph ID now renders without TypeError (fix verification)
Comments · 0
Be the first to comment.
Explanation— by SceneRecap AI
In the Mermaid Live Editor, the user demonstrates and verifies the rendering behavior for edges targeting subgraph identifiers in Mermaid v12. Starting with the default flowchart template, the user selects the code editor, replaces the existing script by selecting all text and pasting new flowchart code between [4.4s] and [5.3s].
Upon pasting, the live canvas immediately re-renders the updated diagram without errors, displaying a nested subgraph structure alongside a green confirmation banner stating "Renders OK on Mermaid 12 · 20 elements" at [8.6s]–[13.0s]. At [10.0s], the user clicks the "Reset view" button on the diagram canvas toolbar and inspects the visual elements. The user then clicks the "Zoom in" button at [22.0s] and [23.0s] to enlarge the canvas.
Finally, at [30.8s]–[30.9s], the user clicks back into the code editor and navigates to the top of the file. This reveals the Mermaid syntax demonstrating edges directly connecting node Decision to subgraph IDs ThenSequence and ElseSequence without triggering type errors.
Key moments
What to know
- •In Mermaid v12, flowchart syntax allows edge definitions to target subgraph IDs directly (such as `Decision -- Then --> ThenSequence`) without causing runtime TypeError exceptions.
- •The live editor automatically evaluates diagram validity upon script changes, confirmed by the green rendering status banner.
Glossary
- Mermaid Live Editor
- A web-based interactive development environment for creating and previewing Mermaid-syntax diagrams.
- Subgraph
- A named group or container within a Mermaid diagram used to cluster related nodes and nested flows.
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →