How do I make a mermaid chart to fit into the page width in pdf like it does in html?

[tony-an-phd]

Description

I have tried numerous way to customize such as customize the style sheet, limit the page width etc, but one of my mermaid flow-chart still runs out of the page in the pdf output, while in the html output, it looks perfectly within the page width. Any advice on how to make the pdf to be the same as html for this mermaid chart?

---
title: "long flow chart"

format:
  html:
    toc: true 
  pdf:
    documentclass: article
    number-sections: true
    code-fold: true
    classoption: "margin=1in"
    header-includes:
      - \setlength{\oddsidemargin}{0in}
      - \setlength{\evensidemargin}{0in}
      - \setlength{\textwidth}{6.5in}
      - \setlength{\topmargin}{0in}
      - \setlength{\textheight}{9in}
    page-size: a4
    margin: 1in

---

@fig-newwgtadj is within the pagewidth of html output, but goes
outside the page in pdf output. 

```{mermaid}
%%| label: fig-newwgtadj
%%| fig-cap: |
%%|   the flow chat becomes too wide in pdf
graph LR
  A(["Original Weights $$\ w_{ijk}$$"]) -- some kind of <br>adjustments --> B(("$$w_{ijk}^{(1)}$$")) 
  B -- more adjustment --> C(("$$v_{ijk}$$")) 
  C -- final adjustment -->  D(["Final Weights\n $$\tilde v_{ijk}$$"])
```

>quarto check 
Quarto 1.6.36
[>] Checking environment information...
      Quarto cache location: C:\Users\anthony.an\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.6.36
      Path: C:\Users\anthony.an\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: v2024.11
      Chromium: (not installed)

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

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

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[tony-an-phd]

I think it has to do with the font in mermaid is too big for the pdf output, and not to scale to the appropriate font like it does in html.

[Steinthal]

You need to limit the figure width. Depending on the the chart, you also might need to distinguish between html and pdf.

If you want to change the font size (default is 16), you can use Mermaid configuration:

---
title: "long flow chart"

format:
  html:
    toc: true 
  pdf:
    documentclass: article
    number-sections: true
    code-fold: true
    classoption: "margin=1in"
    header-includes:
      - \setlength{\oddsidemargin}{0in}
      - \setlength{\evensidemargin}{0in}
      - \setlength{\textwidth}{6.5in}
      - \setlength{\topmargin}{0in}
      - \setlength{\textheight}{9in}
    page-size: a4
    margin: 1in

---

@fig-newwgtadj is within the pagewidth of html output, but goes
outside the page in pdf output. 


:::: {.content-visible unless-format="pdf"}
```{mermaid}
%%| label: fig-newwgtadj
%%| fig-cap: |
%%|   the flow chat becomes too wide in pdf
graph LR
  A(["Original Weights $$\ w_{ijk}$$"]) -- some kind of <br>adjustments --> B(("$$w_{ijk}^{(1)}$$")) 
  B -- more adjustment --> C(("$$v_{ijk}$$")) 
  C -- final adjustment -->  D(["Final Weights\n $$\tilde v_{ijk}$$"])
```
::::

:::: {.content-visible when-format="pdf"}
```{mermaid}
%%| label: fig-newwgtadj
%%| fig-cap: |
%%|   this flow chart fits in pdf
%%| fig-width: 7
---
config:
  theme: neutral
  themeVariables:
    fontSize: 10
---
graph LR
  A(["Original Weights $$\ w_{ijk}$$"]) -- some kind of <br>adjustments --> B(("$$w_{ijk}^{(1)}$$")) 
  B -- more adjustment --> C(("$$v_{ijk}$$")) 
  C -- final adjustment -->  D(["Final Weights\n $$\tilde v_{ijk}$$"])
```
::::

[tony-an-phd]

Thank you!!! I tried for so hard to configure the figure differently based on different output, but all failed. This gives me an example to change the configuration moving forward. But it would have been nice to let the default to do the trick. Without the specific configuration, the default font in mermaid figure in the pdf output is obviously much bigger than the text on that page.