如何设置Mermaid中subgraph子图的标题样式

不要通过在标题后加<br/>的方式加间距，Mermaid计算子图布局时不会识别标题里的换行来调整顶部内边距，必然会导致标题偏移出子图边界。以下是两种可直接生效的方案，同时满足字号调整和间距调整的需求：

方案1：全局配置（适合统一调整所有子图样式） #

直接在Mermaid代码开头加初始化配置，通过主题变量控制样式，不需要加额外冗余节点：

%%{init: {
  "themeVariables": {
    "clusterTitleFontSize": "20px", /* 调整子图标题字号，按需改数值 */
    "clusterBorderPadding": 25 /* 调整子图内边距，数值越大标题和下方节点间距越大 */
  }
}}%%
graph TB

subgraph someID[Some Title]
    direction TB
    A[第一个业务节点]
    B[第二个节点]
    A --> B
end 

• clusterTitleFontSize：专门控制子图标题的字体大小，支持px、rem等常规CSS单位
• clusterBorderPadding：控制子图边框和内部内容的整体内边距，调大该值会同步增加标题和顶部边框、标题和下方第一个节点、内容和左右/底部边框的距离

方案2：单图精准调整（适合只修改单个子图的间距） #

如果不想改动其他子图的默认内边距，可以在需要调整的子图顶部加一个透明占位节点，专门撑开标题和下方内容的距离，字号还是通过主题变量控制即可：

%%{init: {"themeVariables": {"clusterTitleFontSize": "20px"}}}%%
graph TB

subgraph someID[Some Title]
    direction TB
    %% 透明占位节点，height值就是你需要的间距大小
    gap[ ]:::noStyle
    A[第一个业务节点]
    B[第二个节点]
    A --> B
    %% 不可见连线，保证占位节点在第一个业务节点上方，不渲染任何线条
    gap ~~~ A
end 

classDef noStyle fill:transparent,stroke:transparent,height:30px

这里的~~~是Mermaid的不可见连接语法，只会约束两个节点的相对位置，不会生成可见的连线，也不会影响其他布局逻辑。

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