chore(deps)!: upgrade to Mermaid v11

Mermaid v11 has a new `@mermaid-js/layout-elk` package that needs to be
setup for old `flowchart-elk` diagrams to continue to work.

BREAKING CHANGE: Mermaid v11 has some breaking changes, see
                 https://github.com/mermaid-js/mermaid/releases/tag/v11.0.0

Co-authored-by: Alois Klink <alois@aloisklink.com>

index.html

@@ -12,9 +12,11 @@
       import "katex/dist/katex.css"
 
       import zenuml from "@mermaid-js/mermaid-zenuml"
+      import elkLayouts from "@mermaid-js/layout-elk"
 
       // expose zenuml to the global scope so that puppeteer can see it
       globalThis.zenuml = zenuml
+      globalThis.elkLayouts = elkLayouts
     </script>
   </body>
 </html>

package.json

@@ -31,13 +31,14 @@
   "dependencies": {
     "chalk": "^5.0.1",
     "commander": "^12.1.0",
-    "mermaid": "^10.8.0"
+    "mermaid": "^11.0.2"
   },
   "peerDependencies": {
     "puppeteer": "^19 || ^20 || ^21 || ^22"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@mermaid-js/layout-elk": "^0.1.2",
     "@mermaid-js/mermaid-zenuml": "^0.2.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/node": "~18.19.31",

src/index.js

@@ -244,10 +244,12 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
        * 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
+       * @property {import("@mermaid-js/layout-elk")["default"]} elkLayouts Already imported mermaid-elkLayouts instance
        */
-      const { mermaid, zenuml } = /** @type {GlobalThisWithMermaid & typeof globalThis} */ (globalThis)
+      const { mermaid, zenuml, elkLayouts } = /** @type {GlobalThisWithMermaid & typeof globalThis} */ (globalThis)
 
       await mermaid.registerExternalDiagrams([zenuml])
+      mermaid.registerLayoutLoaders(elkLayouts)
       mermaid.initialize({ startOnLoad: false, ...mermaidConfig })
       // should throw an error if mmd diagram is invalid
       const { svg: svgText } = await mermaid.render(svgId || 'my-svg', definition, container)

test-positive/config-noUseMaxWidth.json

@@ -28,6 +28,12 @@
     "requirement": {
         "useMaxWidth": false
     },
+    "sankey": {
+        "useMaxWidth": false
+    },
+    "gitGraph": {
+        "useMaxWidth": false
+    },
     "c4": {
         "useMaxWidth": false
     }

test-positive/mermaid.md

@@ -154,3 +154,16 @@ title: My flowchart with KaTeX in it.
 flowchart LR
   A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
 ```
+
+11. Flowchart using Elk and handDrawn look
+
+```mermaid
+---
+config:
+    look: handDrawn
+    layout: elk
+    handDrawnSeed: 1 # this is so visual regression tests are constant
+---
+flowchart LR
+    A --> B --> C & D
+```