Create a new page for displaying SSA diagrams

- Add a new stylesheet
- Add a new JS module
- Add mermaid as a dependency
- Add a loading message to be shown while mermaid intialises
- Add a link from the simple smart answer edition view to the diagram visualisation page.

app/assets/javascripts/modules/smart_answer_flowchart.js

@@ -0,0 +1,25 @@
+//= require mermaid/dist/mermaid
+
+(function (Modules) {
+  'use strict'
+
+  Modules.SmartAnswerFlowchart = function () {
+    this.start = function (element) {
+      var diagram = element.find('.flowchart')
+      var flowchartLoading = element.find('.flowchart__loading')
+
+      // eslint-disable-next-line
+      mermaid.initialize(
+        {
+          startOnLoad: true,
+          flowchart: {
+            useMaxWidth: false
+          }
+        }
+      )
+
+      diagram.removeClass('flowchart--hidden')
+      flowchartLoading.addClass('flowchart__loading--hidden')
+    }
+  }
+})(window.GOVUKAdmin.Modules)

app/assets/stylesheets/application.scss

@@ -19,6 +19,7 @@
 // Pages
 @import "downtime";
 @import "smart_answer_builder";
+@import "smart_answer_flowchart";
 
 // GOVUK Design System
 @import "govuk_publishing_components/all_components";

app/assets/stylesheets/smart_answer_flowchart.scss

@@ -0,0 +1,14 @@
+.smart-answer-flowchart {
+  .mermaid {
+    background-color: #ffffff;
+  }
+
+  .flowchart--hidden,
+  .flowchart__loading--hidden {
+    display: none;
+  }
+
+  pre {
+    word-break: normal;
+  }
+}

app/controllers/editions_controller.rb

@@ -235,6 +235,13 @@ def process_unpublish
     end
   end
 
+  def diagram
+    # [MT] TODO: What's the best way to handle requests for a diagram for a non-simple smart answer?
+    if @resource.format != "SimpleSmartAnswer"
+      render plain: "404 Not Found", status: :not_found
+    end
+  end
+
 protected
 
   def permitted_params(subtype: nil)

config/routes.rb

@@ -25,6 +25,7 @@
       get "tagging", to: "editions#linking"
       get "related_external_links", to: "editions#linking"
       get "unpublish"
+      get "diagram"
       post "duplicate"
       post "update_tagging"
       post "process_unpublish"

package.json

@@ -46,6 +46,7 @@
     "stylelint-config-gds": "^1.1.0"
   },
   "dependencies": {
+    "mermaid": "10.5.1",
     "paste-html-to-govspeak": "^0.4.0"
   },
   "resolutions": {