quarto-dev / quarto-dev/quarto-cli

Mermaid errors in Callout Block when collapse=”true”

Open
#9,677 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug diagrams-mermaid
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

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

```{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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.