美人鱼图在 Rmarkdown xaringan 演示文稿中未正确呈现

Question

我正在尝试在使用 xaringan 渲染的 Rmarkdown html 演示文稿中制作一些简单的流程图。我正在使用DiagrammeR 包绘制美人鱼图。但是，尽管图表在 Rstudio 查看器中正确显示，但样式不会出现在演示输出中。

例如

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

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

在控制台运行时按预期生成一个橙色节点和一个灰色节点。然而，

---
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;
")
```

以默认美人鱼颜色生成流程图，忽略样式。

有人知道解决方法吗？我也愿意接受其他软件包的建议以绘制简单的树形图。

Answer 1

美人鱼创建一个 htmlwidget 作为输出。您应该将其包装到 <iframe> 部分中。 widgetframe 包可以为您做到这一点，其他基于 htmlwidget 的应用程序，如 DT、leaflet、Dygraph 可以通过此方法嵌入到 xaringan 中。

---
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)
```