How to stop links from covering subgraph titles with Mermaid graphs?

Question

I'm using Mermaid in Obsidian and Wordpress. In both, the following short diagram has the connecting arrows covering the title:

Is there any way to fix this without CSS or changing to horizontal?

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script>

<div class="mermaid">
flowchart TD
    subgraph "your home"
        host(You open a connection to a home server)
    end
    subgraph "fast peering"
        host<-->fast1(I'm super close to the destination)
        fast1<--what a quick trip! -->server(destination server)
    end
    subgraph "slow peering"
        host<-->server2(I'm still far away)
        server2<-- this takes a few milliseconds-->server3(Still too far...)
        server3<-- this takes a few more milliseconds-->server4(are we there yet?)
        server4<-- this takes precious milliseconds-->server5(almost there!)
        server5<-- whew, finally! -->server
    end
</div>

Answer 1

You can set an explicit id for the subgraph, e.g. subgraph FP [fast peering]. Then, set the direction to the subgraph, e.g. Home <---> FP.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script>

<div class="mermaid">
flowchart TD
    subgraph Home [your home]
        host(You open a connection to a home server)
    end
    subgraph FP [fast peering]
        fast1(I'm super close to the destination)
        fast1<--what a quick trip! -->server(destination server)
    end
    subgraph SP [slow peering]
        server2(I'm still far away)
        server2<-- this takes a few milliseconds-->server3(Still too far...)
        server3<-- this takes a few more milliseconds-->server4(are we there yet?)
        server4<-- this takes precious milliseconds-->server5(almost there!)
        server5<-- whew, finally! -->server
    end
    Home <---> FP
    Home <---> SP
</div>