add flowchat

2026-04-05 13:09:04 +08:00 · 2020-06-24 23:55:57 +08:00
parent 2a15dad6c4
commit 29ab59ad5c
3 changed files with 74 additions and 1 deletions
--- a/lib/markdown-it-flowchart/index.html
+++ b/lib/markdown-it-flowchart/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head></head>
+  <body>
+    <div id="container"></div>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
+	<script src="http://flowchart.js.org/flowchart-latest.js"></script>
+  </body>
+</html>
--- a/lib/markdown-it-flowchart/index.js
+++ b/lib/markdown-it-flowchart/index.js
@@ -0,0 +1,63 @@
+const flowChart = (code, config) => {
+    const deasyncPromise = require('deasync-promise')
+
+    return deasyncPromise((async () => {
+        try {
+            const path = require('path')
+            const puppeteer = require('puppeteer')
+            const browser = await puppeteer.launch({
+                headless: true,
+                args: [
+                  '--disable-gpu',
+                  '--disable-dev-shm-usage',
+                  '--disable-setuid-sandbox',
+                  '--no-first-run',
+                  '--no-sandbox',
+                  '--no-zygote',
+                  '--single-process'
+                ]
+            })
+            const page = await browser.newPage()
+            page.setViewport({ width: 800, height: 600 })
+            await page.goto(`file://${path.join(__dirname, 'index.html')}`)
+
+            await page.$eval('#container', (container, code, config) => {
+                window.flowchart.parse(code).drawSVG('container');
+            }, code, config)
+            const svg = await page.$eval('#container', container => {
+                return container.innerHTML
+            })
+            browser.close()
+
+            return `<pre class="flowchart">${svg}</pre>`
+        } catch (e) {
+            return `<pre>${e}</pre>`
+        }
+    })())
+
+}
+
+module.exports = (md, options) => {
+
+    const config = {
+        startOnLoad: false,
+        theme: "default",
+        flowchart: {
+            htmlLabels: false,
+            useMaxWidth: true,
+        },
+        ...options
+    }
+
+    const defaultRenderer = md.renderer.rules.fence.bind(md.renderer.rules)
+
+    md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+        const token = tokens[idx]
+        const code = token.content.trim()
+
+        if (token.info === 'flow') {
+            return flowChart(code, config)
+        }
+        return defaultRenderer(tokens, idx, options, env, self)
+    }
+}
--- a/lib/renderer.js
+++ b/lib/renderer.js
@@ -18,7 +18,8 @@ const default_plugins = [
    'markdown-it-ruby',
    './markdown-it-mermaid',
    './markdown-it-prism',
-    './markdown-it-excerpt'
+    './markdown-it-excerpt',
+    './markdown-it-flowchart'
 ];

 /**