architecture-beta - linking between points in different groups causing layout problems?

[chrissearle]

Not sure if this is due to architecture-beta still being in beta or if I am doing something wrong here.

Thought I'd just ask if I'm missing something obvious or not :)

---

I have the following (anonymised) setup:

architecture-beta
    group a(cloud)[Cloud Provider 1]
    group b(cloud)[Cloud Provider 2]
    group c(internet)[Public Web]
    
    service service1(server)[Service 1] in a
    service service2(server)[Service 2] in a
    service service3(server)[Service 3] in a
    service database1(database)[Database 1] in a

    service web1(server)[Web 1] in b

    service mob1(internet)[Mobile App 1] in c
    service mob2(internet)[Mobile App 2] in c

    junction j1 in a
    junction j2 in c

    service1:B -- T:database1
    service1:T -- B:j1
    service2:L -- R:j1
    service3:R -- L:j1

    j2:T -- B:mob1
    j2:B -- T:mob2

which looks like this:

architecture-beta
    group a(cloud)[Cloud Provider 1]
    group b(cloud)[Cloud Provider 2]
    group c(internet)[Public Web]
    
    service service1(server)[Service 1] in a
    service service2(server)[Service 2] in a
    service service3(server)[Service 3] in a
    service database1(database)[Database 1] in a

    service web1(server)[Web 1] in b

    service mob1(internet)[Mobile App 1] in c
    service mob2(internet)[Mobile App 2] in c

    junction j1 in a
    junction j2 in c

    service1:B -- T:database1
    service1:T -- B:j1
    service2:L -- R:j1
    service3:R -- L:j1

    j2:T -- B:mob1
    j2:B -- T:mob2

Loading

Service 1 is the main hub for everything - so I want to add two more links - one from web1 to service1 and one from j2 to service1.

If we add just web1:

    web1:L -- R:service1

then it moves group b inside group a:

architecture-beta
    group a(cloud)[Cloud Provider 1]
    group b(cloud)[Cloud Provider 2]
    group c(internet)[Public Web]
    
    service service1(server)[Service 1] in a
    service service2(server)[Service 2] in a
    service service3(server)[Service 3] in a
    service database1(database)[Database 1] in a

    service web1(server)[Web 1] in b

    service mob1(internet)[Mobile App 1] in c
    service mob2(internet)[Mobile App 2] in c

    junction j1 in a
    junction j2 in c

    service1:B -- T:database1
    service1:T -- B:j1
    service2:L -- R:j1
    service3:R -- L:j1

    j2:T -- B:mob1
    j2:B -- T:mob2
    
    web1:L -- R:service1

Loading

If I link just the junction in:

    service1:L -- R:j2

then it makes the entire thing extremely wide

architecture-beta
    group a(cloud)[Cloud Provider 1]
    group b(cloud)[Cloud Provider 2]
    group c(internet)[Public Web]
    
    service service1(server)[Service 1] in a
    service service2(server)[Service 2] in a
    service service3(server)[Service 3] in a
    service database1(database)[Database 1] in a

    service web1(server)[Web 1] in b

    service mob1(internet)[Mobile App 1] in c
    service mob2(internet)[Mobile App 2] in c

    junction j1 in a
    junction j2 in c

    service1:B -- T:database1
    service1:T -- B:j1
    service2:L -- R:j1
    service3:R -- L:j1

    j2:T -- B:mob1
    j2:B -- T:mob2
    
    service1:L -- R:j2

Loading

And if I add in both:

    web1:L -- R:service1
    service1:L -- R:j2

then its even wider and still overlaying groups:

architecture-beta
    group a(cloud)[Cloud Provider 1]
    group b(cloud)[Cloud Provider 2]
    group c(internet)[Public Web]
    
    service service1(server)[Service 1] in a
    service service2(server)[Service 2] in a
    service service3(server)[Service 3] in a
    service database1(database)[Database 1] in a

    service web1(server)[Web 1] in b

    service mob1(internet)[Mobile App 1] in c
    service mob2(internet)[Mobile App 2] in c

    junction j1 in a
    junction j2 in c

    service1:B -- T:database1
    service1:T -- B:j1
    service2:L -- R:j1
    service3:R -- L:j1

    j2:T -- B:mob1
    j2:B -- T:mob2
    
    web1:L -- R:service1
    service1:L -- R:j2

