adding mermaidjs shortcode with example

content/en/docs/test.md

@@ -1,6 +1,7 @@
 ---
 title: Docs smoke test page
 main_menu: false
+mermaid: true
 ---
 
 This page serves two purposes:
@@ -295,6 +296,60 @@ tables, use HTML instead.
 </tbody>
 </table>
 
+## Visualizations with Mermaid
+
+Add `mermaid: true` to the [front matter](https://gohugo.io/content-management/front-matter/) of any page to enable [Mermaid JS](https://mermaidjs.github.io) visualizations. The Mermaid JS version is specified in [/layouts/partials/head.html](https://github.com/kubernetes/website/blob/master/layouts/partials/head.html)
+
+```
+{{</* mermaid */>}}
+graph TD;
+  A-->B;
+  A-->C;
+  B-->D;
+  C-->D;
+{{</*/ mermaid */>}}
+```
+
+Produces: 
+
+{{< mermaid >}}
+graph TD;
+  A-->B;
+  A-->C;
+  B-->D;
+  C-->D;
+{{</ mermaid >}}
+
+```
+{{</* mermaid */>}}
+sequenceDiagram
+    Alice ->> Bob: Hello Bob, how are you?
+    Bob-->>John: How about you John?
+    Bob--x Alice: I am good thanks!
+    Bob-x John: I am good thanks!
+    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+    Bob-->Alice: Checking with John...
+    Alice->John: Yes... John, how are you?
+{{</*/ mermaid */>}}
+```
+
+Produces: 
+
+{{< mermaid >}}
+sequenceDiagram
+    Alice ->> Bob: Hello Bob, how are you?
+    Bob-->>John: How about you John?
+    Bob--x Alice: I am good thanks!
+    Bob-x John: I am good thanks!
+    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+    Bob-->Alice: Checking with John...
+    Alice->John: Yes... John, how are you?
+{{</ mermaid >}}
+
+<br>More [examples](https://mermaid-js.github.io/mermaid/#/examples) from the offical docs.
+
 ## Sidebars and Admonitions
 
 Sidebars and admonitions provide ways to add visual importance to text. Use

layouts/partials/head.html

@@ -48,6 +48,11 @@
 <script src="{{ "js/bootstrap-4.3.1.min.js" | relURL }}"></script>
 <script src="{{ "js/sweetalert-2.1.2.min.js" | relURL }}"></script>
 
+{{ if eq .Params.mermaid true }}
+<!-- Copied from https://unpkg.com/mermaid@8.5.0/dist/mermaid.min.js -->
+<script async src="{{ "js/mermaid.min.js" | relURL }}"></script>
+{{ end }}
+
 <script src="{{ "js/script.js" | relURL }}"></script>
 <script src="{{ "js/custom-jekyll/tags.js" | relURL }}"></script>
 {{ with .Params.js }}{{ range (split . ",") }}<script src="{{ (trim . " ") | relURL }}"></script><!-- custom js added -->

layouts/shortcodes/mermaid.html

@@ -0,0 +1,10 @@
+<div class="mermaid">
+    {{.Inner}}
+</div>
+<!-- Hide content and error if JS is disabled. -->
+<noscript>
+    <style type="text/css">
+    .mermaid { display:none; }
+    </style>
+    <h4>[JavaScript must be <a href="https://www.enable-javascript.com/">enabled</a> to view content]</h4>
+</noscript>