@mermaid-js/layout-elk
This package provides a layout engine for Mermaid based on the ELK layout engine.
[!NOTE]
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.
Usage
flowchart-elk TD
A --> B
A --> C
---
config:
layout: elk
---
flowchart TD
A --> B
A --> C
---
config:
layout: elk.stress
---
flowchart TD
A --> B
A --> C
With bundlers
npm install @mermaid-js/layout-elk
import mermaid from 'mermaid';
import elkLayouts from '@mermaid-js/layout-elk';
mermaid.registerLayoutLoaders(elkLayouts);
With CDN
<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>
Supported layouts
elk
: The default layout, which is elk.layered
.elk.layered
: Layered layoutelk.stress
: Stress layoutelk.force
: Force layoutelk.mrtree
: Multi-root tree layoutelk.sporeOverlap
: Spore overlap layout