如何解决Mermaid子图标题换行时元素被覆盖的问题？

问题详情 #

• 背景：使用Mermaid可视化代码结构，需为部分函数展示名称及额外信息（如循环运行时间）。
• 问题：在子图标题中用<br>换行添加信息时，标题第二行（如“Full Run-Time: 193”）被子图内的节点覆盖。
• 代码示例：

A["BootCV()"]
subgraph D["LM.CV() <br> Full Run-Time: 193"]
direction TB
        DA["lm()"] -.-&gt; combine_results
    end
A -.-&gt; D

• 问题现象：子图标题的第二行文字被下方的“lm()”节点部分遮挡。

可行解决办法 #

方法1：自定义子图标题样式增加内边距 #

通过Mermaid的样式定义功能，给子图标题添加底部内边距，让标题与内部节点之间留出足够空间：

classDef subgraphTitle padding-bottom:20px;
A["BootCV()"]
subgraph D["LM.CV() <br> Full Run-Time: 193"]
direction TB
        DA["lm()"] -.-&gt; combine_results
    end
class D subgraphTitle
A -.-&gt; D

方法2：添加隐形节点撑开空间 #

在子图最顶部添加一个高度为0的隐形节点，隔开标题与内容节点：

A["BootCV()"]
subgraph D["LM.CV() <br> Full Run-Time: 193"]
direction TB
        invisible[ ]:::hidden
        DA["lm()"] -.-&gt; combine_results
    end
classDef hidden height:0px;
A -.-&gt; D

方法3：直接调整内部节点的上边距 #

给子图内的第一个节点设置上边距，让它向下偏移：

A["BootCV()"]
subgraph D["LM.CV() <br> Full Run-Time: 193"]
direction TB
        DA["lm()"] -.-&gt; combine_results
        style DA margin-top:15px;
    end
A -.-&gt; D

内容的提问来源于stack exchange，提问作者Simon Ress