Improve message shown for Mermaid when JS not enabled

layouts/partials/scripts.html

@@ -3,7 +3,7 @@
 <script src="/js/bootstrap-4.3.1.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
 {{ if .Site.Params.mermaid.enable }}
-<script src="/js//mermaid.min.js" crossorigin="anonymous"></script>
+<script src="/js/mermaid.min.js" crossorigin="anonymous"></script>
 
 {{ end }}
 

layouts/shortcodes/mermaid.html

@@ -1,10 +1,11 @@
+<figure>
 <div class="mermaid">
     {{.Inner}}
 </div>
+</figure>
 <!-- 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>
+  <div class="alert alert-secondary callout" role="alert">
+    <em class="javascript-required">{{ T "javascript_required" | markdownify }}</em>
+  </div>
 </noscript>