Support mermaid in code block diagram and updated all diagram rendering method and styles

bower.json

@@ -43,6 +43,7 @@
     "markdown-it-mark": "^2.0.0",
     "markdown-it-ins": "^2.0.0",
     "markdown-it-sub": "^1.0.0",
-    "markdown-it-sup": "^1.0.0"
+    "markdown-it-sup": "^1.0.0",
+    "mermaid": "^0.5.8"
   }
 }

public/css/index.css

@@ -128,7 +128,7 @@ body {
     overflow-y: auto;
 }
 .ui-status * {
-    font-size: 16px;
+    font-size: 16px !important;
 }
 .navbar-brand {
     font-weight: bold;

public/css/markdown.css

@@ -82,13 +82,6 @@
     content: ''
 }
 
-.markdown-body .sequence-diagram, .markdown-body .flow-chart {
-    text-align: center;
-}
-.markdown-body .flow-chart {
-    margin-bottom: 40px;
-}
-
 /*fixed style for rtl in pre and code*/
 
 .markdown-body[dir='rtl'] pre {
@@ -100,7 +93,27 @@
     unicode-bidi: embed;
 }
 
-svg {
+.markdown-body pre.flow-chart,
-    width: 100%;
+.markdown-body pre.sequence-diagram,
-    max-height: 70vh;
+.markdown-body pre.graphviz,
+.markdown-body pre.mermaid {
+    text-align: center;
+    background-color: inherit;
+    border-radius: 0;
+    white-space: inherit;
+}
+
+.markdown-body pre.flow-chart > code,
+.markdown-body pre.sequence-diagram > code,
+.markdown-body pre.graphviz > code,
+.markdown-body pre.mermaid > code {
+    text-align: left;
+}
+
+.markdown-body pre.flow-chart > svg,
+.markdown-body pre.sequence-diagram > svg,
+.markdown-body pre.graphviz > svg,
+.markdown-body pre.mermaid > svg {
+    max-width: 100%;
+    height: 100%;
 }

public/css/mermaid.css

@@ -0,0 +1,273 @@
+/* Flowchart variables */
+/* Sequence Diagram variables */
+/* Gantt chart variables */
+.mermaid .label {
+  color: #333;
+}
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node ellipse,
+.mermaid .node polygon {
+  fill: #ECECFF;
+  stroke: #CCCCFF;
+  stroke-width: 1px;
+}
+.mermaid .edgePath .path {
+  stroke: #333333;
+}
+.mermaid .edgeLabel {
+  background-color: #e8e8e8;
+}
+.mermaid .cluster rect {
+  fill: #ffffde !important;
+  rx: 4 !important;
+  stroke: #aaaa33 !important;
+  stroke-width: 1px !important;
+}
+.mermaid .cluster text {
+  fill: #333;
+}
+.mermaid .actor {
+  stroke: #CCCCFF;
+  fill: #ECECFF;
+}
+.mermaid text.actor {
+  fill: black;
+  stroke: none;
+}
+.mermaid .actor-line {
+  stroke: grey;
+}
+.mermaid .messageLine0 {
+  stroke-width: 1.5;
+  stroke-dasharray: "2 2";
+  marker-end: "url(#arrowhead)";
+  stroke: #333;
+}
+.mermaid .messageLine1 {
+  stroke-width: 1.5;
+  stroke-dasharray: "2 2";
+  stroke: #333;
+}
+.mermaid #arrowhead {
+  fill: #333;
+}
+.mermaid #crosshead path {
+  fill: #333 !important;
+  stroke: #333 !important;
+}
+.mermaid .messageText {
+  fill: #333;
+  stroke: none;
+}
+.mermaid .labelBox {
+  stroke: #CCCCFF;
+  fill: #ECECFF;
+}
+.mermaid .labelText {
+  fill: black;
+  stroke: none;
+}
+.mermaid .loopText {
+  fill: black;
+  stroke: none;
+}
+.mermaid .loopLine {
+  stroke-width: 2;
+  stroke-dasharray: "2 2";
+  marker-end: "url(#arrowhead)";
+  stroke: #CCCCFF;
+}
+.mermaid .note {
+  stroke: #aaaa33;
+  fill: #fff5ad;
+}
+.mermaid .noteText {
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
+}
+/** Section styling */
+.mermaid .section {
+  stroke: none;
+  opacity: 0.2;
+}
+.mermaid .section0 {
+  fill: rgba(102, 102, 255, 0.49);
+}
+.mermaid .section2 {
+  fill: #fff400;
+}
+.mermaid .section1,
+.mermaid .section3 {
+  fill: white;
+  opacity: 0.2;
+}
+.mermaid .sectionTitle0 {
+  fill: #333;
+}
+.mermaid .sectionTitle1 {
+  fill: #333;
+}
+.mermaid .sectionTitle2 {
+  fill: #333;
+}
+.mermaid .sectionTitle3 {
+  fill: #333;
+}
+.mermaid .sectionTitle {
+  text-anchor: start;
+  font-size: 11px;
+  text-height: 14px;
+}
+/* Grid and axis */
+.mermaid .grid .tick {
+  stroke: lightgrey;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+.mermaid .grid path {
+  stroke-width: 0;
+}
+/* Today line */
+.mermaid .today {
+  fill: none;
+  stroke: red;
+  stroke-width: 2px;
+}
+/* Task styling */
+/* Default task */
+.mermaid .task {
+  stroke-width: 2;
+}
+.mermaid .taskText {
+  text-anchor: middle;
+  font-size: 11px;
+}
+.mermaid .taskTextOutsideRight {
+  fill: black;
+  text-anchor: start;
+  font-size: 11px;
+}
+.mermaid .taskTextOutsideLeft {
+  fill: black;
+  text-anchor: end;
+  font-size: 11px;
+}
+/* Specific task settings for the sections*/
+.mermaid .taskText0,
+.mermaid .taskText1,
+.mermaid .taskText2,
+.mermaid .taskText3 {
+  fill: white;
+}
+.mermaid .task0,
+.mermaid .task1,
+.mermaid .task2,
+.mermaid .task3 {
+  fill: #8a90dd;
+  stroke: #534fbc;
+}
+.mermaid .taskTextOutside0,
+.mermaid .taskTextOutside2 {
+  fill: black;
+}
+.mermaid .taskTextOutside1,
+.mermaid .taskTextOutside3 {
+  fill: black;
+}
+/* Active task */
+.mermaid .active0,
+.mermaid .active1,
+.mermaid .active2,
+.mermaid .active3 {
+  fill: #bfc7ff;
+  stroke: #534fbc;
+}
+.mermaid .activeText0,
+.mermaid .activeText1,
+.mermaid .activeText2,
+.mermaid .activeText3 {
+  fill: black !important;
+}
+/* Completed task */
+.mermaid .done0,
+.mermaid .done1,
+.mermaid .done2,
+.mermaid .done3 {
+  stroke: grey;
+  fill: lightgrey;
+  stroke-width: 2;
+}
+.mermaid .doneText0,
+.mermaid .doneText1,
+.mermaid .doneText2,
+.mermaid .doneText3 {
+  fill: black !important;
+}
+/* Tasks on the critical line */
+.mermaid .crit0,
+.mermaid .crit1,
+.mermaid .crit2,
+.mermaid .crit3 {
+  stroke: #ff8888;
+  fill: red;
+  stroke-width: 2;
+}
+.mermaid .activeCrit0,
+.mermaid .activeCrit1,
+.mermaid .activeCrit2,
+.mermaid .activeCrit3 {
+  stroke: #ff8888;
+  fill: #bfc7ff;
+  stroke-width: 2;
+}
+.mermaid .doneCrit0,
+.mermaid .doneCrit1,
+.mermaid .doneCrit2,
+.mermaid .doneCrit3 {
+  stroke: #ff8888;
+  fill: lightgrey;
+  stroke-width: 2;
+  cursor: pointer;
+  shape-rendering: crispEdges;
+}
+.mermaid .doneCritText0,
+.mermaid .doneCritText1,
+.mermaid .doneCritText2,
+.mermaid .doneCritText3 {
+  fill: black !important;
+}
+.mermaid .activeCritText0,
+.mermaid .activeCritText1,
+.mermaid .activeCritText2,
+.mermaid .activeCritText3 {
+  fill: black !important;
+}
+.mermaid .titleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: black;
+}
+/*
+
+
+*/
+.mermaid .node text {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
+}
+.mermaid 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;
+  pointer-events: none;
+  z-index: 100;
+}

