Broken Arrow Connections in Specific Flowchart Configurations

[gherman-cs]

Description

Thank you for your help, work, and time!

When creating certain flowcharts (examples in "Steps to Reproduce"), the resulting diagrams have arrows that fail to connect shapes. The connections fall short of their intended target. This behavior appears to be tied to specific edge cases involving the circle and double circle shapes and with largely vertical diagrams.

Expected Behavior:

Arrows should connect properly between the source and destination shapes, regardless of their types (e.g., circle, rectangle, double circle) and or placement in subgraphs.

Actual Behavior:

Arrows are either misaligned or fail to connect in specific configurations.

Observations:

Reproducibility:
Example 1: The issue is only reproducible on mermaid.live.
Example 2: The issue is reproducible on both mermaid.live and mmdc (version 11.4.2).

Discrepancies in Outputs:
In Example 1, mermaid.live and mmdc output for the same diagram is different.
In Example 2, changing D from a double circle to a rectangle results in different outputs between mermaid.live and mmdc.

Suggestion for Improvement:
Not sure if you all already do, maybe longer term, incorporating or increasing the amount of fuzzy testing could help with these sorts of things.

If you have a way to verify correctness could help catch edge cases.

Potentially one naive way of checking for incorrectness would be by leveraging the inconsistency in mmdc and mermaid.live outputs. In my Example 1, the outputs between mermaid.live and mmdc were different. Maybe in your fuzzy testing suite, you could diff the outputs of mermaid.live and mmdc and when the outputs are different, you could mark the testcase as failed.

Steps to reproduce

Example 1: Broken Connection Between Box One and D

Input the following diagram into mermaid.live:

    flowchart TD
        subgraph One
            A@{shape: circle }-->B
        end
        subgraph Two
            B --> C
        end
        One -->D
        Two --> D

Observe that the arrow between Two and D does not connect properly.

Example 2: Broken Connection Between Box Two and Circle A

Input the following diagram into mermaid.live:

flowchart TD
    subgraph One
        A@{ shape: circle }-->B
    end
    subgraph Two
        C --> C
        B --> C
    end
    Two --> A
    One --> D@{ shape: dbl-circ}
    Two -->D

Observe that the arrow between Two and A fails to connect.

The issue is also reproducible using mmdc (version 11.4.2) with the following command: npx mmdc -i t.mmd -o t.svg

Screenshots

No response

Code Sample

Setup

• Mermaid version: 11.4.2
• Browser and Version: [Chrome, Firefox]
• Chrome Version 132.0.6834.83 (Official Build) (64-bit)
• Firefox 134.0 (64-bit)
• OS Ubuntu 22.04.5 LTS

Suggested Solutions

Possible Cause:
Seems like a length miscalculation when calculating connection lengths, particularly for edge cases around the circle or dbl-circle shapes?

Additional Context

No response