Mermaid flowchart-elk no longer works in 1.10.2-dev

[nanoant]

• [x] Searched existing issues to avoid creating duplicates.

• [x] 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.

• [x] 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 https://github.com/mermaid-js/mermaid/pull/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: