mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00

History

Alois Klink 6cc0132e0a refactor(elk): add LabelData type for layout-elk

I don't know what exactly the type does or is for, but I've tried to
type it to what it seems to be.

2024-10-21 22:23:36 +09:00

src

refactor(elk): add LabelData type for layout-elk

2024-10-21 22:23:36 +09:00

CHANGELOG.md

Version Packages

2024-10-03 14:40:03 +00:00

package.json

Version Packages

2024-10-03 14:40:03 +00:00

README.md

chore: Use spaces

2024-08-21 16:23:56 +05:30

tsconfig.json

feat: Remove direct file dependency of mermaid from elk, by using peerDependency.

2024-05-22 17:01:34 +05:30

README.md

@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