mermaid/packages/mermaid-layout-elk
Alois Klink 16a5fc05d6 refactor: remove some any types from render()
This let's us confirm that the types we're passing to `insertNode()` are
valid.
2024-10-18 01:51:53 +09:00
..
2024-10-03 14:40:03 +00:00
2024-10-03 14:40:03 +00:00
2024-08-21 16:23:56 +05:30

@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 layout
  • elk.stress: Stress layout
  • elk.force: Force layout
  • elk.mrtree: Multi-root tree layout
  • elk.sporeOverlap: Spore overlap layout