From 547b16c7e46803aa834f77aecf391380dfcfff8c Mon Sep 17 00:00:00 2001
From: Mark Crossfield <Mark.Crossfield@autotrader.co.uk>
Date: Mon, 5 Sep 2022 11:11:52 +0100
Subject: [PATCH] Add info about using mermaid.js diagrams to documentation

---
 README.md                         | 34 +++++++++++++++++++++++++++++++
 _posts/0000-01-09-svg-diagrams.md |  4 ++++
 2 files changed, 38 insertions(+)

diff --git a/README.md b/README.md
index 4cd9275..a048f09 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,7 @@ You can also further customize the presentation:
 
 - `extra_css`: Additional CSS files added after the reveal [theme][]
 - `highlight_style_sheet`: CSS theme for highlight.js [reveal.js/lib/css/zenburn.css](reveal.js/lib/css/zenburn.css)
+- `mermaid_diagrams`: Feature toggle (defaults to `false`) for [mermaid.js](https://mermaid-js.github.io/) diagrams
 
 ### Specifying reveal options and dependencies
 
@@ -227,3 +228,36 @@ This is only displayed in the speaker notes.
 [dependencies]: https://github.com/hakimel/reveal.js#dependencies
 [posts]: https://jekyllrb.com/docs/posts/#creating-posts
 [theme]: https://github.com/hakimel/reveal.js#theming
+
+### SVG Diagrams
+
+You can use [mermaid-js](https://mermaid-js.github.io/mermaid/) to create SVG diagrams.
+
+Once you’ve enabled the feature by setting `mermaid_diagrams` to `true` in `_config.yml`, code like this:
+
+```markdown
+<mermaid>
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+    D-->E
+</mermaid>
+```
+
+should render like this:
+
+```mermaid
+<mermaid>
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+    D-->E
+</mermaid>
+```
+
+You can tweak the height of the diagram by following the closing tag with an [element attribute](https://revealjs.com/markdown/#element-attributes): 
+`<!-- .element: style="height: 400px;" -->`.
\ No newline at end of file
diff --git a/_posts/0000-01-09-svg-diagrams.md b/_posts/0000-01-09-svg-diagrams.md
index bd8cc8d..a86da6b 100644
--- a/_posts/0000-01-09-svg-diagrams.md
+++ b/_posts/0000-01-09-svg-diagrams.md
@@ -4,6 +4,10 @@
 
 You can use [mermaid-js](https://mermaid-js.github.io/mermaid/) to create SVG diagrams.
 
+(enable the feature by setting `mermaid_diagrams` to `true` in `_config.yml`)
+
+<!-- .element: style="font-size: 50%;" -->
+
 <mermaid>
 graph TD;
     A-->B;