Apply Mermaid config settings fails

[aghaynes]

Hi!

It's possible to modify e.g. distance between nodes in Mermaid flowcharts via a config at the beginning of the graph definition (since v8.6.0), e.g.

graph TD
%%{init:{'flowchart':{'nodeSpacing': 20, 'rankSpacing': 30}}}%%
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]

mermaid-js/mermaid#1312

On the live editor:
https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNpFkMFqwzAMhl9FGEI2aKCwy8hhsCZdL4UN2lvcg0iU2jSWjeNQSuJ3nzu29SZ9-n6BNIvWdiRKcfboFBxryVk2a9ahnPN-sNdWoQ95ajh5B4et5nNewut6BblHvjzQyzrGmGWS35tKeT0Gg-MJiuJt2VEAY5luC2yedhZGZZ1LoWfJm7sA1by_KwRBab5EydVP7pNpgbrZowvWnf7o8WoX2Db6S6WVD6o8Jfuj6bHssWjRQ4U-jcVKGPIGdZeunCUDSBEUGZKiTGVHPU5DkEJyTCpOwR5u3Ioy-IlWYnIdBqo1pv8YkTYP4z_ddjpY_wvjN6uqb-Y

This just produces syntax error in Quarto... I guess the %% is causing the line to be treated as a comment...?
Is it possible to modify e.g. nodeSpacing some other way in Quarto?

Thanks!

[cscheid]

I can't reproduce on the latest version of quarto:

[aghaynes]

OK, thanks... would have to use this then I suppose... https://rich-iannone.github.io/DiagrammeR/mermaid.html

[harrelfe]

Here is an approach to inserting R calculations into mermaid charts: https://hbiostat.org/rflow/doverview.html#sec-doverview-filter

[aghaynes]

Thanks Frank, but you're getting syntax errors too... ;)

[LJFRIESE]

For anyone in the future searching for embedding r objects into mermaid diagrams:

You can use makemermaid from @harrelfe's package: https://hbiostat.org/r/qreport/. This is probably pretty robust, I've not used it.

Or, you can read the mermaid syntax into R as a string, use interpolation (like glue::glue()), then knit. There's more than one (better) way, but here's an example. The example also includes how to use the config syntax described in the mermaid docs. The quarto docs touch on this, but don't have much detail.

File 1 (Parent):

---
title: "mermaid_example"
format: html
---
```{r, results='asis', echo=FALSE}
# results='asis' is required to render the child in the parent

# Variables to include
variable1 <- "1000"
variable2 <- "Look ma, interpolated vars in a mermaid!"
src <- knitr::knit_expand(text = glue::glue(paste0(readLines("test__.qmd"),collapse="\n"),
                                            .open="<",
                                            .close=">",
                                            # Pass the variables to glue's environment
                                            .envir=rlang::env(
                                              variable1 = variable1,
                                              variable2 = variable2)
                                            ))
# Render the mermaid diagram
  knitr::knit_child(text = src,
                     options = list(echo=FALSE,
                                    results='asis'),
                     quiet = TRUE,
   ) |> # cat to the parent md
     cat()
`` # Three backticks here... markdown isn't letting me escape them in the code block

File 2 (child)

```{mermaid}
%%| fig-height: 5
%%{
init: {
  "flowchart": {"nodeSpacing": 200, "rankSpacing": 300, "useMaxWidth": "true", "htmlLabels": "true", "curve": 'cardinal'},
  "securityLevel": "loose",
  "themeVariables": { 'primaryColor': '#BB2528',
                      'primaryTextColor': '#fff',
                      'primaryBorderColor': '#7C0000',
                      'lineColor': '#F8B229',
                      'secondaryColor': '#006100',
                      'tertiaryColor': '#fff'},
  "theme": "base",
    "themeCSS": ".extension { fill: white !important; };.divider { display: none; };"
    
}}%%
flowchart
  A[Christmas] -->|<variable1>| B(Go shopping)
  B --> C{<variable2>}
  B --> G[/Another/]
  C ==>|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]
  subgraph section
    C
    D
    E
    F
    G
  end

`` # Three backticks here... markdown isn't letting me escape them in the code block

Output:

[mcanouil]

In markdown to escape backticks you only need to use more.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````