Xaringan: DiagrammeR could not be shown properly in xaringan

[yufree]

I have a similar issue with this SO question.

Here is a demo:

~~~

title: "test"
author: "test"
output:

xaringan::moon_reader

```{r test,echo=FALSE}
library(DiagrammeR)
mermaid("graph TD;
A-->B;
A-->C;
B-->D;
C-->D
")

~~~
Results:

![](https://raw.githubusercontent.com/yufree/democode/master/xaringan/re1.png)

I tried this in `Rmarkdown` and the result is fine:

~~~
---
title: "test"
author: "test"
output: html_document
---

```{r test}
library(DiagrammeR)
mermaid("graph TD;
           A-->B;
           A-->C;
           B-->D;
           C-->D
           ")

~~~

Results:

I checked the source code of the output html and find the svg files are different between xaringan and Rmarkdown. The width and height of the label were both 0 in xaringan's svg while 10 and 14 in Rmarkdown's svg. Since Rmarkdown worked, I think such difference would come from xaringan.

However, I am not sure which part cause such issue. Since diagrammes were used a lot in general presentation, I hope someone could help.

[yihui]

The main tricky thing is that when slides are rendered, all pages except the current one are invisible initially. This could cause all sorts of problems (MathJax, HTML widgets, ...). I don't have time for a thorough investigation into such issues.

[yufree]

@yihui Thanks for your explaination.

I checked the repo of DiagrammeR and find some related issues like rich-iannone/DiagrammeR#218 and rich-iannone/DiagrammeR#207 .

I think this issue might also come from mermaid since I found Graphviz could work with xaringan(also output svg). I guess the javascript of mermaid might also contain some black magic for this issue.

Currently I have two options:

• Use Graphviz to draw the workflow
• Use mermaid to draw the workflow and save as png file locally. Then insert the files in xaringan.

[Yue-Jiang]

As always, widgetframe::frameWidget as a workaround...

---
title: "test"
author: "test"
output:
  xaringan::moon_reader
---

```{r test,echo=FALSE}
library(DiagrammeR)
m <- mermaid("graph TD;
           A-->B;
           A-->C;
           B-->D;
           C-->D
           ")
widgetframe::frameWidget(m)
```

[sguyader]

Hi,
The above solution works, but it makes the graph background white instead of transparent, and I couldn't find a way to change that.

[erex]

Any progress regarding DiagrammeR images with transparent backgrounds?

[phouba]

Use widgetframe::frameableWidget(m) instead of widgetframe::frameWidget(m) for transparent background.