badboy/mdbook-mermaid

Using ELK layout with mermaid v11

isma-xnm opened this issue · 2 comments

It seems like layout: "elk" does not work with the bundled mermaid.min.js due to ELK layout not being included by default.
Additionally, it seems like the @mermaid-js/layout-elk package only supports ESM (which doesn't work with mdbook's additional-js option).
This can be fixed by manually editing the mermaid build script and adding IIFE builds for elk-layout:

index 2bb42a557..68bbf7528 100644
--- a/.esbuild/build.ts
+++ b/.esbuild/build.ts
@@ -22,7 +22,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
     { ...commonOptions, core: true },
   ];

-  if (entryName === 'mermaid') {
+  if (entryName === 'mermaid' || entryName === 'mermaid-layout-elk') {
     const iifeOptions: MermaidBuildOptions = { ...commonOptions, format: 'iife' };
     buildConfigs.push(
       // mermaid.js
diff --git a/.esbuild/util.ts b/.esbuild/util.ts
index 522176113..82c24c3a4 100644
--- a/.esbuild/util.ts
+++ b/.esbuild/util.ts
@@ -84,11 +84,12 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   if (format === 'iife') {
     output.format = 'iife';
     output.splitting = false;
-    output.globalName = '__esbuild_esm_mermaid';
+    const globalName = name.replace(/-([a-z])/gm, (_, c) => c.toUpperCase());
+    output.globalName = '__esbuild_esm_' + globalName;
     // Workaround for removing the .default access in esbuild IIFE.
     // https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396
     output.footer = {
-      js: 'globalThis.mermaid = globalThis.__esbuild_esm_mermaid.default;',
+      js: `globalThis.${globalName} = globalThis.__esbuild_esm_${globalName}.default;`,
     };
     output.outExtension = { '.js': '.js' };
   } else {

...loading the built module in book.toml...

[output.html]
additional-js = ["mermaid.min.js", "mermaid-layout-elk.min.js", "mermaid-init.js"]

...and then loading the layouts in mermaid-init.js:

    mermaid.registerLayoutLoaders(mermaidLayoutElk);

This works, but I'm not sure where (or if) to create PRs. If nothing else, perhaps this helps someone else with the same problem.
Adding the patch and a pre-built js file (if you trust it).

mermaid-elk-iife.patch
mermaid-layout-elk.min.js.zip

We default-bundle the minified generated mermaid file directly from unpkg.com.
We don't change it nor do we touch its build system.
It's easy enough for anyone to swap out what they deploy though.

We default-bundle the minified generated mermaid file directly from unpkg.com.
We don't change it nor do we touch its build system.

No, yeah, I get that. The problem is that there is no mdbook-compatible script on Unpkg for ELK:
https://unpkg.com/browse/@mermaid-js/layout-elk@0.1.5/dist/

That means that using another layout doesn't work, and there is no easy way to fix it for a user (since there are no unpkg artifacts that are compatible).

I get that you don't want to just bundle a patched version directly, I just wanted to share how I got it working for any other user that wants to use the new layout engines. Finding a suitable way to solve it and/or just adding a mention in the docs was more what I had in mind.

If you are not interested in adding a solution for this, perhaps you could close this as wont fix instead of completed (since the issue is still there)?