Add png support for Mermaid

See yuzutech#507
derlin · Oct 13, 2021 · 717ffe3 · 717ffe3
1 parent 5f5f4ee
commit 717ffe3
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 21 deletions.
diff --git a/mermaid/src/index.js b/mermaid/src/index.js
@@ -11,18 +11,23 @@ const micro = require('micro')
   const server = micro(async (req, res) => {
     // TODO: add a /_status route (return mermaid version)
     // TODO: read the diagram source as plain text
-    const diagramSource = await micro.text(req, { limit: '1mb', encoding: 'utf8' })
-    if (diagramSource) {
-      try {
-        const svg = await worker.convert(new Task(diagramSource))
-        res.setHeader('Content-Type', 'image/svg+xml')
-        return micro.send(res, 200, svg)
-      } catch (e) {
-        console.log('e', e)
-        return micro.send(res, 400, 'Unable to convert the diagram')
+    const outputType = req.url.match(/\/((?:png)|(?:svg))/)?.[1];
+    if (outputType) {
+      const diagramSource = await micro.text(req, { limit: '1mb',  encoding: 'utf8' })
+      if (diagramSource) {
+        try {
+          const isPng = outputType == 'png'
+          const output = await worker.convert(new Task(diagramSource, isPng))
+          res.setHeader('Content-Type', isPng ? 'image/png' : 'image/svg+xml')
+          return micro.send(res, 200, output)
+        } catch (e) {
+          console.log('exception during convert', e)
+          return micro.send(res, 400, 'Unable to convert the diagram')
+        }
       }
+      micro.send(res, 400, 'Body must not be empty.')
     }
-    micro.send(res, 400, 'Body must not be empty.')
+    micro.send(res, 400, 'Available endpoints are /svg and /png.')
   })
   server.listen(8002)
 })().catch(error => {

diff --git a/mermaid/src/task.js b/mermaid/src/task.js
@@ -1,6 +1,7 @@
 class Task {
-  constructor (source) {
+  constructor (source, isPng = false) {
     this.source = source
+    this.isPng = isPng
     this.mermaidConfig = {
       theme: 'default',
       class: {

diff --git a/mermaid/src/worker.js b/mermaid/src/worker.js
@@ -8,7 +8,7 @@ class Worker {
     this.pageUrl = process.env.KROKI_MERMAID_PAGE_URL || `file://${path.join(__dirname, '..', 'assets', 'index.html')}`
   }
 
-  async convert (task) {
+  async convert(task) {
     const browser = await puppeteer.connect({
       browserWSEndpoint: this.browserWSEndpoint,
       ignoreHTTPSErrors: true
@@ -23,14 +23,23 @@ class Worker {
         window.mermaid.initialize(mermaidConfig)
         window.mermaid.init(undefined, container)
       }, task.source, task.mermaidConfig)
-      return await page.$eval('#container', container => {
-        const xmlSerializer = new XMLSerializer()
-        const nodes = []
-        for (let i = 0; i < container.childNodes.length; i++) {
-          nodes.push(xmlSerializer.serializeToString(container.childNodes[i]))
-        }
-        return nodes.join('')
-      })
+
+      if (task.isPng) {
+        const svg = await page.$('#container > svg')
+        return await svg.screenshot({
+          type: 'png',
+          omitBackground: true,
+        })
+      } else {
+        return await page.$eval('#container', container => {
+          const xmlSerializer = new XMLSerializer()
+          const nodes = []
+          for (let i = 0; i < container.childNodes.length; i++) {
+            nodes.push(xmlSerializer.serializeToString(container.childNodes[i]))
+          }
+          return nodes.join('')
+        })
+      }
     } catch (e) {
       console.error('Unable to convert the diagram', e)
       throw e

diff --git a/server/src/main/java/io/kroki/server/service/Mermaid.java b/server/src/main/java/io/kroki/server/service/Mermaid.java
@@ -13,11 +13,14 @@
 import io.vertx.ext.web.client.HttpResponse;
 import io.vertx.ext.web.client.WebClient;
 
+import java.util.Arrays;
 import java.util.Collections;
 import java.util.List;
 
 public class Mermaid implements DiagramService {
 
+  private static final List<FileFormat> SUPPORTED_FORMATS = Arrays.asList(FileFormat.PNG, FileFormat.SVG);
+
   private final WebClient client;
   private final String host;
   private final int port;
@@ -37,7 +40,7 @@ public String decode(String encoded) throws DecodeException {
 
   @Override
   public List<FileFormat> getSupportedFormats() {
-    return Collections.singletonList(FileFormat.SVG);
+    return SUPPORTED_FORMATS;
   }
 
   @Override