diff --git a/content/en/docs/test.md b/content/en/docs/test.md
index b02557f52b..848decff35 100644
--- 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.
+## 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
long time, so long
that the text does
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
long time, so long
that the text does
not fit on a row.
+
+ Bob-->Alice: Checking with John...
+ Alice->John: Yes... John, how are you?
+{{ mermaid >}}
+
+
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/head.html b/layouts/partials/head.html
index 16b09cd103..62696960ca 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -48,6 +48,11 @@
+{{ if eq .Params.mermaid true }}
+
+
+{{ end }}
+
{{ with .Params.js }}{{ range (split . ",") }}
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000000..ff20843db3
--- /dev/null
+++ b/layouts/shortcodes/mermaid.html
@@ -0,0 +1,10 @@
+
=0;r--){for(var c=e.words[r],f=s-1;f>=0;f--){var l=c>>f&1;i!==n[0]&&(i=this.sqr(i)),0!==l||0!==a?(a<<=1,a|=l,(4===++u||0===r&&0===f)&&(i=this.mul(i,n[a]),u=0,a=0)):u=0}s=26}return i},x.prototype.convertTo=function(t){var e=t.umod(this.m);return e===t?e.clone():e},x.prototype.convertFrom=function(t){var e=t.clone();return e.red=null,e},o.mont=function(t){return new k(t)},i(k,x),k.prototype.convertTo=function(t){return this.imod(t.ushln(this.shift))},k.prototype.convertFrom=function(t){var e=this.imod(t.mul(this.rinv));return e.red=null,e},k.prototype.imul=function(t,e){if(t.isZero()||e.isZero())return t.words[0]=0,t.length=1,t;var n=t.imul(e),r=n.maskn(this.shift).mul(this.minv).imaskn(this.shift).mul(this.m),i=n.isub(r).iushrn(this.shift),o=i;return i.cmp(this.m)>=0?o=i.isub(this.m):i.cmpn(0)<0&&(o=i.iadd(this.m)),o._forceRed(this)},k.prototype.mul=function(t,e){if(t.isZero()||e.isZero())return new o(0)._forceRed(this);var n=t.mul(e),r=n.maskn(this.shift).mul(this.minv).imaskn(this.shift).mul(this.m),i=n.isub(r).iushrn(this.shift),a=i;return i.cmp(this.m)>=0?a=i.isub(this.m):i.cmpn(0)<0&&(a=i.iadd(this.m)),a._forceRed(this)},k.prototype.invm=function(t){return this.imod(t._invmp(this.m).mul(this.r2))._forceRed(this)}}(t,this)}).call(this,n(14)(t))},function(t,e,n){"use strict";var r=n(66),i=n(113),o=function(t){return Object(i.a)(Object(r.a)(t).call(document.documentElement))},a=0;function u(){return new s}function s(){this._="@"+(++a).toString(36)}s.prototype=u.prototype={constructor:s,get:function(t){for(var e=this._;!(e in t);)if(!(t=t.parentNode))return;return t[e]},set:function(t,e){return t[this._]=e},remove:function(t){return this._ in t&&delete t[this._]},toString:function(){return this._}};var c=n(203),f=n(285),l=n(105),h=n(68),d=n(67),p=n(49),g=function(t){return"string"==typeof t?new p.a([document.querySelectorAll(t)],[document.documentElement]):new p.a([null==t?[]:t],p.c)},y=n(106),b=n(204),v=n(205),m=n(284),_=n(112),w=function(t,e){null==e&&(e=Object(_.a)().touches);for(var n=0,r=e?e.length:0,i=new Array(r);n >>1;c[g] c)break;y.push(h)}}else for(;d =1;--l)if(!((h=f*l)i&&(r=i):r=i;var o=e.length;if(o%2!=0)throw new TypeError("Invalid hex string");r>o/2&&(r=o/2);for(var a=0;a=this._delta8){var n=(t=this.pending).length%this._delta8;this.pending=t.slice(t.length-n,t.length),0===this.pending.length&&(this.pending=null),t=r.join32(t,0,t.length-n,this.endian);for(var i=0;iit&&(it=o):c^(u*ot<(s=(s+360)%360-180)&&sit&&(it=e)),c?t1e-12&&L>1e-12?U>1e-12?(D=k(W,$,Z,X,v,-U,O),C=k(G,H,J,Q,v,-U,O),M.lineTo(D.cx+D.x01,D.cy+D.y01),U
=l;--h)c.point(b[h],v[h]);c.lineEnd(),c.areaEnd()}y&&(b[f]=+t(d,f,i),v[f]=+n(d,f,i),c.point(e?+e(d,f,i):b[f],o?+o(d,f,i):v[f]))}if(p)return c=null,p+""||null}function l(){return O().defined(a).curve(s).context(u)}return f.x=function(n){return arguments.length?(t="function"==typeof n?n:i(+n),e=null,f):t},f.x0=function(e){return arguments.length?(t="function"==typeof e?e:i(+e),f):t},f.x1=function(t){return arguments.length?(e=null==t?null:"function"==typeof t?t:i(+t),f):e},f.y=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),o=null,f):n},f.y0=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),f):n},f.y1=function(t){return arguments.length?(o=null==t?null:"function"==typeof t?t:i(+t),f):o},f.lineX0=f.lineY0=function(){return l().x(t).y(n)},f.lineY1=function(){return l().x(t).y(o)},f.lineX1=function(){return l().x(e).y(n)},f.defined=function(t){return arguments.length?(a="function"==typeof t?t:i(!!t),f):a},f.curve=function(t){return arguments.length?(s=t,null!=u&&(c=s(u)),f):s},f.context=function(t){return arguments.length?(null==t?u=c=null:c=s(u=t),f):u},f},C=function(t,e){return e
h&&(h=u),y=f*f*g,(d=Math.max(h/y,y/l))>p){f-=u;break}p=d}b.push(a={value:f,dice:sr&&(e=n,n=r,r=e),function(t){return Math.max(n,Math.min(r,t))}}function k(t,e,n){var r=t[0],i=t[1],o=e[0],a=e[1];return i0?(s=Math.floor(s/i)*i,c=Math.ceil(c/i)*i,i=Object(r.z)(s,c,n)):i<0&&(s=Math.ceil(s*i)/i,c=Math.floor(c*i)/i,i=Object(r.z)(s,c,n)),i>0?(o[a]=Math.floor(s/i)*i,o[u]=Math.ceil(c/i)*i,e(o)):i<0&&(o[a]=Math.ceil(s*i)/i,o[u]=Math.floor(c*i)/i,e(o)),t},t}function j(){var t=M(_,_);return t.copy=function(){return A(t,j())},i.apply(t,arguments),R(t)}function L(t){var e;function n(t){return isNaN(t=+t)?e:t}return n.invert=n,n.domain=n.range=function(e){return arguments.length?(t=s.call(e,v),n):t.slice()},n.unknown=function(t){return arguments.length?(e=t,n):e},n.copy=function(){return L(t).unknown(e)},t=arguments.length?s.call(t,v):[0,1],R(n)}var B=function(t,e){var n,r=0,i=(t=t.slice()).length-1,o=t[r],a=t[i];return ac)break;y.push(h)}}else y=Object(r.B)(d,p,Math.min(p-d,g)).map(n);return i?y.reverse():y},i.tickFormat=function(t,r){if(null==r&&(r=10===a?".0e":","),"function"!=typeof r&&(r=Object(D.b)(r)),t===1/0)return r;null==t&&(t=10);var o=Math.max(1,a*t/i.ticks().length);return function(t){var i=t/n(Math.round(e(t)));return i*a