Static graphs with mermaid.js

[wlandau]

Prework

• I understand and agree to the code of conduct and the contributing guidelines.
• I have already submitted a discussion topic or issue to discuss my idea with the maintainer.

Related GitHub issues and pull requests

• Ref: mermaid DAG #775

Summary

This PR implements tar_mermaid() to produce static graphs with mermaid.js. Example:

graph LR
  subgraph Legend
    outdated([Outdated]):::outdated --- stem([Stem]):::none
    stem([Stem]):::none --- pattern[Pattern]:::none
  end
  subgraph Graph
    data0([data0]):::outdated --> map1[map1]:::outdated
    data1([data1]):::outdated --> map1[map1]:::outdated
    data1([data1]):::outdated --> map2[map2]:::outdated
    data2([data2]):::outdated --> map2[map2]:::outdated
    data2([data2]):::outdated --> map3[map3]:::outdated
    data2([data2]):::outdated --> map4[map4]:::outdated
    map1[map1]:::outdated --> map4[map4]:::outdated
    map1[map1]:::outdated --> map5[map5]:::outdated
    map1[map1]:::outdated --> map5[map5]:::outdated
    map1[map1]:::outdated --> map6[map6]:::outdated
    map2[map2]:::outdated --> map6[map6]:::outdated
  end
  classDef outdated stroke:#000000,color:#000000,fill:#78B7C5;
  classDef none stroke:#000000,color:#000000,fill:#94a4ac;
  linkStyle 0 stroke-width:0px;
  linkStyle 1 stroke-width:0px;

Loading

You can generate the mermaid.js source of such a graph like this:

library(targets)
tar_script({
  list(
    tar_target(name = "data0", command = c(1L + 1L),),
    tar_target(name = "data1", command = seq_len(3L)),
    tar_target(name = "data2", command = seq_len(3L) + 3L),
    tar_target(name = "map1", command = data1 + sum(data0), pattern = map(data1)),
    tar_target(name = "map2", command = data1 + data2, pattern = map(data1, data2)),
    tar_target(name = "map3", command = map1 + 1L, pattern = map(map1)),
    tar_target( name = "map4", command = map1 + map2, pattern = map(map1, map2)),
    tar_target( name = "map5", command = map1 + data2, pattern = map(map1, data2)),
    tar_target(name = "map6", command = sum(map1) + sum(data2), pattern = map(data2))
  )
})

tar_mermaid()
#>  [1] "graph LR"                                                      
#>  [2] "  subgraph Legend"                                             
#>  [3] "    outdated([Outdated]):::outdated --- stem([Stem]):::none"   
#>  [4] "    stem([Stem]):::none --- pattern[Pattern]:::none"           
#>  [5] "  end"                                                         
#>  [6] "  subgraph Graph"                                              
#>  [7] "    data0([data0]):::outdated --> map1[map1]:::outdated"       
#>  [8] "    data1([data1]):::outdated --> map1[map1]:::outdated"       
#>  [9] "    data1([data1]):::outdated --> map2[map2]:::outdated"       
#> [10] "    data2([data2]):::outdated --> map2[map2]:::outdated"       
#> [11] "    data2([data2]):::outdated --> map3[map3]:::outdated"       
#> [12] "    data2([data2]):::outdated --> map4[map4]:::outdated"       
#> [13] "    map1[map1]:::outdated --> map4[map4]:::outdated"           
#> [14] "    map1[map1]:::outdated --> map5[map5]:::outdated"           
#> [15] "    map1[map1]:::outdated --> map5[map5]:::outdated"           
#> [16] "    map1[map1]:::outdated --> map6[map6]:::outdated"           
#> [17] "    map2[map2]:::outdated --> map6[map6]:::outdated"           
#> [18] "  end"                                                         
#> [19] "  classDef outdated stroke:#000000,color:#000000,fill:#78B7C5;"
#> [20] "  classDef none stroke:#000000,color:#000000,fill:#94a4ac;"    
#> [21] "  linkStyle 0 stroke-width:0px;"                               
#> [22] "  linkStyle 1 stroke-width:0px;"

^{Created on 2022-03-11 by the reprex package (v2.0.1)}

You can visualize the lines above using GitHub-flavored markdown, or if you follow the workaround from rich-iannone/DiagrammeR#421 (comment), you can run DiagrammeR::mermaid(paste(tar_mermaid(), collapse = "\n)).

Embedding mermaid graphs in GitHub markdown documents is straightforward. This Rmd report:

---
output: github_document
---

```{r, results = "asis", echo = FALSE}
library(targets)
tar_script({
  list(
    tar_target(name = "data0", command = c(1L + 1L),),
    tar_target(name = "data1", command = seq_len(3L)),
    tar_target(name = "data2", command = seq_len(3L) + 3L),
    tar_target(name = "map1", command = data1 + sum(data0), pattern = map(data1)),
    tar_target(name = "map2", command = data1 + data2, pattern = map(data1, data2)),
    tar_target(name = "map3", command = map1 + 1L, pattern = map(map1)),
    tar_target( name = "map4", command = map1 + map2, pattern = map(map1, map2)),
    tar_target( name = "map5", command = map1 + data2, pattern = map(map1, data2)),
    tar_target(name = "map6", command = sum(map1) + sum(data2), pattern = map(data2))
  )
})
cat(c("```mermaid", tar_mermaid(), "```"), sep = "\n")
```

which renders to the following Markdown:

``` mermaid
graph LR
  subgraph Legend
    outdated([Outdated]):::outdated --- stem([Stem]):::none
    stem([Stem]):::none --- pattern[Pattern]:::none
  end
  subgraph Graph
    data0([data0]):::outdated --> map1[map1]:::outdated
    data1([data1]):::outdated --> map1[map1]:::outdated
    data1([data1]):::outdated --> map2[map2]:::outdated
    data2([data2]):::outdated --> map2[map2]:::outdated
    data2([data2]):::outdated --> map3[map3]:::outdated
    data2([data2]):::outdated --> map4[map4]:::outdated
    map1[map1]:::outdated --> map4[map4]:::outdated
    map1[map1]:::outdated --> map5[map5]:::outdated
    map1[map1]:::outdated --> map5[map5]:::outdated
    map1[map1]:::outdated --> map6[map6]:::outdated
    map2[map2]:::outdated --> map6[map6]:::outdated
  end
  classDef outdated stroke:#000000,color:#000000,fill:#78B7C5;
  classDef none stroke:#000000,color:#000000,fill:#94a4ac;
  linkStyle 0 stroke-width:0px;
  linkStyle 1 stroke-width:0px;
```

The above mermaid code chunk renders the graph from the top when included in a GitHub-flavored Markdown document.

cc @yonicd

[wlandau]

Unfortunately I found serious bugs in the initial rollout. Should be fixed in 8a4621c, but since I submitted targets to CRAN before the patch, it may take another month to go to another release.