r - Mermaid diagrams not rendering correctly in Rmarkdown xaringan presentations

Question

I am attempting to make some simple flowcharts in an Rmarkdown html presentation I am rendering with xaringan. I'm drawing mermaid diagrams using the DiagrammeR package. However, although the charts display correctly in the Rstudio viewer the styling does not appear in the presentation output.

For instance

DiagrammeR::mermaid("
graph LR;
A((Orange)) --> B((Grey));

classDef orange fill:#f96;
classDef grey fill:#d3d3d3;
class A orange;
class B grey;
")

generates one orange node and one grey node as expected when run at the console. However,

---
title: "Simple Example" 
output: 
  xaringan::moon_reader
---


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE, message = FALSE, warning = FALSE)
```

## Flow chart

```{r example, fig.align='center', fig.retina=3}
DiagrammeR::mermaid("
graph LR;
A((Orange)) --> B((Grey));

classDef orange fill:#f96;
classDef grey fill:#d3d3d3;
class A orange;
class B grey;
")
```

generates the flowchart in the default mermaid colors ignoring the styling.

Does anyone know a workaround for this? I would also be open to suggestions of other packages for drawing simple tree diagrams.

Answer 1

The mermaid creates a htmlwidget as output. You should wrap it into a <iframe> section. The widgetframe package can do this for you, other htmlwidget-based apps like DT, leaflet, Dygraph can be embeded into xaringan with this method.

---
title: "Simple Example" 
output: 
  xaringan::moon_reader
---


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE, message = FALSE, warning = FALSE)
```

## Flow chart

```{r example, fig.align='center', fig.retina=3}

suppressPackageStartupMessages(library(widgetframe))


l=DiagrammeR::mermaid("
graph LR;
A((Orange)) --> B((Grey));

classDef orange fill:#f96;
classDef grey fill:#d3d3d3;
class A orange;
class B grey;
")

widgetframe::frameWidget(l)
```