Issue with Self-Referencing Transitions in stateDiagram-v2 Causing TypeError: Cannot read properties of undefined (reading 'node')

[abhishek-hopstack]

Description

Description

When creating a self-referencing transition (e.g., stateA --> stateA) in a stateDiagram-v2, the diagram fails to render and throws a TypeError: Cannot read properties of undefined (reading 'node'). This issue seems to be specific to self-referencing transitions in version 2 of the state diagram.

Expected Behavior

The diagram should render correctly with a self-referencing transition, visually representing the state transition from stateA back to itself.

Actual Behavior

The diagram fails to render and throws the following error in the console:

Steps to reproduce

1. Create a stateDiagram-v2 with the following content:

   stateDiagram-v2
       [*] --> Draft: Save as Draft
       Draft --> PendingInternalApproval: Submit
       Draft --> Draft: update on draft

2. Render this diagram in a Mermaid-compatible environment (such as a browser, markdown editor, or code editor supporting Mermaid.js).

3. Check the browser console for the error:

   TypeError: Cannot read properties of undefined (reading 'node')

4. Notice that the diagram fails to render, and the self-referencing transition (Draft --> Draft) causes the error.

Screenshots

Code Sample

stateDiagram-v2
    [*] --> Draft: Save as Draft
    Draft --> PendingInternalApproval: Submit
    Draft --> Draft: update on draft

Setup

• Mermaid version: Web UI
• Browser and Version: Chrome: Version 127.0.6533.101 (Official Build) (arm64)

Suggested Solutions

No response

Additional Context

It was working about a week or 15 days ago

[ashishjain0512]

@abhishek-hopstack We can reproduce this and are working on a fix for it in the upcoming release.

Seems to be duplicate issue: https://github.com/mermaid-js/mermaid/issues/5820