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