search

quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.74k stars 305 forks source link

Mermaid errors in Callout Block when collapse=”true” #9677

Open MaikPoetzsch opened 3 months ago

MaikPoetzsch commented 3 months ago

Bug description

Mermaid doesn't work inside a Callout Block when collapse=”true”. There might be two kinds of errors.

grafik

Steps to reproduce

---
title: "Mermaid in collapsible Callout Block"
format: html
---

# Mermaid doesn't work inside a Callout Block when collapse="true"
remove collapse="true" to get a working flowchart

## cuts of image as in #5145
<https://github.com/quarto-dev/quarto-cli/issues/5145>

:::{.callout-note collapse=”true”}
# Mermaid inside a Callout Block collapse is true

```{mermaid}

flowchart TD

Schleife1{i kleiner 10}
Schleife2{i kleiner 20}

    Schleife1 --- Schleife2

:::

labeling edges crashes Mermaid engine

:::{.callout-note collapse=”true”}}

Mermaid inside a Callout Block collapse is true


flowchart TD

Schleife1{i kleiner 10}
Schleife2{i kleiner 20}

    Schleife1 ---|text| Schleife2

:::


### Expected behavior

Mermaid renders as in a non collapsible Callout Block
````qmd
---
title: "Mermaid in non collapsible Callout Block"
format: html
---

:::{.callout-note collapse=”false”}
# Mermaid inside a Callout Block collapse is false

```{mermaid}

flowchart TD

Schleife1{i kleiner 10}
Schleife2{i kleiner 20}

    Schleife1 --- Schleife2

:::


### Actual behavior

See bug description

### Your environment

System 1
Microsoft Windows 10 Enterprise, Version 10.0.19045 Build 19045
VS Code 1.85.1

System 2
Microsoft Windows 11 Home, Version 10.0.22.631 Build 22631
VS Code 1.89.1

### Quarto check output

System 1

```bash
Quarto 1.4.551
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.551
      Path: C:\Users\USER\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

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

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

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

[>] Checking Python 3 installation....OK
      Version: 3.12.1
      Path: C:/Users/USER/AppData/Local/Programs/Python/Python312/python.exe
      Jupyter: 5.7.1
      Kernels: python3

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

[>] Checking R installation...........OK
      Version: 4.3.2
      Path: C:/PROGRA~1/R/R-43~1.2
      LibPaths:
        - C:/Program Files/R/R-4.3.2/library
      knitr: 1.45
      rmarkdown: 2.25

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

System 2

Quarto 1.4.554
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.554
      Path: C:\Users\USER\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

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

[>] Checking LaTeX....................OK
      Tex:  (not detected)

[>] 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...........OK
      Version: 4.4.0
      Path: C:/PROGRA~1/R/R-44~1.0
      LibPaths:
        - C:/Users/USER/AppData/Local/R/win-library/4.4
        - C:/Program Files/R/R-4.4.0/library
      knitr: 1.46
      rmarkdown: 2.26

[>] Checking Knitr engine render......OK
mcanouil commented 3 months ago

Thanks for the report.

You have not closed properly one of your code block, you probably used not the same number of backticks or none.

MaikPoetzsch commented 3 months ago

Interestingly, using a R Code Cell to run Mermaid with DiagrammeR package works fine.

:::{.callout-note collapse=”true”}
# Mermaid in R cell inside a Callout Block collapse is true

```{r}
#| echo: false

install.packages("DiagrammeR", repos="http://cran.us.r-project.org", quiet = TRUE)

suppressWarnings(library("DiagrammeR"))

## Mermaid
DiagrammeR::mermaid("
  graph TD

  Schleife1{i kleiner 10}
  Schleife2{i kleiner 20}

    Schleife1 --- Schleife2
")

:::

cscheid commented 3 months ago

This is hard for us to fix in general because mermaid uses the size of the surrounding containers to determine its layout. A workaround is to render these initially-hidden diagrams to .png (although that means you won't get other features that come from the dynamic diagram compilation.)

fkohrt commented 4 days ago

I am experiencing a problem that is described well by the title of this issue. The following simple Quarto document contains no correctly rendered diagram:

---
title: "Test"
---

::: {.callout-note collapse="true"}
```{mermaid}
flowchart LR
    id1

:::


![](https://github.com/user-attachments/assets/994201c1-b8d7-41e5-8790-fa5b6ae46ca2)

<details>
<summary><code>quarto check</code></summary>

Quarto 1.6.6 [✓] Checking versions of quarto binary dependencies... Pandoc version 3.2.0: OK Dart Sass version 1.70.0: OK Deno version 1.41.0: OK Typst version 0.11.0: OK [✓] Checking versions of quarto dependencies......OK [✓] Checking Quarto installation......OK Version: 1.6.6 Path: /home//bin/quarto/bin

[✓] Checking tools....................OK TinyTeX: (not installed) Chromium: (not installed)

[✓] Checking LaTeX....................OK Using: Installation From Path Path: /usr/local/texlive/2024/bin/x86_64-linux Version: 2024

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

[✓] Checking Python 3 installation....OK Version: 3.12.4 Path: /usr/bin/python3 Jupyter: 5.7.1 Kernels: ir, python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK Version: 4.4.1 Path: /usr/lib64/R LibPaths:

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



</details>