Loading

[Lockszmith-GH]

I've seen similar issues to what you're describing,

click to expand - my diagram code

architecture-beta
    %% group {group id}({icon name})[{title}] (in {parent id})?
    %% service {service id}({icon name})[{title}] (in {parent id})?
    %% {serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}?
    %% junction {junction id} (in {parent id})?
    %% cloud, database, disk, internet, server

    group host(server)[kateryna TrueNAS Scale]
    group jail(server)[runtipi Jail] in host

    %% docker sub system
    group docker(server)[docker system] in jail

    service d_daemon(cloud)[docker service] in docker
    service d_socket(disk)[docker socket] in docker

    junction dk_j1 in docker
    junction sock_j1 in docker
    junction sock_j2 in docker
    junction rt_net_j1 in runtipi
    junction rt_net_j2 in runtipi
    junction rt_net_j3 in dockge
    junction rt_net_j4 in dockge
    junction dkg_j1 in dockge
    junction rta_j1 in rt_apps

    %% runtipi subsystem
    group runtipi(server)[runtipi subsystem] in docker

    service rt_sock(disk)[docker socket] in runtipi
    
    service rt_srv(server)[runtipi] in runtipi
    service rt_db(database)[db] in runtipi
    service rt_rvpxy(internet)[reverse proxy traefik] in runtipi

    group rt_apps(server)[runtipi apps] in runtipi
    service rt_net(cloud)[tipi_main_network] in rt_apps

    group authentik(server)[authentik] in rt_apps
    service auth_srv(server)[service] in authentik
    service auth_db(database)[db] in authentik

    service code(server)[code server] in rt_apps
    rt_net_j2:R -- L:code

    group dockge(server)[dockge subsystem] in docker
    service dkg_srv(server)[dockge] in dockge
    service dkg_sock(disk)[docker socket] in dockge

    d_daemon{docker}:R <-- L:d_socket{docker}
    %% d_daemon:R -- L:dk_j1
    %% d_socket:T --> B:d_daemon
    d_socket:R -- L:sock_j1
    sock_j1:B -- T:sock_j2

    dk_j1:R --> L:rt_srv
    sock_j1:R -- L:rt_sock

    rt_srv:B --> T:rt_sock
    rt_srv:R -- L:rt_net
    rt_net:B -- T:rt_db

    auth_srv:R -- L:auth_db

    rt_net:R -- L:rt_net_j1
    rt_net_j1:R -- L:rta_j1
    rt_net_j1:B -- T:rt_net_j2

    rta_j1:R -- L:auth_srv
    rt_net_j2:B -- T:rt_net_j3
    rt_net_j3:B -- T:rt_net_j4

    sock_j2:R -- L:dkg_sock
    dkg_sock:B -- T:dkg_srv
    dkg_srv:R -- L:dkg_j1
    dkg_j1:R -- L:rt_net_j4

[nagelp]

I'm seeing the same. Tried to model my smart home setup... at first things were going smoothly, but now the layout is messed up with pretty much anything I add. It's a pity, would have loved to use mermaid to do this, but seems the 'architecture-beta' diagram isn't ready, yet.

