feat: add support for @mermaid-js/mermaid-zenuml

Mermaid now has support for ZenUML diagrams, but it requires using a
Mermaid plugin diagram, see https://mermaid.js.org/syntax/zenuml.html

ZenUML adds about 700 KiB to our `dist/index.html` file, or about 200
KiB when gzipped.

index.html

@@ -11,9 +11,11 @@
       import fontawesome from "@fortawesome/fontawesome-free/css/fontawesome.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
+      globalThis.zenuml = zenuml
     </script>
   </body>
 </html>

package.json

@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.6.0",
+    "@mermaid-js/mermaid-zenuml": "^0.1.1",
     "@tsconfig/node14": "^14.1.0",
     "jest": "^29.0.1",
     "mermaid": "^10.0.0",

src/index.js

@@ -249,9 +249,11 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac
        * We've already imported these modules in our `index.html` file, 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
        */
-      const { mermaid } = /** @type {GlobalThisWithMermaid & typeof globalThis} */ (globalThis)
+      const { mermaid, zenuml } = /** @type {GlobalThisWithMermaid & typeof globalThis} */ (globalThis)
 
+      await mermaid.registerExternalDiagrams([zenuml])
       mermaid.initialize({ startOnLoad: false, ...mermaidConfig })
       // should throw an error if mmd diagram is invalid
       const { svg: svgText } = await mermaid.render('my-svg', definition, container)

test-positive/zenuml.mmd

@@ -0,0 +1,7 @@
+zenuml
+    title Annotators
+    @Actor Alice
+    @Database Bob
+    Alice->Bob: Hi Bob
+    Bob->Alice: Hi Alice
+