r-markdowndiagrammermermaidjourney

Mermaid DiagrammeR journey


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.


Solution

  • 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?