Use svg-toolbelt to give zoom & pan controls to mermaid diagrams

package.json

@@ -5,6 +5,7 @@
   "author": "Government Digital Service",
   "license": "MIT",
   "dependencies": {
-    "mermaid": "^11.9.0"
+    "mermaid": "^11.9.0",
+    "svg-toolbelt": "=0.7.0"
   }
 }

source/javascripts/mermaid-init.js

@@ -1,7 +1,24 @@
 //= require mermaid
+//= require svg-toolbelt.cjs.production.min.js
+
+// If we are rendering a diagram, a code tag is no longer appropriate, so change it to a div
+const mermaidCodeBlocks = document.querySelectorAll('[lang="mermaid"] code')
+mermaidCodeBlocks.forEach((codeNode) => {
+  const replacementDivNode = document.createElement('div')
+  replacementDivNode.innerHTML = codeNode.innerHTML
+  replacementDivNode.className = "mermaid"
+
+  codeNode.replaceWith(replacementDivNode)
+})
 
 mermaid.initialize({ startOnLoad: false });
 mermaid.run({
-    querySelector: '[lang="mermaid"] code',
-});
+  querySelector: '[lang="mermaid"] div',
+  // Large mermaid diagrams render very small indeed in the manual, so use svg-toolbelt
+  // to give zoom & pan controls
+  postRenderCallback: (id) => {
+    const container = document.getElementById(id)
+    new SvgToolbelt.SvgToolbelt(container.closest("div.mermaid"), {}).init()
+  }
+})
 

source/kubernetes/manage-app/control-healthchecks/index.html.md

@@ -108,13 +108,7 @@ again.
 
 ### Probe lifecycle
 
-<details><summary>Mermaidjs diagram source</summary>
-
-SVG generated with mermaid cli:
-
-<code>npx --package=@mermaid-js/mermaid-cli --  mmdc -i mermaid.yaml -o kubernetes-pod-lifecycle.svg -w 760</code>
-
-<pre>
+<pre lang="mermaid">
 <code>
 stateDiagram-v2
   podStarted : Pod Started
@@ -204,8 +198,3 @@ stateDiagram-v2
   terminatePod --> [*]
 </code>
 </pre>
-</details>
-
-![Kubernetes Pod Lifecycle as described above](/images/kubernetes-pod-lifecycle.svg)
-
-</pre>

source/stylesheets/screen.css.scss

@@ -1,4 +1,5 @@
 @import "govuk_tech_docs";
+@import "svg-toolbelt";
 // govuk_publishing_components uses dart-sass, dev docs (through Middleman)
 // does not, fortunately dev docs doesn't import the sass that would break
 // compilation, specifically _search.scss, _step-by-step-nav.scss, _grid-helper.scss

yarn.lock

@@ -893,6 +893,11 @@ stylis@^4.3.6:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.6.tgz#7c7b97191cb4f195f03ecab7d52f7902ed378320"
   integrity sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==
 
+svg-toolbelt@=0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/svg-toolbelt/-/svg-toolbelt-0.7.0.tgz#42cb4a47ac76446cdf975a97516e494e4ed948ad"
+  integrity sha512-EK5IYUc7Tk4H4d5QcJ7C6t9Qu1YAqpKECYABxUf2GAyGyNWKdy/+T5AJ0oKBmsbv3snCi/Zaev6tLQOqoxRJHw==
+
 tinyexec@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.2.tgz#941794e657a85e496577995c6eef66f53f42b3d2"