Files
mermaid/packages/mermaid-layout-elk
Sidharth Vinod 7b0b548d05 Merge branch 'neo-new-shapes' into sidv/configReturn
* neo-new-shapes:
  update type check for getTypeFromVertex
  [autofix.ci] apply automated fixes
  fixed build error
  Updated readme for renderOptions parameter and renamed to use kabab case
  Updated icon shape for background colour and icon colour
  Moving case check to parsing
  Adding case check
  Updated shape aliases
  Updated type
  Throwing error for invalid shape
  Updated insertNode to pass optional config
  Fix for amp and adjusted tests
  WIP
  Removing the ending @ sign in the shape data
2024-09-16 18:35:08 +05:30
..
2024-09-02 21:04:34 +05:30
2024-09-03 11:55:46 +02: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