Mermaid DiagrammeR 之旅答案

【问题标题】：Mermaid DiagrammeR journeyMermaid DiagrammeR 之旅
【发布时间】：2021-06-28 15:42:33
【问题描述】：

我该如何解决这个问题。我在 *.rmd 文件中添加了以下代码行：

DiagrammeR::mermaid("
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
")

我使用 R 包 distill 来创建 distill_website。只有旅程图没有生成。我可以在 html 文件中看到一个空格，但没有图表。

【问题讨论】：

标签： r-markdown diagrammer mermaid journey

【解决方案1】：

您可以首先使用 devtools 包从 GitHub 安装 DiagrammeR 的开发版本，然后查看区别：

devtools::install_github("rich-iannone/DiagrammeR")

Journey Diagram 似乎还没有实现。
因此，对于快速（和临时）解决方案（与 distill::distill_article 完美配合），您可以

在没有捆绑器的情况下部署美人鱼，可以插入带有script标签绝对地址和mermaidAPI 调用 HTML，如下所示：

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

```{r diagram-mermaid, echo = FALSE}
DiagrammeR::mermaid(diagram = '
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
', height = '100%', width = '100%')
```

这样做将命令美人鱼解析器寻找<div> 带有class="mermaid" 的标签。从这些标签美人鱼会尝试阅读图表/图表定义并将它们呈现为 svg 图表。

这对distill::distill_website 有任何帮助吗？

【讨论】：

你好 Radovan，是的，它正在工作！谢谢你的帮助。 distill_website 看起来很棒。塞巴斯蒂安
很高兴我能帮上忙。