DiagrammeR setting opacity to low

[MyKo101]

I've been trying to use DiagrammeR::mermaid to render a flowchart in my RMarkdown document. However, when I knit the .Rmd, most of the rendered document is faded out.

MWE:

Output:

If I get rid of the header (i.e. drop the # in the This is a Test line), then it renders fine.

After investigating, I found that the header of the rendered HTML file contains the following lines (between a <style> and </style> command):

.mermaid-main-font { font-family: "trebuchet ms", verdana, arial; font-family: var(--mermaid-font-family); } .section { stroke: none; opacity: 0.2; }

This is setting the class "section" to have opacity 0.2, and unfortunately the entire document that gets rendered inherits this. I'm not sure where or why this piece of CSS gets inserted.

A workaround for this is to insert the code <style> .section{ opacity:1; } </style> somewhere in the .Rmd (or in a separate linked css sheet). This overrides the styling placed in the header by mermaid.

I post this here as an Issue hoping that there might be a possible bug fix added to DiagrammeR in future, or at the very least to provide the workaround as a solution for others who may have this problem.

[MyKo101]

Also, Session Info: R version 3.6.2 (2019-12-12) Platform: x86_64-w64-mingw32/x64 (64-bit) Running under: Windows 10 x64 (build 17763)

Matrix products: default

locale: [1] LC_COLLATE=English_United Kingdom.1252 LC_CTYPE=English_United Kingdom.1252 LC_MONETARY=English_United Kingdom.1252 [4] LC_NUMERIC=C LC_TIME=English_United Kingdom.1252

attached base packages: [1] stats graphics grDevices utils datasets methods base

other attached packages: [1] DiagrammeR_1.0.5

loaded via a namespace (and not attached): [1] htmlwidgets_1.5.1 compiler_3.6.2 magrittr_1.5 visNetwork_2.0.9 htmltools_0.4.0 tools_3.6.2 [7] glue_1.3.1 RColorBrewer_1.1-2 Rcpp_1.0.3 jsonlite_1.6 digest_0.6.24 rlang_0.4.4

[nowlabs]

I am having the same issue and hoping this can be fixed soon. No mermaid diagram will render correctly in Rmarkdown without the above fix by @MyKo101

Thanks.

[fguilhaumon]

I had the same issue. I solved it by not using DiagrammeR to have mermaid diagrammes in html documents. The issue is solved by:

linking the mermaid js library in the head of the html_document:

  html_document:  
    includes:
      in_header: mermaid_head.html

with mermaid_head.html containing the following:

<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

Then, create an html fragment containing the mermaid code, encapsulated in a <div class="mermaid">, and use htmltools::includeHTML to have it back in the html output (you have to do this so as to prevent pandoc from formatting the mermaid code to html) :

diag1_char <- 'graph LR

box1[1. DO 1] ==> box2[2. DO 2]
box2 ==> box3[3. DO 3]'

diag1_html_file <- "diag1.html"
cat(paste0('<div class="mermaid">\n', diag1_char,'\n</div>\n'), file = diag1_html_file)
htmltools::includeHTML("diag1.html")

Like this you can use the very last version of mermaid and will not need for any update from DiagrammeR. Also, the final html pages are much lighter than when using strait DiagrammeR outputs or when "widgetframing" them.

DiagrammeR is very nice and useful, though using it to include mermaid in html pages may be overshooting a bit too much.

[maxheld83]

this is a duplicate of (closed) https://github.com/rich-iannone/DiagrammeR/issues/375.

Using the dev version (not on CRAN yet as of now) will solve this problem:

remotes::install_github(rich-iannone/DiagrammeR)