Combining netword3D and mermaid in Rmarkdown messes up rendering

Question

I would like to include two htmlwidgets in the same Rmarkdown document - a mermaid flowchart from the DiagrammeR package and a network3D graph. If I include both in my document then none of them renders but if I only include one of them then it will be rendered.

Here's a minimal example in Rmarkdown that shows the problem

---
title: "Untitled"
author: "Me"
output: html_document
---

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

## The grViz always works

```{r dia1, echo=FALSE}
library(DiagrammeR)
grViz("
  digraph {
    layout = twopi
    A -> {B C D}
  }")
```

# From here onwards I can only include one of the two graphs 

```{r}
mermaid("
graph LR
    A-->B
")
```

# Plot

```{r}
library(networkD3)
Source <- c("A", "A", "A", "A", "B", "B", "C", "C", "D")
Target <- c("B", "C", "D", "J", "E", "F", "G", "H", "I")
NetworkData <- data.frame(Source, Target)

# Create graph
simpleNetwork(NetworkData)
```

If I add multiple DiagrammeR graphs based on grViz then all is fine and dandy. Also if I leave out the mermaid plot then I'll see the remaining two. Are they not supposed to play together nicely? I've tried to swap the ordering of the library calls to no avail.

Answer 1

networkD3 was updated to D3v4 in version 0.3 in. Feb. 2017, which is not compatible with v3 versions of D3, which is what DiagrammeR appears to use. htmlwidgets, which is the underlying package that drives networkD3 and DiagrammeR, only uses the most recent version of a dependency, so htmlwidgets that use conflicting versions of the same library can not both work. Check here for a starting point of discussion about this problem.

You have a few possible options, though none of them are great...

1. revert networkD3 to a version < 0.3 so that it also uses D3v3

2. lobby for the DiagrammeR developers to upgrade to D3v4

3. lobby for the htmlwidgets` developers to come up with a robust way of dealing with conflicting JavaScript dependencies