2

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.

gfgm
  • 3,627
  • 14
  • 34

1 Answers1

2

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)
```
TC Zhang
  • 2,757
  • 1
  • 13
  • 19
  • Thanks this is a great answer, but suffers the limitation that it gives the diagram a white background which looks unfortunately with non-white slides. Weirdly I found that if you style the nodes individually `style A fill:#d3d3d3` it works fine. – gfgm Nov 07 '19 at 20:30
  • They are plain html/CSS/js, I'm suspecting the reason why codes don't work in your question is that that the CSS/js of xaringan is interfering with the mermaid CSS/js. but that's pretty difficult to debug I'm afraid. – TC Zhang Nov 08 '19 at 01:20
  • 1
    @gfgm I just found out that if you use widgetframe::frameableWidget(l) instead of widgetframe::frameWidget(l), it keeps the default transparent background. – Sebastien Guyader Dec 04 '19 at 19:35