Add mermaid support (#857)

Closes #825


Co-authored-by: Matt Wang <matt@matthewwang.me>

docs/configuration.md

@@ -59,6 +59,31 @@ search:
   button: false
 ```
 
+## Mermaid Diagrams
+See [Code]({{ site.baseurl }}{% link docs/ui-components/code.md %}#mermaid-diagram-code-blocks) for more information.
+
+```yaml
+# Enable or disable support for mermaid diagrams (https://mermaid-js.github.io/mermaid/)
+# Supports true or false (default)
+mermaid_enabled: false
+mermaid:
+  # Version of mermaid library
+  # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/
+  version: "9.1.3"
+  # Configured theme of mermaid diagrams
+  # Pick an avaiable theme from https://mermaid-js.github.io/mermaid/#/theming
+  theme: "default"
+  # Additional configuration available matching pattern as defined in https://mermaid-js.github.io/mermaid/#/./Setup.
+  # For example,
+  # logLevel: 'fatal',
+  # sequence:
+  #   diagramMarginX: 50
+  #   actorMargin: 50
+  # gantt:
+  #   barGap: 4
+  #   topPadding: 50
+```
+
 ## Aux links
 
 ```yaml

docs/ui-components/code.md

@@ -86,3 +86,21 @@ To demonstrate front end code, sometimes it's useful to show a rendered example
 [Link button](http://example.com/){: .btn }
 ```
 {% endhighlight %}
+
+---
+
+## Mermaid diagram code blocks
+
+[Mermaid](https://mermaid-js.github.io/mermaid/) allows you to add diagrams and visualizations using Markdown code blocks. You can turn on support for mermaid by adding `mermaid_enabled: true` to your \_config.yml.
+
+The markdown for a simple flowchart example might look like the following:
+
+{% highlight markdown %}
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+{% endhighlight %}