如何阻止链接用美人鱼图覆盖子图标题?
How to stop links from covering subgraph titles with Mermaid graphs?
我在 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>
您可以为子图设置一个明确的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>
我在 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>
您可以为子图设置一个明确的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>