feat: render plantuml diagrams

Author: Symbitic

doc/src/writing/extensions.md

@@ -142,3 +142,16 @@ You can include other files by using `@include filename.md`. Once loaded, they a
 
 Recursive includes will result in an error, but one external file can include another one. That is, if `1.md` includes `2.md`, then `2.md` can still include `3.md`.
 
+## PlantUML Diagrams
+
+PlantUML diagrams can be rendered.
+
+    ```plantuml
+    Bob -> Alice : hello
+    ```
+
+results in:
+
+```plantuml
+Bob -> Alice : hello
+```

package-lock.json

@@ -75,6 +75,7 @@
   ],
   "dependencies": {
     "archiver": "^3.0.0",
+    "axios": "^0.18.0",
     "chalk": "^2.4.1",
     "chokidar": "^2.1.5",
     "commander": "^2.20.0",
@@ -90,6 +91,7 @@
     "koa-send": "^5.0.0",
     "make-dir": "^3.0.0",
     "mdast-util-to-hast": "^5.0.0",
+    "plantuml-encoder": "^1.2.5",
     "puppeteer-core": "^1.15.0",
     "rehype-katex": "^1.2.0",
     "rehype-stringify": "^5.0.0",

package.json

@@ -7,6 +7,7 @@ import katex from 'rehype-katex'
 import math from 'remark-math'
 import markdown from 'remark-parse'
 import meta from 'remark-meta'
+import plantuml from './remark/remark-plantuml'
 import redirect from 'remark-redirect'
 import remark2rehype from 'remark-rehype'
 import supersub from 'remark-supersub'
@@ -23,6 +24,7 @@ const createProcessor = () =>
     .use(include)
     .use(math)
     .use(deflist)
+    .use(plantuml)
     .use(supersub)
     .use(meta)
     .use(bibliography)

src/renderer/markdown.js

@@ -0,0 +1,41 @@
+/**
+ * Remark plugin for rendering PlantUML syntax
+ */
+import axios from 'axios'
+import { encode } from 'plantuml-encoder'
+import visit from 'unist-util-visit'
+
+export default function (options = {}) {
+  return async (tree, file) => {
+    const nodes = []
+
+    visit(tree, ['code'], (node, i, parent) => {
+      if (node.lang !== 'plantuml') {
+        return
+      }
+      nodes.push([parent, i, node.value])
+    })
+
+    if (!nodes.length) {
+      return
+    }
+
+    for (const [parent, i, value] of nodes) {
+      const base64 = encode(value)
+      const { data } = await axios(
+        `http://www.plantuml.com/plantuml/svg/${base64}`
+      )
+
+      const node = {
+        type: 'image',
+        url: `data:image/svg+xml;utf8,${encodeURIComponent(data)}`,
+        title: 'PlantUML image',
+        alt: 'PlantUML image'
+      }
+
+      parent.children.splice(i, 1, node)
+    }
+
+    return tree
+  }
+}