美人鱼流程图布局

如何解决美人鱼流程图布局

我有以下美人鱼代码可以呈现下图：

flowchart LR;
    classDef socket fill:#f9f,stroke:#333,stroke-width:4px;
    subgraph host1[Client Host]
        subgraph "Client Process (browser)"
            app1[browser Code] <--> socket1[Socket<br/>TCP/64206]:::socket
        end
        subgraph os1[OS]
            socket1 <--> tcp1[Transport Layer] <--> ip1[Internet Layer] <--> link1[Link Layer]
        end
    end
    subgraph host2[Server Host]
        subgraph os2[OS]
            link2[Link Layer] <--> ip2[Internet Layer] <--> tcp2[Transport Layer]
        end
        subgraph "Server Process (Web Server)"
            tcp2 <--> socket2[Socket<br/>TCP/80]:::socket <--> app2[Server Code]
        end
    end
    link1 <--> link2
    ip1 <-.-> ip2
    tcp1 <-.-> tcp2
    socket1 <-.-> socket2

我想更改块的布局，使 host1 子图自上而下布局，而 host2 自下而上布局。也就是说，两个链路层块应该呈现在底部，直接在它们上方的是互联网层，然后是传输层，然后是套接字，最后是顶部的代码块。有没有办法在美人鱼中做到这一点？或者，是否有一种方便的方法来编辑 SVG 以获得所需的布局？