Use mermaid.render() instead of mermaid.run() API to avoid removing whitespace from diagrams

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) => {

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
@@ -261,29 +247,10 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
        */
       const { mermaid } = /** @type {GlobalThisWithMermaid & typeof globalThis} */ (globalThis)
 
-      mermaid.initialize(mermaidConfig)
+      mermaid.initialize({ startOnLoad: false, ...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) {
@@ -449,7 +416,7 @@ async function run (input, output, { puppeteerConfig = {}, quiet = false, output
     if (input && /\.(md|markdown)$/.test(input)) {
       const imagePromises = []
       for (const mermaidCodeblockMatch of definition.matchAll(mermaidChartsInMarkdownRegexGlobal)) {
-        const mermaidDefinition = mermaidCodeblockMatch[1]
+        const mermaidDefinition = mermaidCodeblockMatch[2]
 
         /** Output can be either a template image file, or a `.md` output file.
          *   If it is a template image file, use that to created numbered diagrams

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 {
+    }