[Revealjs] Mermaid diagram figure can't be resized, and the fig caption is smaller than normal

[Martin15135215]

Description

---
title: Test
author: Martin
date: '2023-12-01'
format:
  revealjs:
    theme: dark
    slide-number: true
    mermaid:
      theme: dark
    standalone: true
    execute:
      echo: true
---

## Mermaid

```{mermaid}
%%| echo: false
%%| label: fig-mermaid
%%| fig-cap: "Mermaid"

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
```

## Picutre

![lorenzo-hamers-oPqdoLy0MDo-unsplash.jpg](lorenzo-hamers-oPqdoLy0MDo-unsplash.jpg){#fig-picutre}

If i change it to:

---
title: Test
author: Martin
date: '2023-12-01'
format:
  revealjs:
    theme: dark
    slide-number: true
    mermaid:
      theme: dark
    standalone: true
    execute:
      echo: true
---

## Mermaid

```{mermaid}
%%| echo: false
%%| label: fig-mermaid
%%| fig-cap: "Mermaid"
%%| fig-width: 10

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
```

## Picutre

![lorenzo-hamers-oPqdoLy0MDo-unsplash.jpg](lorenzo-hamers-oPqdoLy0MDo-unsplash.jpg){#fig-picutre}

or

---
title: Test
author: Martin
date: '2023-12-01'
format:
  revealjs:
    theme: dark
    slide-number: true
    mermaid:
      theme: dark
    standalone: true
    execute:
      echo: true
---

## Mermaid

```{mermaid}
%%| echo: false
%%| label: fig-mermaid
%%| fig-cap: "Mermaid"
%%| fig-width: 1

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
```

## Picutre

![lorenzo-hamers-oPqdoLy0MDo-unsplash.jpg](lorenzo-hamers-oPqdoLy0MDo-unsplash.jpg){#fig-picutre}

No visible change.
The same with .r-strech

and the fig caption size for mermaid figures are smaller than normal figures

[mcanouil]

Thanks for the examples. There is indeed something weird but I don't know if it is in Reveal.js and/or in the cross-reference system and/or
Mermaid.
(@cderv @cscheid)

Side note: why are you using standalone: true because I don't believe this has any meaning here as there is by default an appropriate header that you actually can't disable.

[Martin15135215]

Side note: why are you using standalone: true because I don't believe this has any meaning here as there is by default an appropriate header that you actually can't disable

I thought it would only create the HTML without the folder… And after I did the test, I noticed that was not the case and afterwards I forgot that I had it still in the YAML header.

[cderv]

Regarding fig-width and mermaid, there is this issue still open I believe:

• Mermaid fig-width no longer works #3973

So could be why you see no change

Regarding font size of Caption , revealjs does apply a 0.7em for the caption. I don't know how mermaid font-size does apply but the font size is 16px.

@mcanouil do you know how mermaid font-size is coming from ? Is this from main CSS or specific mermaid config ?

[mcanouil]

I know many things in Mermaid.js are computed on the fly by the library which uses context environment such as the locale of the browser, etc.
I don't know the specifics for font-size. (Never tried or needed to tweak that part)