Quarto HTML中Mermaid流程图盒子过小问题求助

有几种自动适配或调整的方式可以解决这个问题：

1. 全局配置Mermaid流程图参数 #

在Quarto文档的YAML头部或全局配置文件（_quarto.yml）中添加Mermaid初始化配置，统一调整流程图的节点间距、内边距，让盒子自动适配文字：

单文档配置示例 #

---
title: "Mermaid boxes too small in HTML Quarto"
format: html
---

```{mermaid}
%%{init: {"flowchart": {"nodeSpacing": 40, "rankSpacing": 80, "padding": 15}}}%%
flowchart LR
  A[Data preparation] --> B(Data exploration)
  B --> C{Modelling}
  C --> D[Prediction]
  D --> E[Conclusion]

### 全局配置示例（所有HTML文档生效）
在`_quarto.yml`中添加：
```yaml
format:
  html:
    mermaid:
      init:
        flowchart:
          nodeSpacing: 40
          padding: 15

2. 给单个/批量节点指定样式 #

如果只想调整特定节点，可通过自定义CSS类来设置节点宽度，让盒子容纳文字：

flowchart LR
  A["Data preparation"]:::custom-node --> B["Data exploration"]:::custom-node
  B --> C{Modelling}
  C --> D[Prediction]
  D --> E[Conclusion]

%% 定义自定义节点样式 %%
style custom-node width:180px; padding:8px;

3. 调整字体大小适配盒子 #

若文字本身过大导致溢出，可在Mermaid初始化配置中调整全局字体大小，配合内边距实现自动适配：

%%{init: {"flowchart": {"fontSize": 14, "padding": 12}}}%%
flowchart LR
  A[Data preparation] --> B(Data exploration)
  B --> C{Modelling}
  C --> D[Prediction]
  D --> E[Conclusion]

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