static image of targets workflow, programatically

Question

I'm trying to embed a static image of a targets workflow in an rmarkdown document. I tried to do this by using tar_mermaid, defining a target that writes the workflow in mermaid format mm <- tar_mermaid(); writeLines(mm, "target_mermaid.js") but the help for tar_mermaid says

You can visualize the graph by copying the text into a public online mermaid.js editor or a mermaid GitHub code chunk

I am looking for a programmatic way to either (1) embed the Javascript output in an (R)markdown file, or (2) render it (as SVG, PNG, whatever).

I thought as a shortcut that I could cut-and-paste into a markdown code chunk delimited by ```mermaid, or use cat(readLines("target_mermaid.js"), sep = " ") in a chunk with results = "asis" but I guess that only works in Github markdown (I'm using Pandoc to render to HTML) ... ?

The visNetwork package has a visSave() function which can save to HTML (not quite what I wanted but better than what I've managed so far), and a visExport() function (which saves to PNG etc. but only by clicking in a web browser). Furthermore, targets wraps the visNetwork functions in a way that is (so far) hard for me to unravel (i.e., it doesn't return a visNetwork object, but automatically returns a widget ...)

For the time being I can go to https://mermaid.live, paste in the mermaid code, and export the PNG manually but I really want to do it programmatically (i.e. as part of my workflow, without manual steps involved).

user_13321647 · Answer

I am not quite sure about the answer. But I have an idea. And I will delete if it is not adequate:

If you want execute mermaid code to get for example an html output then you could do this with quarto. I am not sure if this is possible with rmarkdown:

See https://quarto.org/docs/authoring/diagrams.htmlS

---
title: "Untitled"
format: html
editor: visual
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see .

## Running Code

    ```{mermaid}
    flowchart LR
      A[Hard edge] --> B(Round edge)
      B --> C{Decision}
      C --> D[Result one]
      C --> E[Result two]
    ```

output:

user_190277 · Answer

@landau's suggestion to look here almost works, if I'm willing to use Quarto instead of Rmarkdown (GH Markdown is not an option). The cat() trick was the main thing I was missing. The .qmd file below gets most of the way there but has the following (cosmetic) issues:

I don't know how to suppress the tidyverse startup messages, because targets is running the visualization code in a separate R instance that the user has (AFAIK) little control of;
the default size of the graph is ugly.

Any further advice would be welcome ...

---
title: "targets/quarto/mermaid example"
---

```{r}
suppressPackageStartupMessages(library("tidyverse"))
library("targets")
```

```{r, results = "asis", echo = FALSE}
cat(c("```{mermaid}", tar_mermaid(), "```"), sep = "
")
```

Beginning of document:

Zooming out:

static image of targets workflow, programatically

2 Answers