Render sequence diagram

Author: Yukaii

package-lock.json

@@ -40,17 +40,22 @@
 	},
 	"devDependencies": {
 		"@types/glob": "^7.1.1",
+		"@types/jquery": "^3.3.30",
 		"@types/mocha": "^5.2.6",
 		"@types/node": "^10.12.21",
 		"@types/vscode": "^1.36.0",
 		"css-loader": "^3.1.0",
 		"flowchart.js": "^1.12.2",
 		"glob": "^7.1.4",
 		"ignore-loader": "^0.1.2",
+		"imports-loader": "^0.8.0",
 		"jquery": "^3.4.1",
+		"js-sequence-diagrams": "git+https://github.com/Moeditor/js-sequence-diagrams.git",
+		"lodash": "^4.17.15",
 		"mermaid": "^8.2.3",
 		"mini-css-extract-plugin": "^0.8.0",
 		"mocha": "^6.1.4",
+		"raphael": "git+ssh://git@github.com/DmitryBaranovskiy/raphael.git#v2.2.7",
 		"style-loader": "^0.23.1",
 		"ts-loader": "^6.0.4",
 		"tslint": "^5.12.1",

package.json

@@ -4,10 +4,9 @@ import 'bootstrap3/dist/css/bootstrap.min.css';
 import './mermaid.css';
 import './style.css';
 
-import * as $ from 'jquery';
-
 import * as mermaid from 'mermaid';
 import * as flowchart from 'flowchart.js';
+import 'js-sequence-diagrams';
 import * as S from 'string';
 
 const mermaids = $('span.mermaid.raw');
@@ -54,3 +53,28 @@ flows.each((key, value) => {
     $ele.addClass('flow-chart')
   }
 })
+
+const sequences = $('span.sequence-diagram.raw')
+sequences.removeClass('raw')
+sequences.each((key, value) => {
+  try {
+    var $value = $(value)
+    var $ele = $(value).parent().parent()
+
+    const sequence = $value as any
+    sequence.sequenceDiagram({
+      theme: 'simple'
+    })
+
+    $ele.addClass('sequence-diagram')
+    $value.children().unwrap().unwrap()
+    const svg = $ele.find('> svg')
+    svg[0].setAttribute('viewBox', `0 0 ${svg.attr('width')} ${svg.attr('height')}`)
+    svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet')
+  } catch (err) {
+    // $value.unwrap()
+    // $value.parent().append(`<div class="alert alert-warning">${S(err).escapeHTML().s}</div>`)
+    // console.warn(err)
+    $ele.addClass('sequence-diagram')
+  }
+})

src/page.ts

@@ -4,6 +4,7 @@
 
 const path = require('path');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require('webpack')
 
 /**@type {import('webpack').Configuration}*/
 const extensionConfig = {
@@ -47,7 +48,10 @@ const pageConfig = {
     path: path.resolve(__dirname, 'dist')
   },
   resolve: {
-    extensions: ['.ts', '.js']
+    extensions: ['.ts', '.js'],
+    alias: {
+      raphaelmin: path.join(__dirname, 'node_modules/raphael/raphael.no-deps.min.js')
+    }
   },
   module: {
     rules: [
@@ -70,10 +74,20 @@ const pageConfig = {
       { test: /(\.woff|\.woff2)$/, loader: 'ignore-loader' },
       { test: /\.ttf$/, loader: 'ignore-loader' },
       { test: /\.eot$/, loader: 'ignore-loader' },
-      { test: /\.svg$/, loader: 'ignore-loader' }
+      { test: /\.svg$/, loader: 'ignore-loader' },
+      {
+        test: require.resolve('js-sequence-diagrams'),
+        loader: 'imports-loader?Raphael=raphaelmin&_=lodash'
+      }
     ]
   },
+  externals: 'fs',
   plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery',
+    }),
     new MiniCssExtractPlugin({
       filename: "[name].css",
       chunkFilename: "[id].css"