Mermaid flowchart-elk no longer works in 1.10.2-dev

[nanoant]

• Searched existing issues to avoid creating duplicates.

• Confirmed that it can be reproduced in built-in themes without customized css.

  If it only exists in 3rd party themes or css, you can still report it, but please attach the theme target or the css file. We may not "fix" it, if it is caused by 3rd party themes or css styles that we cannot support.

• Searched http://support.typora.io/

---

Describe the bug
1.10.1 dev version updates mermaid to 11.3. However since 11.0 Mermaid no longer embeds elkjs (see https://github.com/mermaid-js/mermaid/releases/tag/v11.0.0 release notes) and sites/apps must install @mermaid-js/layout-elk see mermaid-js/mermaid#5049

To Reproduce
Steps to reproduce the behavior:

1. Use flowchart-elk on stable 1.9
2. Observe flowchart-elk it gives different results than flowchart
3. Update to 1.10.2 dev version
4. Observe that flowchart-elk looks exactly the same as flowchart using default Dagre engine

Expected behavior

Screenshots / Screencasts
What is see in 1.10.2-dev:

Sample Markdown File

~~~mermaid
flowchart-elk TB
A --> B((What))
A --> C
A --> D
~~~

Desktop (please complete the following information):

• OS: Mac & Windows

Typora Version
1.10.2-dev (7283) Mac, 1.10.1-dev Windows (since 1.10.2 is not available for Windows)

[nanoant]

Btw. I managed to produce mermaid.min.js including ELK again by applying following patch on mermaid@11.4.0 of https://github.com/mermaid-js/mermaid.git and running yarn install.

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 78bf58388..104ecd966 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -106,6 +106,7 @@
     "@types/prettier": "^3.0.0",
     "@types/stylis": "^4.2.5",
     "@types/uuid": "^9.0.8",
+    "@mermaid-js/layout-elk": "^0.1.5",
     "ajv": "^8.12.0",
     "chokidar": "^3.6.0",
     "concurrently": "^8.2.2",
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index e9fc9196a..158ec79c6 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -20,6 +20,7 @@ import type { LayoutData } from './rendering-util/types.js';
 import type { ParseOptions, ParseResult, RenderResult } from './types.js';
 import type { DetailedError } from './utils.js';
 import utils, { isDetailedError } from './utils.js';
+import elkLayouts from '@mermaid-js/layout-elk';
 
 export type {
   DetailedError,
@@ -456,4 +457,6 @@ const mermaid: Mermaid = {
   registerIconPacks,
 };
 
+mermaid.registerLayoutLoaders(elkLayouts);
+
 export default mermaid;

With that hack applied I now see ELK layout properly:

[nanoant]

@abnerlee Is there are a chance you restore ELK layout in Mermaid, that is now gone with recent updates? I see 1.10.3-dev has Mermaid 11.4 but not ELK. Mermaid default layout engine is horrible for large graphs. Please see instructions below how to obtain mermaid.min.js with ELK included.

[nanoant]

@abnerlee And here 8 months later and several updates bringing new Mermaid version and extra features, ELK support is still missing because mermaid maintainers decided to carve out ELK into separate module and Typora only cares about including what comes with minified base package.

What's the point of announcing all these nice new Mermaid features, if they will be removed as soon Mermaid maintainers will also moved them out into separate packages?

And yes I keep patching Typora unpackaing and packing with ASAR but it is extremely frustrating. At least Obsidian let's you easily add a plugin that injects missing functionality but I prefer Typora experience.

[jedomed]

Btw. I managed to produce mermaid.min.js including ELK again by applying following patch on mermaid@11.4.0 of https://github.com/mermaid-js/mermaid.git and running yarn install.

I couldn't figure out how to do this, but I found another way with npm. In an empty folder:

npm init -y
npm install @mermaid-js/layout-elk
npm install mermaid
npm install -g esbuild # if it's not already installed

Create an index.js file containing:

import mermaid from 'mermaid';
import elkLayouts from '@mermaid-js/layout-elk';

window.elkLayouts = elkLayouts;
window.mermaid = mermaid;

mermaid.registerLayoutLoaders(elkLayouts);

Run:

esbuild index.js --bundle --minify --outfile=mermaid-elk.min.js
# and now I have a standalone mermaid-elk.min.js to use wherever!

[eduardo-assuncao]

and now I have a standalone mermaid-elk.min.js to use wherever!

@jedomed, what I need to do with the standalone mermaid-elk.min.js to get elk layout working again in typora? Would you please share the steps?

[jedomed]

@jedomed, what I need to do with the standalone mermaid-elk.min.js to get elk layout working again in typora? Would you please share the steps?

Sorry, I'm not familiar with how Typora works. I use mermaid on a regular website, so I just added it with a <script src="memaid-elk.min.js">.