Render viz.js

Author: Yukaii

package-lock.json

@@ -56,10 +56,12 @@
 		"mini-css-extract-plugin": "^0.8.0",
 		"mocha": "^6.1.4",
 		"raphael": "git+ssh://git@github.com/DmitryBaranovskiy/raphael.git#v2.2.7",
+		"script-loader": "^0.7.2",
 		"style-loader": "^0.23.1",
 		"ts-loader": "^6.0.4",
 		"tslint": "^5.12.1",
 		"typescript": "^3.3.1",
+		"viz.js": "^2.1.2",
 		"vscode-test": "^1.0.0-next.0",
 		"webpack": "^4.37.0",
 		"webpack-cli": "^3.3.6"

package.json

@@ -7,6 +7,8 @@ import './style.css';
 import * as mermaid from 'mermaid';
 import * as flowchart from 'flowchart.js';
 import 'js-sequence-diagrams';
+import Viz from 'viz.js';
+import { Module, render } from 'viz.js/full.render.js';
 import * as S from 'string';
 
 const mermaids = $('span.mermaid.raw');
@@ -78,3 +80,34 @@ sequences.each((key, value) => {
     $ele.addClass('sequence-diagram')
   }
 })
+
+let viz = new Viz({ Module, render });
+
+const graphvizs = $('span.graphviz.raw')
+graphvizs.removeClass('raw')
+graphvizs.each(function (key, value) {
+  try {
+    var $value = $(value)
+    var $ele = $(value).parent().parent()
+    $value.unwrap()
+    const option = {
+      engine: $value.attr('data-engine') || undefined
+    }
+    viz.renderString($value.text(), option)
+      .then(result => {
+        if (!result) throw Error('viz.js output empty graph')
+        $value.html(result)
+        $ele.addClass('graphviz')
+        $value.children().unwrap()
+      })
+      .catch(err => {
+        viz = new Viz({ Module, render });
+
+        // $value.parent().append(`<div class="alert alert-warning">${S(err).escapeHTML().s}</div>`)
+        // console.warn(err)
+      })
+  } catch (err) {
+    // $value.parent().append(`<div class="alert alert-warning">${S(err).escapeHTML().s}</div>`)
+    // console.warn(err)
+  }
+})