fix: use mermaid IFFE instead of bundling mermaid

index.html

@@ -9,12 +9,11 @@
       import faRegular from "@fortawesome/fontawesome-free/css/regular.css"
       import faSolid from "@fortawesome/fontawesome-free/css/solid.css"
       import fontawesome from "@fortawesome/fontawesome-free/css/fontawesome.css"
+      import katex from "katex/dist/katex.css"
 
-      import mermaid from "mermaid"
       import zenuml from "@mermaid-js/mermaid-zenuml"
 
-      // expose mermaid to the global scope so that puppeteer can see it
-      globalThis.mermaid = mermaid
+      // expose zenuml to the global scope so that puppeteer can see it
       globalThis.zenuml = zenuml
     </script>
   </body>

package.json

@@ -31,14 +31,14 @@
   "dependencies": {
     "chalk": "^5.0.1",
     "commander": "^10.0.0",
+    "mermaid": "^10.8.0",
     "puppeteer": "^19.0.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.6.0",
     "@mermaid-js/mermaid-zenuml": "^0.2.0",
     "@tsconfig/node14": "^14.1.0",
     "jest": "^29.0.1",
-    "mermaid": "^10.0.0",
     "standard": "^17.0.0",
     "typescript": "^5.0.1-rc",
     "vite": "^4.0.3",

src/index.js

@@ -12,6 +12,13 @@ const pkg = require('../package.json')
 // __dirname is not available in ESM modules by default
 const __dirname = url.fileURLToPath(new url.URL('.', import.meta.url))
 
+/**
+ * Mermaid.js IFFE path.
+ *
+ * Importing this in a browser adds a global `mermaid` object.
+ */
+const mermaidIIFEPath = path.resolve(path.dirname(require.resolve('mermaid')), 'mermaid.js')
+
 /**
  * Prints an error to stderr, then closes with exit code 1
  *
@@ -245,13 +252,14 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
     await page.$eval('body', (body, backgroundColor) => {
       body.style.background = backgroundColor
     }, backgroundColor)
+    await page.addScriptTag({ path: mermaidIIFEPath })
     const metadata = await page.$eval('#container', async (container, definition, mermaidConfig, myCSS, backgroundColor, svgId) => {
       await Promise.all(Array.from(document.fonts, (font) => font.load()))
 
       /**
        * @typedef {Object} GlobalThisWithMermaid
-       * We've already imported these modules in our `index.html` file, so that they
-       * get correctly bundled.
+       * We've already imported these modules in our `index.html` file (or by running `page.addScriptTag`),
+       * so that they get correctly bundled.
        * @property {import("mermaid")["default"]} mermaid Already imported mermaid instance
        * @property {import("@mermaid-js/mermaid-zenuml")["default"]} zenuml Already imported mermaid-zenuml instance
        */

test-positive/mermaid.md

@@ -144,3 +144,13 @@ stateDiagram
 ```   
 
 **Warning**: do not delete the trailing spaces after the \`\`\`
+
+10. Flowchart with KaTeX in it
+
+```mermaid
+---
+title: My flowchart with KaTeX in it.
+---
+flowchart LR
+  A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
+```

yarn.lock

@@ -1800,6 +1800,11 @@ commander@^4.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -3942,6 +3947,13 @@ json5@^2.2.1:
     array-includes "^3.1.1"
     object.assign "^4.1.1"
 
+katex@^0.16.9:
+  version "0.16.9"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.9.tgz#bc62d8f7abfea6e181250f85a56e4ef292dcb1fa"
+  integrity sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==
+  dependencies:
+    commander "^8.3.0"
+
 khroma@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.0.0.tgz#7577de98aed9f36c7a474c4d453d94c0d6c6588b"
@@ -4119,10 +4131,10 @@ merge2@^1.3.0:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mermaid@^10.0.0:
-  version "10.8.0"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.8.0.tgz#557123be494e216a9173bbaca3b5be5551428644"
-  integrity sha512-9CzfSreRjdDJxX796+jW4zjEq0DVw5xVF0nWsqff8OTbrt+ml0TZ5PyYUjjUZJa2NYxYJZZXewEquxGiM8qZEA==
+mermaid@^10.8.0:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.9.0.tgz#4d1272fbe434bd8f3c2c150554dc8a23a9bf9361"
+  integrity sha512-swZju0hFox/B/qoLKK0rOxxgh8Cf7rJSfAUc1u8fezVihYMvrJAS45GzAxTVf4Q+xn9uMgitBcmWk7nWGXOs/g==
   dependencies:
     "@braintree/sanitize-url" "^6.0.1"
     "@types/d3-scale" "^4.0.3"
@@ -4135,6 +4147,7 @@ mermaid@^10.0.0:
     dayjs "^1.11.7"
     dompurify "^3.0.5"
     elkjs "^0.9.0"
+    katex "^0.16.9"
     khroma "^2.0.0"
     lodash-es "^4.17.21"
     mdast-util-from-markdown "^1.3.0"