adding mermaidjs shortcode with example

kubernetes · Apr 19, 2020 · a40e521 · a40e521
1 parent 5cd805f
commit a40e521
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 0 deletions.
diff --git a/content/en/docs/test.md b/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/css.html](https://github.com/kubernetes/website/blob/master/layouts/partials/css.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

diff --git a/layouts/partials/css.html b/layouts/partials/css.html
@@ -19,6 +19,9 @@
 <link rel="stylesheet" href="{{ "css/jquery-ui.min.css" | relURL }}">
 <link rel="stylesheet" href="{{ "css/callouts.css" | relURL }}">
 <link rel="stylesheet" href="{{ "css/custom-jekyll/tags.css" | relURL }}">
+{{ if eq .Params.mermaid true }}
+<script async src="https://unpkg.com/mermaid@8.5.0/dist/mermaid.min.js"></script>
+{{ end }}
 {{- if .Params.deprecated }}
 <link rel="stylesheet" href="{{ "css/deprecation-warning.css" | relURL }}">
 {{- end }}

diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
@@ -0,0 +1,3 @@
+<div class="mermaid">
+    {{.Inner}}
+  </div>