add screenshot

data-intuitive · Jul 16, 2024 · 9909740 · 9909740
1 parent 00ad3de
commit 9909740
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/README.md b/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)
diff --git a/images/screenshot.png b/images/screenshot.png
diff --git a/index.qmd b/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)