Mermaid DiagrammeR journey

Question

How can I solve this problem. I added the following line of code in my *.rmd file:

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

I use the R package distill to knit a distill_website. Only the journey diagramm is not generated. I can see in the html-file a white space but no diagramm.

Answer 1

You can start by installing the development version of DiagrammeR from GitHub using the devtools package and see the difference:

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

It's seems that Journey Diagram is yet to be implemented.
So, for quick (and temporary) solution (works perfectly with distill::distill_article) you may

deploy mermaid without a bundler, one can insert a script tag with an absolute address and a mermaidAPI call into the HTML like so:

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

Doing so will command the mermaid parser to look for the <div> tags with class="mermaid". From these tags mermaid will try to read the diagram/chart definitons and render them into svg charts.

Does this help in any way with distill::distill_website?