quarto-dev / quarto-dev/quarto-cli
Mermaid errors in Callout Block when collapse=”true”
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
Mermaid doesn't work inside a Callout Block when collapse=”true”. There might be two kinds of errors.
-
error 1: image cuts off as in #5145
-
error 2: Mermaid engine crashes with syntax error when labeling edges
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
```{mermaid}
flowchart TD
Schleife1{i kleiner 10}
Schleife2{i kleiner 20}
Schleife1 ---|text| Schleife2
```
:::
Expected behavior
Mermaid renders as in a non collapsible Callout Block
---
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
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by rendering the supplied .qmd reproduction with collapse="true" and "false", then compare both Mermaid examples and the image-cutoff case with #5145. Done means Mermaid diagrams render correctly inside collapsible callouts, including labeled edges, without the image being cut off.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100