Support for ELK flowchart renderer

[butterlyn]

Unable to select elk renderer for flowcharts.

The following plugin configuration results in the diagram rendering with the default (i.e., non-elk) renderer:

plugins:
  - mermaid2:
      version: 11.4.0
      arguments:
        layout: elk
        securityLevel: loose

plugins:
  - mermaid2:
      version: 11.4.0
      arguments:
        flowchart:
          defaultRenderer: elk
        securityLevel: loose

Inserting the following directly into the diagram is also ignored (see mermaid docs):

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

I am using MkDocs with Material theme.

[github-actions[bot]]

Thank you for your contribution! This is very appreciated.

[fralau]

I am not famiiar with elk, but the most plausible explanation is contained in the website's warning:

The ELK Layout engine will not be available in all providers that support mermaid by default. The websites will have to install the @mermaid-js/layout-elk package to use the ELK layout engine.

The way you do "install", I guess, would be to make this javascript package available to the web page (conside MkDocs with Mermaid2 as a canvas with a few things already drawn on it; you must add what is missing). Adding javascript libraries is done in MkDocs through the extra_javascript parameter in the configuration file.

The official documentation is pretty good. It does't say, however that refering to a URL is permissible. (@waylan : Should I open an issue for the doc of MkDocs, or submit a PR?)

Something like this should work:

extra_javascript:
  - https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@11/dist/mermaid-layout-elk.esm.min.mjs     

By experience, you will probably have to play around until you get it right.

[butterlyn]

@fralau Thanks for the help - started tinkering but no luck so far. What I've tried:

extra_javascript:
  - https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@11/dist/mermaid-layout-elk.esm.min.mjs     

extra_javascript:
  - js/elk-mermaid.js

With js/elk-mermaid.js:

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@11/dist/mermaid-layout-elk.esm.min.mjs';

  mermaid.registerLayoutLoaders(elkLayouts);
</script>

I've also tried:

• All the above but with:
  • https://www.npmjs.com/package/@mermaid-js/flowchart-elk
  • https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk/dist/mermaid-layout-elk.esm.min.mjs
  • https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk/dist/mermaid-layout-elk.esm.mjs

[Bizordec]

@butterlyn you almost got it right, here is a working solution:

mkdocs.yaml

extra_javascript:
  - js/elk-mermaid.mjs

js/elk-mermaid.mjs

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/[email protected]/dist/mermaid-layout-elk.esm.min.mjs';

mermaid.registerLayoutLoaders(elkLayouts);

window.mermaid = mermaid;