Architecture diagram: Nodes overlap in same group

[stefan-girlich]

Description

Two nodes in the same group are rendered on top of each other when they connect to the same node in a differenr group.

Steps to reproduce

1. Create architecture diagram
2. Place two nodes in a group A
3. Place a single node in a group B
4. Connect both nodes in group A to single node in group B

Screenshots

Code Sample

https://mermaid.live/edit#pako:eNp9kE1qwzAQha8iZuVAfAFt22W6aaGFxCGMpaktqj_GUkIIuXtVu47TQquFmPf0Pc1IF1BBE0hAVr1JpFJmqltK2HhRVschR6GsIZ-GStmQ9Wr3MMn9PXIkVmQPIzFzr6MnRlXgCR-Ij0aRcKE1lg4YY2V8IvaUVrun0RTF3Avj574_gydqf6XeqP0_4ozWlk7IVC1l6Xarx-j9E-Zplynls6hrsZHLBRPxPc5fx9MOa3DEDo0uX3358hpIPTlqQJZSI3800Phr4TCn8HL2CmTiTGsov9v1IN_RDkXlqDHRo8GO0d3ciH4bwqyvn33yo28

architecture-beta
    group clients(cloud)[Clients]
    group vercel_cloud(cloud)[Vercel cloud]

    service mobile_app(internet)[Mobile app] in clients
    service web_app(internet)[Web app] in clients
    service middleware(middleware)[Middleware] in vercel_cloud

    mobile_app:R -- L:middleware
    web_app:R -- L:middleware

Loading

architecture-beta
    group clients(cloud)[Clients]
    group vercel_cloud(cloud)[Vercel cloud]

    service mobile_app(internet)[Mobile app] in clients
    service web_app(internet)[Web app] in clients
    service middleware(middleware)[Middleware] in vercel_cloud

    mobile_app:R -- L:middleware
    web_app:R -- L:middleware

Setup

• Mermaid version: online editor, GitHub
• Browser and Version: Brave 1.73.91

Suggested Solutions

No response

Additional Context

No response

[danilosampaio]

Hey, I would like to help out with this issue, since I'm facing the same problem on a side project I use architecture diagram, and possibly going forward and create a PR :)

[NicolasNewman]

This syntax is invalid and the intent was to display an error message so what the issue describes wouldn't be rendered in the first place. The diagram doesn't support multiple edges coming out one side of a node due to limitations in the underlying rendering engine. Junctions were added as a substitute.

[danilosampaio]

Gotcha. So, one possible way to fix the above example could be:

architecture-beta
    group clients(cloud)[Clients]
    group vercel_cloud(cloud)[Vercel cloud]

    service mobile_app(internet)[Mobile app] in clients
    service web_app(internet)[Web app] in clients
    service middleware(middleware)[Middleware] in vercel_cloud
    junction junctionTop
    junction junctionBottom

    mobile_app:R -- L:junctionTop
    web_app:R -- L:junctionBottom
    junctionBottom:T -- B:junctionTop
    junctionTop:R -- L:middleware

architecture-beta
    group clients(cloud)[Clients]
    group vercel_cloud(cloud)[Vercel cloud]

    service mobile_app(internet)[Mobile app] in clients
    service web_app(internet)[Web app] in clients
    service middleware(middleware)[Middleware] in vercel_cloud
    junction junctionTop
    junction junctionBottom

    mobile_app:R -- L:junctionTop
    web_app:R -- L:junctionBottom
    junctionBottom:T -- B:junctionTop
    junctionTop:R -- L:middleware

Loading

[devinhedge]

Gotcha. So, one possible way to fix the above example could be:

architecture-beta
    group clients(cloud)[Clients]
    group vercel_cloud(cloud)[Vercel cloud]

    service mobile_app(internet)[Mobile app] in clients
    service web_app(internet)[Web app] in clients
    service middleware(middleware)[Middleware] in vercel_cloud
    junction junctionTop
    junction junctionBottom

    mobile_app:R -- L:junctionTop
    web_app:R -- L:junctionBottom
    junctionBottom:T -- B:junctionTop
    junctionTop:R -- L:middleware

This is a sub-optimal work-around to a real issue:

• This does not work beyond three items in the group. Once you are beyond three items you are back to overlapping items.
• It suffers the same problems that plagued HTML layouts under CSS 1.x

The real issue is lack of layout directives for nodes that prevents overlap.

I searched and saw the same kind of issue being reported in multiple types of diagrams. That puts this in the category of a missing feature.

To me, the missing feature is lack of relative x,y grid directive the way many vector-based diagramming tools have (Visio, etc.).

Would it be appropriate to close this issue and open a different issue describing the feature request?

[NicolasNewman]

You're welcome to open a separate feature request for that. Unfortunately at the time architecture diagrams were added there were limitations in what rendering engines could be used (in part due to avoiding unnecessarily increasing the bundle size). I hope to revisit it at some point but unfortunately I have a lot less time to make contributions then I did in the past.

For three items in a group you can have junctions attached to junctions and keep extending it outwards as needed. I do agree its not an intuitive or ideal workaround to the issue.

Until #6176 gets merged in (which is currently blocked by #6489) I'm leaving this issue open.

[knsv]

[sisyphus-bot]

Thank you for the report. Apologies for the delay.

This has been flagged for maintainer review.

Initial analysis: A collaborator (NicolasNewman) has confirmed this is a known limitation of the cose-bilkent layout engine used by architecture diagrams. The syntax of multiple edges from one side of a node is technically unsupported. PR #6176 exists to add an explicit error message for this case, but it is blocked by #6489. The underlying constraint is fundamental to the cose-bilkent layout algorithm.

A maintainer will follow up once the blocking issues are resolved.

[devinhedge]

Appreciate the comment and explanation. For those curious here is a place to consider contributing to the underlying process: https://deepwiki.com/cytoscape/cytoscape.js-cose-bilkent