public/js/extra.js

@@ -220,11 +220,16 @@ function finishView(view) {
     var sequences = view.find(".sequence-diagram.raw").removeClass("raw");
     sequences.each(function (key, value) {
         try {
-            var sequence = $(value);
+            var $value = $(value);
+            var $ele = $(value).parent().parent();
+            
+            var sequence = $value;
             sequence.sequenceDiagram({
                 theme: 'simple'
             });
-            sequence.parent().parent().replaceWith(sequence);
+            
+            $ele.addClass('sequence-diagram');
+            $value.children().unwrap().unwrap();
         } catch (err) {
             console.warn(err);
         }
@@ -233,15 +238,20 @@ function finishView(view) {
     var flow = view.find(".flow-chart.raw").removeClass("raw");
     flow.each(function (key, value) {
         try {
-            var chart = flowchart.parse($(value).text());
+            var $value = $(value);
-            $(value).html('');
+            var $ele = $(value).parent().parent();
+            
+            var chart = flowchart.parse($value.text());
+            $value.html('');
             chart.drawSVG(value, {
                 'line-width': 2,
                 'fill': 'none',
                 'font-size': '16px',
                 'font-family': "'Andale Mono', monospace"
             });
-            $(value).parent().parent().replaceWith(value);
+            
+            $ele.addClass('flow-chart');
+            $value.children().unwrap().unwrap();
         } catch (err) {
             console.warn(err);
         }
@@ -250,9 +260,37 @@ function finishView(view) {
     var graphvizs = view.find(".graphviz.raw").removeClass("raw");
     graphvizs.each(function (key, value) {
         try {
-            var graphviz = Viz($(value).text());
+            var $value = $(value);
-            $(value).html(graphviz);
+            var $ele = $(value).parent().parent();
-            $(value).parent().parent().replaceWith(value);
+            
+            var graphviz = Viz($value.text());
+            $value.html(graphviz);
+            
+            $ele.addClass('graphviz');
+            $value.children().unwrap().unwrap();
+        } catch (err) {
+            console.warn(err);
+        }
+    });
+    //mermaid
+    var mermaids = view.find(".mermaid.raw").removeClass("raw");
+    mermaids.each(function (key, value) {
+        try {
+            var $value = $(value);
+            var $ele = $(value).parent().parent();
+            
+            var mermaidError = null;
+            mermaid.parseError = function (err, hash) {
+                mermaidError = err;
+            };
+            
+            if (mermaidAPI.parse($value.text())) {
+                $ele.addClass('mermaid');
+                $ele.html($value.text());
+                mermaid.init(undefined, $ele);
+            } else {
+                console.warn(mermaidError);
+            }
         } catch (err) {
             console.warn(err);
         }
@@ -633,6 +671,8 @@ function highlightRender(code, lang) {
         return '<div class="flow-chart raw">' + code + '</div>';
     } else if (lang == 'graphviz') {
         return '<div class="graphviz raw">' + code + '</div>';
+    } else if (lang == 'mermaid') {
+        return '<div class="mermaid raw">' + code + '</div>';
     }
     var reallang = lang.replace(/\=$|\=\d+$|\=\+$/, '');
     var languages = hljs.listLanguages();

public/js/index.js

@@ -56,7 +56,7 @@ var cursorMenuThrottle = 100;
 var cursorActivityDebounce = 50;
 var cursorAnimatePeriod = 100;
 var supportCodeModes = ['javascript', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'coffeescript', 'yaml', 'jade', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile'];
-var supportCharts = ['sequence', 'flow', 'graphviz'];
+var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid'];
 var supportHeaders = [
     {
         text: '# h1',

public/views/foot.ejs

@@ -50,6 +50,7 @@
 <script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
 <script src="<%- url %>/vendor/flowchart/release/flowchart.min.js" defer></script>
 <script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
+<script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
 <script src="<%- url %>/vendor/FileSaver.min.js" defer></script>
 <script src="<%- url %>/vendor/store.min.js" defer></script>
 <script src="<%- url %>/vendor/js-url/url.min.js" defer></script>

public/views/head.ejs

@@ -32,6 +32,7 @@
 <link rel="stylesheet" href="<%- url %>/vendor/highlight-js/github-gist.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/emojify/css/emojify.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/showup/showup.css">
+<link rel="stylesheet" href="<%- url %>/css/mermaid.css">
 <link rel="stylesheet" href="<%- url %>/css/markdown.css">
 <link rel="stylesheet" href="<%- url %>/css/index.css">
 <link rel="stylesheet" href="<%- url %>/css/extra.css">

public/views/pretty.ejs

@@ -24,6 +24,7 @@
     <link rel="stylesheet" href='<%- url %>/css/github-extract.css'>
     <link rel="stylesheet" href='<%- url %>/css/gist.css'>
     <link rel="stylesheet" href='<%- url %>/vendor/highlight-js/github-gist.min.css'>
+    <link rel="stylesheet" href="<%- url %>/css/mermaid.css">
     <link rel="stylesheet" href='<%- url %>/css/markdown.css'>
     <link rel="stylesheet" href='<%- url %>/vendor/emojify/css/emojify.min.css'>
     <link rel="stylesheet" href='<%- url %>/css/extra.css'>
@@ -98,6 +99,7 @@
 <script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
 <script src="<%- url %>/vendor/flowchart/release/flowchart.min.js" defer></script>
 <script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
+<script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
 <script src="<%- url %>/vendor/md-toc.js" defer></script>
 <script type="text/x-mathjax-config">
     MathJax.Hub.Config({ messageStyle: "none", skipStartupTypeset: true ,tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true }});