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;