Class Diagrams: Rendering classes that are related to themselves draws broken arrows and labels

[PhilippSchwaab]

Description

When trying to render Mermaid class diagrams with classes that self reference arrows and labels break. This has not happened in older mermaid versions but is an issue in v11.4.0

Steps to reproduce

The following code demonstrates the bug:

classDiagram
class Test
Test "1" --> "n" Test

Produces output that looks like this (generated using develop.git.mermaid.live):

Screenshots

No response

Code Sample

classDiagram
class Test
Test "1" --> "n" Test

Setup

• Mermaid version: v11.4.0
• Browser and Version: [Firefox] 134.0.1

Suggested Solutions

No response

Additional Context

No response

[nourhenta]

Class Diagram: Rendering Self-Referencing Classes Results in Broken Arrows and Labels

Hello @PhilippSchwaab ,

I tested this issue in my local environment using Mermaid v11.4.0 and the provided example.
I can confirm that the issue persists as described. Specifically, when rendering a class diagram with self-referencing arrows, the arrows and labels are broken.

Important Notes:

• The issue persists when testing locally using the development environment.
• I also reproduced the issue in the Mermaid Live Editor with the same version (v11.4.0).

Environment Details:
Mermaid Version: v11.4.0
Browser: Microsoft Edge (Version: 132.0.2957.127)

Local testing:

Mermaid Live Editor:

I will now proceed to investigate the root cause of this issue and explore potential fixes.