Mermaid suports the ELK layout engine:
mermaid diagrams starting with:
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
or
---
config:
layout: elk
---
Are rendered using elk instead of dagre.
The version of mermaid that is used in vivify does not support ELK layout.
This is split of in another library in mermaid.
solution hint :
I have looked into the code, and this can quite easily be changed in the static/client.mjs file
changing the imports to
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@0/dist/mermaid-layout-elk.esm.min.mjs';
mermaid.registerLayoutLoaders(elkLayouts);
and initialise mermaid like this:
mermaid.initialize({
startOnLoad: true,
theme: darkModePreference.matches ? 'dark' : 'default',
flowchart: {
useELK: true,
elk: elkLayouts
}
});
When I compile the code like that, the elk engine is used.
Mermaid suports the ELK layout engine:
mermaid diagrams starting with:
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%or
Are rendered using elk instead of dagre.
The version of mermaid that is used in vivify does not support ELK layout.
This is split of in another library in mermaid.
solution hint :
I have looked into the code, and this can quite easily be changed in the static/client.mjs file
changing the imports to
and initialise mermaid like this:
When I compile the code like that, the elk engine is used.