mermaid: Allow using `elk` layout

[NightTsarina]

Feature Description

Hi,

I love the ability to use Mermaid directly from markdown, but there is one very useful feature missing: the ability to use the "elk" layout/renderer.

I tried both the layout and defaultRenderer configuration options (still not sure what's the difference), and passing those via front-matter and directives, but none seems to work.

Code:

---
config:
  layout: elk
  flowchart:
    defaultRenderer: elk
---
%%{ init: { "layout": "elk", "flowchart": { "defaultRenderer": "elk" } } }%%
flowchart TB
  A --> B
  A --> C --> B

Screenshots

Rendered with the live editor, setting layout: dagre and layout: elk:

With Gitea:

[silverwind]

Can you find out how this is configured with the mermaid library? I suppose we could introduce a app configuration option for it, maybe more.

[NightTsarina]

Can you find out how this is configured with the mermaid library? I suppose we could introduce a app configuration option for it, maybe more.

The documentation is not clear, but it seems that just adding the @mermaid-js/layout-elk NPM package would be enough.

[silverwind]

I guess we could add that package and conditionally call mermaid.registerLayoutLoaders when a certain app.ini setting like markup.MERMAID_LAYOUT = "elk" is set.

[foto-andreas]

This would be real cool. On mermaid.ai the local configuration is done as follows:

---
config:
  look: neo
  layout: elk
---

in Front of the code. I do not know if any app.ini setting is useful if this would change all rendering globally.

Andreas

[foto-andreas]

There should be two changes in code:

Subject: [PATCH] Include elk-Layout
---
Index: package.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/package.json b/package.json
--- a/package.json	(revision 1adf8b3773aba0ce51bd6cdbe95f9bdd27132a6a)
+++ b/package.json	(revision 99ea35c3e177202ef3de8598a3d140579da43b33)
@@ -14,6 +14,7 @@
     "@github/paste-markdown": "1.5.3",
     "@github/relative-time-element": "5.0.0",
     "@github/text-expander-element": "2.9.4",
+    "@mermaid-js/layout-elk": "0.2.0",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@primer/octicons": "19.21.2",
     "@resvg/resvg-wasm": "2.6.2",
Index: pnpm-lock.yaml
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
--- a/web_src/js/markup/mermaid.ts	(revision 1adf8b3773aba0ce51bd6cdbe95f9bdd27132a6a)
+++ b/web_src/js/markup/mermaid.ts	(revision 99ea35c3e177202ef3de8598a3d140579da43b33)
@@ -3,6 +3,7 @@
 import {displayError} from './common.ts';
 import {queryElems} from '../utils/dom.ts';
 import {html, htmlRaw} from '../utils/html.ts';
+import elkLayouts from '@mermaid-js/layout-elk';
 
 const {mermaidMaxSourceCharacters} = window.config;
 
@@ -15,6 +16,7 @@
   queryElems(elMarkup, 'code.language-mermaid', async (el) => {
     const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid');
 
+    mermaid.registerLayoutLoaders(elkLayouts)
     mermaid.initialize({
       startOnLoad: false,
       theme: isDarkTheme() ? 'dark' : 'neutral',

I can create a PR if you'd like to integrate it.

[silverwind]

@foto-andreas change seems good but it needs to be a opt-in (because I assume there must be reasons why this is not the default layout engine). I will take a look at adding a setting for this.

[silverwind]

Ah I see it works as opt-in using directives in the mermaid code block, so we can simply add the loader without needing a config option.

[silverwind]

Will be fixed with #36486.

[foto-andreas]

Very Nice! Thanks!

Andreas

[wxiaoguang]

You can try the nightly build:

• https://dl.gitea.com/gitea/main-nightly/
• https://hub.docker.com/r/gitea/gitea/tags?name=main-nightly

And it has new features like "zooming and dragging the mermaid graph"

[NightTsarina]

Thank you all!