Make mermaid diagram scrollable width-wise

app/controllers/mermaid_controller.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
 
 class MermaidController < ApplicationController
+
 end

app/views/mermaid/index.html.erb

@@ -1,5 +1,5 @@
 <h1> Driving in Great Britain on a non-GB licence</h1>
-<pre class="mermaid">
+<pre class="mermaid flowchart">
   %%{
   init: {
     'theme': 'base',
@@ -126,8 +126,11 @@
   .container{
       width: 100% !important;
   }
+  .mermaid {
+      background-color: white;
+  }
 </style>
 <script type="module">
     import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-    mermaid.initialize({ startOnLoad: true});
+    mermaid.initialize({ startOnLoad: true, flowchart: { useMaxWidth: false }});
 </script>

app/views/mermaid/indexnew.html.erb

@@ -0,0 +1,30 @@
+<h1> Driving in Great Britain on a non-GB licence</h1>
+<pre class="mermaid">
+  %%{
+  init: {
+    'theme': 'base',
+    'themeVariables': {
+      'primaryColor': '#fff',
+      'primaryTextColor': '#0B0C0C',
+      'primaryBorderColor': '#0B0C0C',
+      'secondaryColor': '#006100',
+      'tertiaryColor': '#fff'
+    }
+  }
+}%%
+        graph TD
+          A[Start] --- B[Q1 Are you:]
+          B --> C[a resident of Great Britain?]
+          B --> D[a visitor of Great Britain?]
+          B --> E[a foreign student studying in Great Britain?]
+          E --> F
+          F[Q2 What kind of driving licence do you have?]
+
+
+        style A fill:#006100,color:#ffffff
+    </pre>
+<script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({ startOnLoad: true});
+</script>
+