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.