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

Posted 2023-02-19

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

【英文标题】：Mermaid diagrams not rendering correctly in Rmarkdown xaringan presentations

【发布时间】：2020-02-29 12:18:36

【问题描述】：

我正在尝试在使用 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;
")
```

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

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

【参考方案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)
```

【讨论】：

谢谢，这是一个很好的答案，但受到限制，它为图表提供了白色背景，不幸的是，非白色幻灯片看起来很不幸。奇怪的是，我发现如果您单独为节点设置样式 style A fill:#d3d3d3 它可以正常工作。

它们是纯 html/CSS/js，我怀疑代码在您的问题中不起作用的原因是 xaringan 的 CSS/js 干扰了美人鱼 CSS/js。但这恐怕很难调试。

@gfgm 我刚刚发现如果你使用 widgetframe::frameableWidget(l) 而不是 widgetframe::frameWidget(l)，它会保持默认的透明背景。