如何阻止链接用美人鱼图覆盖子图标题？

Question

我在 Obsidian 和 Wordpress 中使用 Mermaid。在这两个图中，下面的简短图表都有覆盖标题的连接箭头：

有没有办法在不使用 CSS 或更改为水平的情况下解决此问题？

<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

您可以为子图设置一个显式的 id，例如subgraph FP [fast peering]。然后，设置子图的方向，例如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>