2 or more arrows between 2 mermaid flowchart elements render incorrectly

[ainsleymcgrath]

• Searched existing issues to avoid creating duplicates.

• Confirmed that it can be reproduced in built-in themes without customized css.

  If it only exists in 3rd party themes or css, you can still report it, but please attach the theme target or the css file. We may not "fix" it, if it is caused by 3rd party themes or css styles that we cannot support.

• Searched http://support.typora.io/

---

Describe the bug
In a mermaid flowchart multiple arrows going from one element to another do not render their labels properly.
i.e. If A has 2 labeled arrows pointing to B, the second of the 2 arrows will render incorrectly.

To Reproduce
Steps to reproduce the behavior:

1. Open a blank document
2. Paste this markdown

```mermaid
flowchart TD
  start((Lake));
  middle[Estuary];
  
  
  start -->|A river| middle;
  start -->|Another river| middle;
  start -->|A third river| middle;
  
  middle --> Ocean;
```

Expected behavior
A diagram that looks like this (via mermaid.live)

Screenshots / Screencasts
This is what gets rendered instead

Notice that the labels for the second and third arrows seem to stack up on top of one another in the top left corner.

Sample Markdown File
[see Expected Behavior section]

Desktop (please complete the following information):

• OS: macOS Big Sur 11.6

Typora Version
1.0.2

Additional context
This may be related somewhat to #4851.

[abnerlee]

put into #1661

[ainsleymcgrath]

put into #1661

thanks!