From 69c5fc75395d670a3750ab83b6012810d7f3dab9 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 4 May 2023 22:45:39 +0100
Subject: [PATCH] fix: use `mermaid.render()` instead of `.run()`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently, `mermaid-cli` renders mermaid diagrams by:

mmd code → HTML `<div>` contexts → mermaid.run() → HTML `<svg>`

However, when converting the mmd code to HTML `<div>`, newlines and
whitespace formatting may get removed. For the majority of diagrams,
this is no issue, but for some diagrams (e.g. classDiagram), whitespace
does matter.

The mermaid API has a `mermaid.render()` function that we can use
instead, which parses in mmd code directly, without having to go
through a HTML element first:

mmd code →  mermaid.render() →  SVG →  HTML `<svg>`

As an aditional benefit, we get better error messages from Mermaid too!

Fixes: https://github.com/mermaid-js/mermaid-cli/issues/532
---
 src-test/test.js                  |  2 +-
 src/index.js                      | 37 ++-----------------------------
 test-positive/classDiagram-v2.mmd |  9 ++++++++
 3 files changed, 12 insertions(+), 36 deletions(-)
 create mode 100644 test-positive/classDiagram-v2.mmd

diff --git a/src-test/test.js b/src-test/test.js
index 6b81d518..c1f12823 100644
--- a/src-test/test.js
+++ b/src-test/test.js
@@ -407,7 +407,7 @@ describe("NodeJS API (import ... from '@mermaid-js/mermaid-cli')", () => {
       const invalidMMDInput = 'this is not a valid mermaid file'
       expect(
         parseMMD(browser, invalidMMDInput, 'svg')
-      ).rejects.toThrow('Evaluation failed: Error: No diagram type detected matching given configuration for text: this is not a valid mermaid file')
+      ).rejects.toThrow('Evaluation failed: UnknownDiagramError: No diagram type detected matching given configuration for text: this is not a valid mermaid file')
     })
 
     describe.each(workflows)('testing workflow %s', (workflow) => {
diff --git a/src/index.js b/src/index.js
index 03f5bb05..dac55036 100644
--- a/src/index.js
+++ b/src/index.js
@@ -239,20 +239,6 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
       body.style.background = backgroundColor
     }, backgroundColor)
     const metadata = await page.$eval('#container', async (container, definition, mermaidConfig, myCSS, backgroundColor) => {
-      /**
-       * Checks to see if the given object is one of Mermaid's DetailedErrors.
-       *
-       * @param {unknown} error - The error to check
-       * @returns {error is import("mermaid").DetailedError} Returns `true` is the `error`
-       * is a `Mermaid.DetailedError`.
-       * @see https://github.com/mermaid-js/mermaid/blob/v10.0.1/packages/mermaid/src/utils.ts#L927-L930
-       */
-      function isDetailedError (error) {
-        return typeof error === 'object' && error !== null && 'str' in error
-      }
-
-      container.textContent = definition
-
       /**
        * @typedef {Object} GlobalThisWithMermaid
        * We've already imported these modules in our `index.html` file, so that they
@@ -263,27 +249,8 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
 
       mermaid.initialize(mermaidConfig)
       // should throw an error if mmd diagram is invalid
-      try {
-        await mermaid.run({
-          nodes: [
-            /**
-             * @type {HTMLElement} We know this is a `HTMLElement`, since we
-             * control the input HTML file
-             */ (container)
-          ],
-          suppressErrors: false
-        })
-      } catch (error) {
-        if (error instanceof Error) {
-          // mermaid-js doesn't currently throws JS Errors, but let's leave this
-          // here in case it does in the future
-          throw error
-        } else if (isDetailedError(error)) {
-          throw new Error(error.message)
-        } else {
-          throw new Error(`Unknown mermaid render error: ${error}`)
-        }
-      }
+      const { svg: svgText } = await mermaid.render('my-svg', definition, container)
+      container.innerHTML = svgText
 
       const svg = container.getElementsByTagName?.('svg')?.[0]
       if (svg?.style) {
diff --git a/test-positive/classDiagram-v2.mmd b/test-positive/classDiagram-v2.mmd
new file mode 100644
index 00000000..0be6cd69
--- /dev/null
+++ b/test-positive/classDiagram-v2.mmd
@@ -0,0 +1,9 @@
+---
+# This test is for issue https://github.com/mermaid-js/mermaid-cli/issues/532
+title: Empty class diagram v2 structs
+---
+classDiagram-v2
+    class Pancake {
+    }
+    class Waffle {
+    }