How to control the size of a mermaid diagram in html format using Quarto?

[luifrancgom]

Description

I want to control the size of a mermaid diagram as it is pointed out in Sizing but I don't see any difference when using different values for fig-width in html format.

---
format: 
  html:
    embed-resources: true
---

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

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

It is possible to control the size of a mermaid diagram using Quarto or I need to use css or scss.

Quarto check output

[>] Checking environment information...
      Quarto cache location: C:\Users\Usuario\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.3.1: OK
      Typst version 0.13.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.8.14
      Path: C:\Users\Usuario\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: 869685

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\Usuario\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2025

[>] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: C:\Program Files\Google\Chrome\Application\chrome.exe
      Source: Windows Registry

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.13.5
      Path: C:/Python313/python.exe
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with py -m pip install jupyter

[>] Checking R installation...........OK
      Version: 4.5.0
      Path: C:/PROGRA~1/R/R-45~1.0
      LibPaths:
        - C:/Users/Usuario/AppData/Local/R/win-library/4.5
        - C:/Program Files/R/R-4.5.0/library
      knitr: 1.50
      rmarkdown: 2.29

[>] Checking Knitr engine render......OK

[luifrancgom]

I am closing this question because I was confused with the documentation where I didn't initially see the option:

---
format:
  html:
    mermaid-format: png
---

I was confused about this option and how the size of the mermaid plot was controlled using fig-width.

[mcanouil]

Mermaid diagram are rendered by the JavaScript library on the fly in the browser.
fig-width are for images available to Quarto.
If you inspect your HTML document you can see that the parent div gets data-fig-width="5".
If you really want to customise Mermaid diagram, you should look at Mermaid documentation as direct access through Quarto is limited.

PS: do not close discussion. Eventually, mark your reply as the answer.

[mcanouil]

Anyhow, there is still something fishy as fig-responsive: false should allow to set explicit height/width regardless of the format according to the documentation.

From few tests, it appears the format for mermaid needs to be set for the width/height to work. It does not matter if it's SVG or PNG.
The only format where setting width/height does not work is js (the default).

[mcanouil]

• Mermaid fig-width no longer works #3973

[luifrancgom]

Thanks, I didn't see the issue open. Sorry.