Mermaid now working

Still needs refactoring to generalise the extension architecture.

project.clj

@@ -36,7 +36,8 @@
   :bower-dependencies [[simplemde "1.11.2"]
                        ;; [vega-embed "3.0.0-beta.19"] vega-embed currently not loaded from Bower because of
                        ;; dependency conflict which will hopefully be resolved soon.
-                       [vega-lite "2.0.0-beta.10"]]
+                       [vega-lite "2.0.0-beta.10"]
+                       [mermaid "6.0.0"]]
   :ring {:handler smeagol.handler/app
          :init    smeagol.handler/init
          :destroy smeagol.handler/destroy}

resources/public/content/Introduction.md

@@ -57,6 +57,33 @@ Note that this visualisation will not be rendered in the GitHub wiki, as it does
 
 ![Example visualisation](https://github.com/simon-brooke/smeagol/blob/develop/resources/public/data/london.png?raw=true)
 
+## Now with embedded graphs
+
+Graphs can now be embedded in a page using the [Mermaid](http://knsv.github.io/mermaid/index.html) graph description language. The graph description should start with a line comprising three back-ticks and then the
+word 'mermaid', and end with a line comprising just three backticks.
+
+Here's an example culled from the Mermaid documentation.
+
+### GANTT Chart
+
+```mermaid
+gantt
+        dateFormat  YYYY-MM-DD
+        title Adding GANTT diagram functionality to mermaid
+        section A section
+        Completed task            :done,    des1, 2014-01-06,2014-01-08
+        Active task               :active,  des2, 2014-01-09, 3d
+        Future task               :         des3, after des2, 5d
+        Future task2               :         des4, after des3, 5d
+        section Critical tasks
+        Completed task in the critical line :crit, done, 2014-01-06,24h
+        Implement parser and jison          :crit, done, after des1, 2d
+        Create tests for parser             :crit, active, 3d
+        Future task in critical line        :crit, 5d
+        Create tests for renderer           :2d
+        Add to mermaid                      :1d
+```
+
 ## Advertisement
 If you like what you see here, I am available for work on open source Clojure projects.
 

resources/templates/wiki.html

@@ -1,18 +1,24 @@
 {% extends "templates/base.html" %}
 
 {% block extra-headers %}
+  <!-- there's at the time of writing (20170731) a problem with the dependencies of the Bower
+       package for vega-embed, so we're currently not installing either it or Vega locally.
+       TODO: fix -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-rc2/vega.js"></script>
-<!-- there's at the time of writing (20170731) a problem with the dependencies of the Bower
-package for vega-embed, so we're currently not installing either it or Vega locally. TODO: fix -->
   {% script "/vendor/vega-lite/build/vega-lite.js" %}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.19/vega-embed.js"></script>
-
   <style media="screen">
     /* Add space between Vega-Embed links  */
     .vega-actions a {
       margin-right: 5px;
     }
   </style>
+
+  <!-- Similarly, mermaid 7.0.3 isn't installing cleanly for me from Bower. I'm really not sure whether
+       the problem is me getting bower wrong, of these libraries not being well packaged.
+       mermaid 6.0.0 does install, so that's what I'm using. -->
+  {% style "vendor/mermaid/dist/mermaid.css" %}
+  {% script "vendor/mermaid/dist/mermaid.js" %}
 {% endblock %}
 
 {% block content %}
@@ -25,4 +31,14 @@ package for vega-embed, so we're currently not installing either it or Vega loca
       {% endif %}
       {{content|safe}}
     </div>
+
+    <script>
+      //<![CDATA[
+      if (document.addEventListener) {
+          document.addEventListener("DOMContentLoaded", function(event) {
+          mermaid.initialize({startOnLoad:true});
+        });
+      }
+      //]]
+    </script>
 {% endblock %}

src/smeagol/formatting.clj

@@ -73,6 +73,12 @@
       (assoc (yaml/parse-string yaml-src) (keyword "$schema") "https://vega.github.io/schema/vega-lite/v2.json"))
     ";\nvega.embed('#vis" index "', vl" index ");\n//]]\n</script>"))
 
+(defn process-mermaid
+  "Lightly mung the mermaid specification."
+  [^String graph-spec ^Integer index]
+  (str "<div class=\"mermaid data-visualisation\">\n"
+       graph-spec
+       "\n</div>"))
 
 (defn process-text
   "Process this `text`, assumed to be markdown potentially containing both local links
@@ -92,6 +98,7 @@
          (md/md-to-html-string
            (cs/join "\n\n" (reverse processed))
            :heading-anchors true)))
+    ;;; TODO: refactor; generalise extension architecture
      (clojure.string/starts-with? (first fragments) "vis")
      (let [kw (keyword (str "visualisation-" index))]
        (process-text
@@ -107,6 +114,21 @@
                index)))
          (rest fragments)
          (cons kw processed)))
+     (clojure.string/starts-with? (first fragments) "mermaid")
+     (let [kw (keyword (str "visualisation-" index))]
+       (process-text
+         (+ index 1)
+         (assoc
+           result
+           :visualisations
+           (assoc
+             (:visualisations result)
+             kw
+             (process-mermaid
+               (subs (first fragments) 7)
+               index)))
+         (rest fragments)
+         (cons kw processed)))
      true
      (process-text (+ index 1) result (rest fragments) (cons (first fragments) processed)))))
 

test/smeagol/test/util.clj

@@ -1,7 +1,7 @@
 (ns smeagol.test.util
   (:use clojure.test
         ring.mock.request
-        smeagol.util))
+        smeagol.formatting))
 
 (deftest test-local-links
   (testing "Rewriting of local links"