Quarto中fig-width无法调整Reveal.js内Mermaid图表尺寸的问题

问题背景 #

在Quarto 1.4.537版本的Reveal.js幻灯片中，尝试用fig-width参数调整Mermaid流程图的尺寸，但无论在RStudio还是VSCode中都没有效果，两次输出的图表尺寸完全一致。

核心原因 #

1. 参数适用范围不匹配：fig-width是Quarto为R/Python生成的静态图形（如ggplot、matplotlib图表）设计的通用参数，并不适用于Mermaid这类由前端JavaScript渲染的交互式图表。
2. Reveal.js的Mermaid渲染逻辑：Reveal.js环境下的Mermaid图表默认采用自适应幻灯片容器宽度的渲染规则，Quarto的通用figure尺寸参数无法覆盖这个前端行为。
3. 配置层级问题：Mermaid图表的尺寸优先级由自身的配置参数或容器CSS样式决定，而非Quarto的全局figure参数。

解决办法 #

方法1：使用Mermaid原生配置指定宽度

直接在Mermaid代码块的配置中添加width参数，针对流程图类型设置：

--- 
format: revealjs
---

## 调整后的Mermaid图表

```{mermaid}
%%| config: {"flowchart": {"width": 800}}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}

#### 方法2：自定义CSS全局调整Mermaid宽度
在文档头部添加CSS样式，统一控制所有Mermaid图表的宽度：
```yaml
--- 
format: revealjs
---

<style>
.mermaid {
  width: 80% !important;
}
</style>

## 全局调整后的Mermaid图表

```{mermaid}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}

#### 方法3：针对单张幻灯片调整宽度
给目标幻灯片添加自定义类，配合CSS实现单页专属的尺寸控制：
```yaml
--- 
format: revealjs
---

<style>
.wide-mermaid-slide .mermaid {
  width: 90% !important;
}
</style>

## 单页调整后的Mermaid图表 {.wide-mermaid-slide}

```{mermaid}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}

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