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

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>