Render flowchart

Author: Yukaii

package-lock.json

@@ -44,6 +44,7 @@
 		"@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",
 		"jquery": "^3.4.1",

package.json

@@ -7,6 +7,7 @@ import './style.css';
 import * as $ from 'jquery';
 
 import * as mermaid from 'mermaid';
+import * as flowchart from 'flowchart.js';
 import * as S from 'string';
 
 const mermaids = $('span.mermaid.raw');
@@ -29,3 +30,27 @@ mermaids.each((key, value) => {
   }
 })
 
+const flows = $('span.flow-chart.raw')
+flows.removeClass('raw')
+flows.each((key, value) => {
+  try {
+    var $value = $(value)
+    var $ele = $(value).parent().parent()
+
+    const chart = flowchart.parse($value.text())
+    $value.html('')
+    chart.drawSVG(value, {
+      'line-width': 2,
+      'fill': 'none',
+      'font-size': '16px',
+      'font-family': "'Andale Mono', monospace"
+    })
+    $ele.addClass('flow-chart')
+    $value.children().unwrap().unwrap()
+  } catch (err) {
+    // $value.unwrap()
+    // $value.parent().append(`<div class="alert alert-warning">${S(err).escapeHTML().s}</div>`)
+    // console.warn(err)
+    $ele.addClass('flow-chart')
+  }
+})