Overlapping Arrow Edges in Large Entity Relationship Diagrams

[anlai46]

Description

When attempting to create a large entity relationship diagram using Mermaid's live editor, I encountered an issue where the edges of arrows, which represent different cardinality ratios, overlap and collide into each other. This resulted in a messy and visually unappealing diagram, and can make it difficult to interpret the relationships between entities.

Steps to reproduce

1. Open the Mermaid live editor
2. Create a large entity relationship diagram with multiple entities and relationships
3. Try including multiple different cardinality ratios between entities(one or more, zero or more, exactly one, zero or one)
4. See how the cardinalities as arrows overlap and collide with each other, especially in denser connected areas of the diagram

Screenshots

Full ER diagram:

Diagram Issues:

Code Sample

erDiagram
    INSTRUCTOR ||--o{ COLLEGE : DEAN
    INSTRUCTOR o|--|{ SECTION : TEACHES
    INSTRUCTOR o|--|{ DEPARTMENT : EMPLOYS
    INSTRUCTOR o|--|{ DEPARTMENT : CHAIR
    INSTRUCTOR {
        string registrationNumber PK
        string make
        string model
        string[] parts
    }
    DEPARTMENT ||--|| COLLEGE : ADMINS
    DEPARTMENT ||--o{ STUDENT : HAS
    DEPARTMENT ||--o{ COURSE : OFFERS
    DEPARTMENT ||--o{ INSTRUCTOR : EMPLOYS
    DEPARTMENT ||--o{ INSTRUCTOR : CHAIR
    DEPARTMENT {
        string driversLicense PK "The license #"
        string(99) firstName "Only 99 characters are allowed"
        string lastName
        string phone UK
        int age
    }
    COLLEGE one to one INSTRUCTOR : DEAN
    COLLEGE O|--|{ DEPARTMENT : ADMINS
    COLLEGE {
        string CName 
        string COffice
        string CPhone
    }
    COURSE ||--|| SECTION : SECS
    COURSE ||--|| DEPARTMENT : OFFERS
    COURSE {
        string CName 
        string COffice
        string CPhone
    }
    SECTION ||--|| INSTRUCTOR : TEACHES
    SECTION ||--|| STUDENT : TAKES
    SECTION ||--|| COURSE : SECS
    SECTION {
        string CName 
        string COffice
        string CPhone
    }
    STUDENT ||--|| SECTION : TAKES
    STUDENT ||--|| DEPARTMENT : HAS
    STUDENT {
        string CName 
        string COffice
        string CPhone
    }

Setup

• Mermaid version: Latest
• Browser and Version: Chrome

Suggested Solutions

• Look into files and modules that deal with rendering edges and nodes
• Are there functions related to the positioning of edges relative to nodes and there calculations?(Where the space between edges are determined to prevent overlap)

Additional Context

• I noticed the issue doesn't only occur in areas of the diagram that are more densely connected. For example in the COURSE entity there aren't as many cardinality arrows being displayed to and from that entity compared to other entities like the DEPARTMENT entity. But there is still overlap occurring there compared to the DEPARTMENT entity.

[ArtjomE]

@anlai46 here reported issue #2291 by me might not be the same, but in my opinion, still lead to the same overlapping issue in displaying the arrows.