update to mermaid v10.2 and quarto 1.5

.github/workflows/quarto_netlify.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Install Quarto
         uses: quarto-dev/quarto-actions/setup@v2
         with:
-          version: 1.3.340
+          version: 1.5.54
           tinytex: true
 
       - name: Render Quarto Project

README.md

@@ -1,3 +1,9 @@
 # mermaid-demos-in-quarto
 
-A quarto rendering of the [Mermaid diagram syntax examples](https://mermaid.js.org/syntax/flowchart.html) for issue [quarto-dev/quarto-cli#416](https://github.com/quarto-dev/quarto-cli/issues/5416). Click on links on the sidebar on the left and compare with the mermaid diagrams rendered on the original site.
+A quarto rendering of the [Mermaid diagram syntax examples](https://mermaid.js.org/syntax/flowchart.html) for issue [quarto-dev/quarto-cli#416](https://github.com/quarto-dev/quarto-cli/issues/5416).
+
+## Usage
+
+I recommend you open this side on the left hand side of your screen and the Mermaid demos on mermaid.js on the right hand side of your screen, and compare whether both sides are rendering diagrams in more-or-less the same way. Example:
+
+![](images/screenshot.png)

_quarto.yml

@@ -2,14 +2,19 @@ project:
   type: website
 
 website:
-  title: "Mermaid syntax demos in Quarto"
+  title: "Mermaid demos in Quarto"
   site-url: https://mermaid-demos-in-quarto.netlify.app
   repo-url: https://github.com/data-intuitive/mermaid-demos-in-quarto
   repo-actions: [edit, issue] 
   navbar:
     left:
-      - href: index.qmd
-        text: Home
+      - text: Mermaid Docs
+        href: https://mermaid.js.org/syntax/flowchart.html
+      - text: quarto-dev/quarto-cli#416
+        href: https://github.com/quarto-dev/quarto-cli/issues/5416
+    right: 
+      - text: Mermaid 10.2.4
+      - text: Quarto 1.5.54
 
   sidebar:
     contents:

_script.R

@@ -1,8 +1,10 @@
+library(dplyr)
+
 # clone mermaid repo but remove on exit
 temp_dir <- tempfile(pattern = "mermaid")
 on.exit(unlink(temp_dir, recursive = TRUE), add = TRUE)
 processx::run("git", c("clone", "[email protected]:mermaid-js/mermaid.git", temp_dir))
-processx::run("git", c("checkout", "v9.3.0"), wd = temp_dir)
+processx::run("git", c("checkout", "v10.2.4"), wd = temp_dir)
 
 # look for syntax files
 syntax_files <- list.files(
@@ -16,11 +18,14 @@ if (!dir.exists("syntax")) dir.create("syntax")
 
 # convert to qmd file
 for (file in syntax_files) {
-  lines <- readr::read_lines(file)
-
-  new_lines <- gsub("```(mermaid-example|mmd|mermaid)", "```{mermaid}", lines)
-  # remove titles in codeblocks
-  new_lines <- gsub("```\\{mermaid\\}\n---\ntitle:[^-]*\n---", "```{mermaid}", paste(new_lines, collapse = "\n"))
+  new_lines <- readr::read_lines(file) %>%
+    paste(collapse = "\n") %>%
+    # fix mermaid blocks
+    gsub("```(mermaid-example|mmd|mermaid)", "```{mermaid}", .) %>%
+    # remove titles in codeblocks
+    gsub("```\\{mermaid\\}\n---\ntitle:[^-]*\n---", "```{mermaid}", .) %>%
+    # fix callout blocks, e.g. from ```warning\n...\n``` to `:::{.callout-warning}\n...\n:::`
+    gsub("```(note|warning|tip|important|caution)\n(.*?)\n```", ":::{.callout-\\1}\n\\2\n:::", .)
 
   dest_file <- paste0("syntax/", gsub("\\.md", ".qmd", basename(file)))
   readr::write_lines(new_lines, dest_file)
@@ -32,3 +37,4 @@ for (file in syntax_files) {
 #   out <- system(paste0("quarto render ", qmd, " --to gfm --output -"), intern = TRUE, ignore.stderr = TRUE)
 #   readr::write_lines(out, dest_file)
 # }
+

index.qmd

@@ -2,4 +2,10 @@
 title: "Home"
 ---
 
-A quarto rendering of the [Mermaid diagram syntax examples](https://mermaid.js.org/syntax/flowchart.html) for issue [quarto-dev/quarto-cli#416](https://github.com/quarto-dev/quarto-cli/issues/5416). Click on links on the sidebar on the left and compare with the mermaid diagrams rendered on the original site.
+A quarto rendering of the [Mermaid diagram syntax examples](https://mermaid.js.org/syntax/flowchart.html) for issue [quarto-dev/quarto-cli#416](https://github.com/quarto-dev/quarto-cli/issues/5416).
+
+## Usage
+
+I recommend you open this side on the left hand side of your screen and the Mermaid demos on mermaid.js on the right hand side of your screen, and compare whether both sides are rendering diagrams in more-or-less the same way. Example:
+
+![](images/screenshot.png)