When making Quarto HTML text documents, Mermaid diagrams work as expected. When making Quarto Revealjs presentations, Mermaid diagrams also work as expected; however, downstream of the first instance of a code block or an image, Mermaid diagrams stop showing.
I have Quarto version 1.0.37.
R version 4.2.0
Platform aarch64-apple-darwin20 (64-bit)
RStudio 2022.07.1+554 "Spotted Wakerobin" Release for macOS
Reprex:
---
title: "Untitled"
format: revealjs
editor: visual
---
## Quarto
Works
```{mermaid}
flowchart LR
A[Hard edge] --> B(Round edge)
B --> C{Decision}
C --> D[Result one]
C --> E[Result two]
```
## Some code here
```{r}
1+1
```
## Doesn't work anymore
```{mermaid}
flowchart LR
A[Hard edge] --> B(Round edge)
B --> C{Decision}
C --> D[Result one]
C --> E[Result two]
```
cderv
September 28, 2022, 12:54pm
2
Unfortunately this is a known issue yet to be fixed
opened 02:29AM - 26 Sep 22 UTC
closed 03:52PM - 13 Oct 22 UTC
bug
mermaid
### Bug description
Mermaid diagrams in reveal JS clip the diagram image after … the second slide.
For example, consider the following file (named slides.qmd):
````
---
title: "mermaid crash"
format:
revealjs
---
# git graph 1
```{mermaid}
gitGraph
commit id: "Alpha"
```
# git graph 2
```{mermaid}
gitGraph
commit id: "Alpha"
```
# git graph 3
```{mermaid}
gitGraph
commit id: "Alpha"
```
````
Creates the expected output for git graph 1 and 2, which look like this:
![image](https://user-images.githubusercontent.com/11671536/192181269-e8133515-b41d-4802-b752-8f801ed65bb0.png)
But slide 3 looks like this (as do any subsequent slides with mermaid content):
![image](https://user-images.githubusercontent.com/11671536/192181354-ee0894ab-c17e-48a2-9591-053d0f548ad0.png)
I am using the latest nightly build (1.2.157) on Ubuntu 20.04. I am just using quarto from the command line to generate the html (no R studio).
I get the same problem when viewer rendered html with Chrome or Firefox. Also, it is not unique to gitGraph, any mermaid content gets distorted and clipped. Interestingly, sometime while in preview mode the problem rights itself after making a change to any of the slides (but not always).
Thanks!
### Checklist
- [X] Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
- [X] Please [format your issue](https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us) so it is easier for us to read the bug report.
- [X] Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
- [X] Please document the operating system you're running. If on Linux, please provide the specific distribution.
Sorry for the inconvenience.
Workaround is to set view-distance
and mobile-view-distance
so that it includes the slide with the last mermaid diagram.
Follow the issue to track when we'll fix this
1 Like
Thank you for your quick answer! Great to know you all are on it
2 Likes
system
Closed
October 20, 2022, 6:33am
4
This topic was automatically closed 21 days after the last reply. New replies are no longer allowed. If you have a query related to it or one of the replies, start a new topic and refer back with a link.