Upgraded mermaid and katex

build/webpack.base.conf.js

@@ -53,11 +53,11 @@ module.exports = {
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test'), resolve('node_modules/mermaid/src')],
         exclude: [
-          resolve('node_modules/mermaid/src/diagrams/classDiagram/parser'),
+          resolve('node_modules/mermaid/src/diagrams/class/parser'),
           resolve('node_modules/mermaid/src/diagrams/flowchart/parser'),
           resolve('node_modules/mermaid/src/diagrams/gantt/parser'),
-          resolve('node_modules/mermaid/src/diagrams/gitGraph/parser'),
-          resolve('node_modules/mermaid/src/diagrams/sequenceDiagram/parser'),
+          resolve('node_modules/mermaid/src/diagrams/git/parser'),
+          resolve('node_modules/mermaid/src/diagrams/sequence/parser'),
         ],
       },
       {

package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "@vue/test-utils": "^1.0.0-beta.16",
     "abcjs": "^5.2.0",
-    "aws-sdk": "^2.133.0",
+    "aws-sdk": "^2.317.0",
     "babel-runtime": "^6.26.0",
     "bezier-easing": "^1.1.0",
     "body-parser": "^1.18.2",
@@ -38,7 +38,7 @@
     "handlebars": "^4.0.10",
     "indexeddbshim": "^3.6.2",
     "js-yaml": "^3.11.0",
-    "katex": "^v0.10.0-alpha",
+    "katex": "^v0.10.0-rc.1",
     "markdown-it": "^8.4.1",
     "markdown-it-abbr": "^1.0.4",
     "markdown-it-deflist": "^2.0.2",
@@ -49,7 +49,7 @@
     "markdown-it-pandoc-renderer": "1.1.3",
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",
-    "mermaid": "^7.1.0",
+    "mermaid": "^8.0.0-rc.8",
     "mousetrap": "^1.6.1",
     "normalize-scss": "^7.0.1",
     "prismjs": "^1.6.0",
@@ -67,10 +67,10 @@
     "babel-jest": "^21.0.2",
     "babel-loader": "^7.1.4",
     "babel-plugin-dynamic-import-node": "^1.2.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.23.0",
-    "babel-preset-env": "^1.3.2",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
     "chalk": "^1.1.3",

src/extensions/mermaidExtension.js

@@ -1,10 +1,9 @@
 import mermaidUtils from 'mermaid/src/utils';
 import flowRenderer from 'mermaid/src/diagrams/flowchart/flowRenderer';
-import seq from 'mermaid/src/diagrams/sequenceDiagram/sequenceRenderer';
-import info from 'mermaid/src/diagrams/example/exampleRenderer';
-import gantt from 'mermaid/src/diagrams/gantt/ganttRenderer';
-import classRenderer from 'mermaid/src/diagrams/classDiagram/classRenderer';
-import gitGraphRenderer from 'mermaid/src/diagrams/gitGraph/gitGraphRenderer';
+import sequenceRenderer from 'mermaid/src/diagrams/sequence/sequenceRenderer';
+import ganttRenderer from 'mermaid/src/diagrams/gantt/ganttRenderer';
+import classRenderer from 'mermaid/src/diagrams/class/classRenderer';
+import gitGraphRenderer from 'mermaid/src/diagrams/git/gitGraphRenderer';
 import extensionSvc from '../services/extensionSvc';
 import utils from '../services/utils';
 
@@ -14,9 +13,9 @@ const config = {
   arrowMarkerAbsolute: false,
   flowchart: {
     htmlLabels: true,
-    useMaxWidth: true,
+    curve: 'linear',
   },
-  sequenceDiagram: {
+  sequence: {
     diagramMarginX: 50,
     diagramMarginY: 10,
     actorMargin: 50,
@@ -39,23 +38,11 @@ const config = {
     gridLineStartPadding: 35,
     fontSize: 11,
     fontFamily: '"Open-Sans", "sans-serif"',
-    numberSectionStyles: 3,
-    axisFormatter: [
-      // Within a day
-      ['%I:%M', d => d.getHours()],
-      // Monday a week
-      ['w. %U', d => d.getDay() === 1],
-      // Day within a week (not monday)
-      ['%a %d', d => d.getDay() && d.getDate() !== 1],
-      // within a month
-      ['%b %d', d => d.getDate() !== 1],
-      // Month
-      ['%m-%y', d => d.getMonth()],
-    ],
+    numberSectionStyles: 4,
+    axisFormat: '%Y-%m-%d',
   },
-  classDiagram: {},
-  gitGraph: {},
-  info: {},
+  class: {},
+  git: {},
 };
 
 const containerElt = document.createElement('div');
@@ -70,41 +57,33 @@ const render = (elt) => {
   try {
     const graphType = mermaidUtils.detectType(txt);
     switch (graphType) {
-      case 'gitGraph':
+      case 'git':
         config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        gitGraphRenderer.setConf(config.gitGraph);
+        gitGraphRenderer.setConf(config.git);
         gitGraphRenderer.draw(txt, svgId, false);
         break;
-      case 'graph':
+      case 'flowchart':
         config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
         flowRenderer.setConf(config.flowchart);
         flowRenderer.draw(txt, svgId, false);
         break;
-      case 'dotGraph':
-        config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        flowRenderer.setConf(config.flowchart);
-        flowRenderer.draw(txt, svgId, true);
-        break;
-      case 'sequenceDiagram':
-        config.sequenceDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        seq.setConf(config.sequenceDiagram);
-        seq.draw(txt, svgId);
+      case 'sequence':
+        config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        sequenceRenderer.setConf(config.sequence);
+        sequenceRenderer.draw(txt, svgId);
         break;
       case 'gantt':
         config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        gantt.setConf(config.gantt);
-        gantt.draw(txt, svgId);
+        ganttRenderer.setConf(config.gantt);
+        ganttRenderer.draw(txt, svgId);
         break;
-      case 'classDiagram':
-        config.classDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        classRenderer.setConf(config.classDiagram);
+      case 'class':
+        config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+        classRenderer.setConf(config.class);
         classRenderer.draw(txt, svgId);
         break;
-      case 'info':
       default:
-        config.info.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        info.draw(txt, svgId, 'Unknown');
-        break;
+        throw new Error('Invalid graph type.');
     }
     elt.parentNode.replaceChild(containerElt.firstChild, elt);
   } catch (e) {