Multi directional arrows have heads of different sizes

[Zannick]

Description

In a simple flowchart with multi-directional (bidirectional) arrows, the left arrow head is about 2x the width and height each of the right head.

Steps to reproduce

Create a graph or flowchart with a double-ended arrow:

graph LR
C <--> F[fa:fa-car Car]

like so

graph LR
C <--> F[fa:fa-car Car]

Loading

but on the live demo or using the cli

Screenshots

renders like this for me:

Using the linux CLI on my real graph:

Code Sample

graph LR
A <--> B

Setup

CLI:
mmdc version: 10.0.0

Live demo:
Mermaid version: 10.0.0
Browser and Version: Chrome Version 110.0.5481.178 (Official Build) (64-bit)

Additional Context

generated svg taken from the live demo. Notice the viewBoxes are different sizes. Changing the pointEnd viewBox in developer tools to 0 0 10 10 results in an arrow of the same size as the large left arrow. Similarly, changing the pointStart to 0 0 12 20 results in the arrow shrinking to the same size as the right arrow.

<marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="10" viewBox="0 0 12 20" class="marker flowchart" id="flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker>
<marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="0" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker>

[bhearsum]

I'm hitting this as well. The problem appears to worse the deeper the graph is. Here's an example on the live editor:

(And when you go deep enough, one side of the arrowheads end up becoming almost entirely invisible.)

[nekr0z]

Still an issue in 10.0.2: live editor and Mermaid documentation website, Firefox.