To illustrate my problem, have a look at this screenshot where it still looks ok (minus the "Thermostat Schlafzimmer" being half in the "ZWave sensor actor network" group, where it doesn't belong):

But then I want to make the connection between "ioBroker server" and "raspi4 ioBroker server", by adding the line iobrokerserver:R -- L:raspi4. This leads to the following mess (ah, and the screenshot is cropped, because it's suddenly ~5000px tall)... no matter what I try with junctions, I can't get this to look decent.

Here's my code:

```mermaid
architecture-beta
    %% group internet(mdi:cloud)[Internet]
    group home(mdi:home)[Home]
    group smarthomenetwork(mdi:home-automation)[Smart home network] in home
    group zwavenetwork(mdi:zwave)[ZWave sensor actor network] in smarthomenetwork
    group amazon(mdi:cloud)[Amazon data center]
    group iobrokerpro(mdi:cloud)[iobroker_pro]

    %% Home devices
        service raspi4(mdi:raspberry-pi)[raspi4 ioBroker server] in smarthomenetwork
        service zwavedongle(mdi:zwave)[ZWave dongle] in zwavenetwork
        service data(mdi:server)[data Server] in home
        service fritzbox(mdi:router-wireless)[FritzBox] in home
        service egrepeater(mdi:router-wireless)[EG repeater] in home
        service ogrepeater(mdi:router-wireless)[OG repeater] in home
        service dgrepeater(mdi:router-wireless)[DG repeater] in home
        service lan(mdi:switch)[LAN Switch] in home
        service echodot(mdi:speaker-message)[Alexa Echo Dot] in home

        %% ZWave devices
        service thermostatArbeitszimmer(mdi:thermostat)[Thermostat Arbeitszimmer] in smarthomenetwork
        service thermostatSchlafzimmer(mdi:thermostat)[Thermostat Schlafzimmer] in smarthomenetwork
        service multiSensorArbeitszimmer(mdi:motion-sensor)[MultiSensor Arbeitszimmer] in zwavenetwork
        service arbeitszimmer(mdi:lightbulb)[Lamp Arbeitszimmer] in zwavenetwork
        service schlafzimmer(mdi:lightbulb)[Lamp Schlafzimmer] in zwavenetwork
        service rollladenSchlafzimmer(mdi:window-shutter)[Rollladen Schlafzimmer] in zwavenetwork
        service thermostatBadezimmer(mdi:thermostat)[Thermostat Badezimmer] in zwavenetwork

        %% Junctions (for layout)
        junction junctionLAN in home
        junction junctionLAN2 in home
        junction junctionLAN3 in home
        junction junctionSmarthomenetwork in smarthomenetwork
        junction junctionSmarthomenetwork2 in smarthomenetwork
        junction junctionZwave in zwavenetwork
        junction junctionZwave2 in zwavenetwork
        junction junctionOutside
        junction junctionOutside2

        lan:R -- L:junctionLAN
        lan:T -- B:fritzbox
        lan:B -- T:data
        junctionLAN:T -- B:egrepeater
        junctionLAN:R -- L:junctionLAN2
        junctionLAN2:T -- B:ogrepeater
        junctionLAN2:R -- L:junctionLAN3
        junctionLAN3:T -- B:dgrepeater
        egrepeater:T -- B:echodot
        ogrepeater:T -- B:raspi4
        dgrepeater:T -- L:junctionSmarthomenetwork
        junctionSmarthomenetwork:R -- L:junctionSmarthomenetwork2
        junctionSmarthomenetwork:T -- B:thermostatSchlafzimmer
        junctionSmarthomenetwork2:T -- B:thermostatArbeitszimmer
        raspi4:T -- B:zwavedongle
        zwavedongle:R -- L:rollladenSchlafzimmer
        zwavedongle:L -- R:multiSensorArbeitszimmer
        zwavedongle:T -- B:junctionZwave
        junctionZwave:L -- R:schlafzimmer
        junctionZwave:R -- L:arbeitszimmer
        junctionZwave:T -- B:junctionZwave2
        junctionZwave2:R -- L:thermostatBadezimmer

    echodot:L -- R:junctionOutside
        
    service alexaserver(mdi:server)[Alexa server farm] in amazon
    junctionOutside:L -- R:alexaserver

    service iobrokerserver(mdi:server)[ioBroker server] in iobrokerpro
    iobrokerserver:T -- B:alexaserver

    %% Uncomment the next line to get instant mess ;)
    %% iobrokerserver:R -- L:raspi4