Fixed Mermaid!

_config.yml

@@ -80,7 +80,7 @@ remarkConfig:
 
 
 # Custom vars
-version:             1.1.0
+version:             2.1.0
 
 # Exclude from processing.
 # The following items will not be processed, by default. Create a custom list

_layouts/presentation.html

@@ -46,6 +46,7 @@
     <script type="text/javascript" src="{{'assets/js/mathjax-sre.js' | relative_url}}"></script>
     <script type="text/javascript" src="{{'assets/js/html2canvas.min.js' | relative_url}}"></script>
     <script type="text/javascript" src="{{'assets/js/presentation-export.js' | relative_url}}"></script>
+    <script type="text/javascript" src="{{'assets/js/mermaid.js' | relative_url}}"></script>
 
     <script type="text/javascript">
       var slideshow = remark.create({
@@ -55,9 +56,23 @@
           highlightLines: 'true',
           slideNumberFormat: 'Slide %current% of %total%'
       }); 
+      var config = {
+          startOnLoad:false,
+	  cloneCssStyles:false,
+	  htmlLabels:true,
+	  useMaxWidth:false,
+	  callback:function(id){
+                console.log(id,' rendered');
+          }
+      };
+
+      mermaid.initialize(config);
+
+     slideshow.on("afterShowSlide", s => {
+	 const [slide] = document.getElementsByClassName("remark-visible");
+	 mermaid.init(Array.from(slide.getElementsByClassName("mermaid")));
+     });
     </script>
-  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-  </body>
 
 <!--
 class center middle

_layouts/presentation_production.html

@@ -47,6 +47,7 @@
     <script type="text/javascript" src="{{'assets/js/mathjax-sre.js' | relative_url}}"></script>
     <script type="text/javascript" src="{{'assets/js/html2canvas.min.js' | relative_url}}"></script>
     <script type="text/javascript" src="{{'assets/js/presentation-export.js' | relative_url}}"></script>
+    <script type="text/javascript" src="{{'assets/js/mermaid.js' | relative_url}}"></script>
 
     <script type="text/javascript">
       var slideshow = remark.create({
@@ -56,8 +57,25 @@
           highlightLines: 'true',
           slideNumberFormat: 'Slide %current% of %total%'
       });
+
+      var config = {
+          startOnLoad:false,
+	  cloneCssStyles:false,
+	  htmlLabels:true,
+	  useMaxWidth:false,
+	  callback:function(id){
+                console.log(id,' rendered');
+          }
+      };
+
+      mermaid.initialize(config);
+
+     slideshow.on("afterShowSlide", s => {
+	 const [slide] = document.getElementsByClassName("remark-visible");
+	 mermaid.init(Array.from(slide.getElementsByClassName("mermaid")));
+     });
+
     </script>
-  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
   </body>
 
 <!--

assets/css/mermaid.css

@@ -13,7 +13,6 @@
 
 .mermaid .label {
   color: #333;
-  font-size: 16pt;
 }
 
 .node rect,
@@ -59,19 +58,6 @@ text.actor {
   stroke: grey;
 }
 
-.messageLine0 {
-  stroke-width: 1.5;
-  stroke-dasharray: "2 2";
-  marker-end: "url(#arrowhead)";
-  stroke: #333;
-}
-
-.messageLine1 {
-  stroke-width: 1.5;
-  stroke-dasharray: "2 2";
-  stroke: #333;
-}
-
 #arrowhead {
   fill: #333;
 }
@@ -101,13 +87,6 @@ text.actor {
   stroke: none;
 }
 
-.loopLine {
-  stroke-width: 2;
-  stroke-dasharray: "2 2";
-  marker-end: "url(#arrowhead)";
-  stroke: #CCCCFF;
-}
-
 .note {
   stroke: #aaaa33;
   fill: #fff5ad;
@@ -116,8 +95,6 @@ text.actor {
 .noteText {
   fill: black;
   stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 12px;
 }
 
 /** Section styling */
@@ -158,8 +135,6 @@ text.actor {
 
 .sectionTitle {
   text-anchor: start;
-  font-size: 10px;
-  text-height: 12px;
 }
 
 /* Grid and axis */
@@ -188,19 +163,16 @@ text.actor {
 
 .taskText {
   text-anchor: middle;
-  font-size: 10px;
 }
 
 .taskTextOutsideRight {
   fill: black;
   text-anchor: start;
-  font-size: 10px;
 }
 
 .taskTextOutsideLeft {
   fill: black;
   text-anchor: end;
-  font-size: 10px;
 }
 
 /* Specific task settings for the sections*/
@@ -308,22 +280,13 @@ text.actor {
 
 .titleText {
   text-anchor: middle;
-  font-size: 16px;
   fill: black;
 }
 
-.node text {
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 12px;
-}
 
 div.mermaidTooltip {
   position: absolute;
   text-align: center;
-  max-width: 200px;
-  padding: 2px;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 12px;
   background: #ffffde;
   border: 1px solid #aaaa33;
   border-radius: 2px;
@@ -472,17 +435,3 @@ g.classGroup rect {
   fill: #FFFFFF00 !important;
 }
 
-/* Keep svgs within containing div */
-div.mermaid > svg {
-  width: 100%;
-  aspect-ratio: none;
-}
-
-g > foreignObject > div {
-    position:relative;
-    font-size: .8em;
-    height:auto;
-    width:auto;
-    padding:3px;
-    display:inline-block;
-}

assets/css/my-remark.scss

@@ -661,19 +661,25 @@ html.remark-container, body.remark-container {
 }
 
 .left-column-half {
-  color: #111;
-  width: 50%;
-  float: left;
-  h2:last-of-type, h3:last-child {
-    color: #000;
-  }
-  padding-left: 1em;
+    vertical-align:top;
+    width: 50%;
+    height: 92%;
+    float: left;
+    h2:last-of-type, h3:last-child {
+	color: #000;
+    }
+    padding-left: 1em;
 }
 
 .right-column-half {
-  width: 45%;
-  float: right;
-  padding-top: 1em;
+    width: 45%;
+    height: 92%;
+    float: right;
+    vertical-align:top;
+    h2:last-of-type, h3:last-child {
+	color: #000
+    }
+    padding-left: 1em;
 }
 
 .left-column40 {