Added support for UML charts

bower.json

@@ -27,6 +27,12 @@
     "rangy": "~1.2.3",
     "google-diff-match-patch-js": "~1.0.0",
     "jsondiffpatch": "https://github.com/benweet/jsondiffpatch.git#fb9dddf7cd076d8ec89d376c0e9de9223e9888f9",
-    "hammerjs": "~1.0.10"
+    "hammerjs": "~1.0.10",
+    "raphael": "~2.1.2",
+    "js-sequence-diagrams": "https://github.com/bramp/js-sequence-diagrams.git#1.0.4",
+    "flowchart": "https://github.com/adrai/flowchart.js.git#~1.2.10"
+  },
+  "resolutions": {
+    "js-sequence-diagrams": "1.0.3"
   }
 }

public/res/extensions/markdownExtra.js

@@ -3,12 +3,16 @@ define([
     "jquery",
     "underscore",
     "utils",
+    "logger",
     "classes/Extension",
     "text!html/markdownExtraSettingsBlock.html",
     'google-code-prettify',
     'highlightjs',
+    'crel',
+    'sequence-diagram',
+    'flow-chart',
     'pagedown-extra',
-], function($, _, utils, Extension, markdownExtraSettingsBlockHTML, prettify, hljs) {
+], function($, _, utils, logger, Extension, markdownExtraSettingsBlockHTML, prettify, hljs, crel, sequenceDiagram, flowChart) {
 
     var markdownExtra = new Extension("markdownExtra", "Markdown Extra", true);
     markdownExtra.settingsBlock = markdownExtraSettingsBlockHTML;
@@ -67,6 +71,11 @@ define([
         eventMgr = eventMgrParameter;
     };
 
+    var previewContentsElt;
+    markdownExtra.onReady = function() {
+        previewContentsElt = document.getElementById('preview-contents');
+    };
+
     markdownExtra.onPagedownConfigure = function(editor) {
         var converter = editor.getConverter();
         if(markdownExtra.config.intraword === true) {
@@ -86,14 +95,49 @@ define([
                 });
             });
         }
-        
+
         var extraOptions = {
             extensions: markdownExtra.config.extensions
         };
+
+        function doSequenceDiagrams() {
+            _.each(previewContentsElt.querySelectorAll('.prettyprint > .language-sequence'), function(elt) {
+                try {
+                    var diagram = sequenceDiagram.parse(elt.textContent);
+                    var preElt = elt.parentNode;
+                    var containerElt = crel('div', {
+                        class: 'sequence-diagram'
+                    });
+                    preElt.parentNode.replaceChild(containerElt, preElt);
+                    diagram.drawSVG(containerElt, {
+                        theme: 'simple'
+                    });
+                }
+                catch(e) {
+                    console.error(e);
+                }
+            });
+            _.each(previewContentsElt.querySelectorAll('.prettyprint > .language-flow'), function(elt) {
+                try {
+                    var chart = flowChart.parse(elt.textContent);
+                    var preElt = elt.parentNode;
+                    var containerElt = crel('div', {
+                        class: 'flow-chart'
+                    });
+                    preElt.parentNode.replaceChild(containerElt, preElt);
+                    chart.drawSVG(containerElt, {
+                        'line-width': 2
+                    });
+                }
+                catch(e) {
+                    console.error(e);
+                }
+            });
+        }
         if(markdownExtra.config.highlighter == "highlight") {
             extraOptions.highlighter = "prettify";
-            var previewContentsElt = document.getElementById('preview-contents');
             editor.hooks.chain("onPreviewRefresh", function() {
+                doSequenceDiagrams();
                 _.each(previewContentsElt.querySelectorAll('.prettyprint > code'), function(elt) {
                     !elt.highlighted && hljs.highlightBlock(elt);
                     elt.highlighted = true;
@@ -102,10 +146,13 @@ define([
         }
         else if(markdownExtra.config.highlighter == "prettify") {
             extraOptions.highlighter = "prettify";
-            editor.hooks.chain("onPreviewRefresh", prettify.prettyPrint);
+            editor.hooks.chain("onPreviewRefresh", function() {
+                doSequenceDiagrams();
+                prettify.prettyPrint();
+            });
         }
         Markdown.Extra.init(converter, extraOptions);
     };
 
     return markdownExtra;
-});
+});

public/res/libs/prism-markdown.js

@@ -16,7 +16,8 @@ Prism.languages.md = (function() {
     md['pre gfm'] = {
         pattern: /^ {0,3}`{3}.*?\n(.*?\n)*? {0,3}`{3} *$/gm,
         inside: {
-            "md md-pre": /`{3}/
+            "md md-pre": /`{3}/,
+            lf: /\n/gm,
         }
     };
     md['h1 alt'] = {

public/res/main.js

@@ -60,7 +60,11 @@ requirejs.config({
         diff_match_patch: 'bower-libs/google-diff-match-patch-js/diff_match_patch',
         diff_match_patch_uncompressed: 'bower-libs/google-diff-match-patch-js/diff_match_patch_uncompressed',
         jsondiffpatch: 'bower-libs/jsondiffpatch/build/bundle',
-        hammerjs: 'bower-libs/hammerjs/hammer'
+        hammerjs: 'bower-libs/hammerjs/hammer',
+        'sequence-diagram': 'bower-libs/js-sequence-diagrams/build/sequence-diagram-min',
+        raphael: 'bower-libs/raphael/raphael',
+        'flow-chart': 'bower-libs/flowchart/release/flowchart.amd-1.2.10.min',
+        flowchart: 'bower-libs/flowchart/release/flowchart-1.2.10.min'
     },
     shim: {
         underscore: {
@@ -144,7 +148,17 @@ requirejs.config({
         ],
         'pagedown-extra': [
             'libs/Markdown.Converter'
-        ]
+        ],
+        'sequence-diagram': {
+            deps: [
+                'underscore',
+                'raphael'
+            ],
+            exports: 'Diagram'
+        },
+        'flow-chart': [
+            'raphael'
+        ],
     }
 });
 

public/res/styles/base.less

@@ -130,6 +130,23 @@ hr {
 	margin: 2em 0;
 }
 
+.sequence-diagram, .flow-chart {
+    text-align: center;
+    text {
+        font-size: 1em !important;
+        font-family: @font-family-sans-serif !important;
+    }
+    [fill="#ffffff"] {
+        fill: none;
+    }
+    [stroke="#000000"] {
+        stroke: @text-color;
+    }
+    [fill="#000"], [fill="#000000"], [fill="black"] {
+        fill: @text-color;
+    }
+}
+
 code, pre {
 	font-family: @font-family-monospace;
     font-size: 0.9em;