# @mermaid-js/layout-elk

> ELK layout engine for mermaid builds that do not bundle it (e.g. mermaid.tiny.js)

Latest version **1.0.0** (published 2026-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mermaid-js/layout-elk
pnpm add @mermaid-js/layout-elk
yarn add @mermaid-js/layout-elk
bun add @mermaid-js/layout-elk
```

## Health

**Score 80/100 (A)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo; extremely popular.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2026-09-10 |
| First published | 2024-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=22.12.0 |
| Dependencies | 6 |
| Unpacked size | 26.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 90169 |
| Maintainers | knsv, ugnikalnis, ashishjain0512, sidv, aloisklink, p_brolin47 |
| Keywords | diagram, markdown, elk, mermaid |

## Links

- npm: https://www.npmjs.com/package/@mermaid-js/layout-elk
- Repository: https://github.com/mermaid-js/mermaid
- Homepage: https://github.com/mermaid-js/mermaid#readme
- Issues: https://github.com/mermaid-js/mermaid/issues
- npm.io page: https://npm.io/package/@mermaid-js/layout-elk

## Dependencies (6)

- [d3](https://npm.io/package/d3.md) ^7.9.0
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.21
- [elkjs](https://npm.io/package/elkjs.md) ^0.9.3
- [katex](https://npm.io/package/katex.md) ^0.16.47
- [dompurify](https://npm.io/package/dompurify.md) ^3.4.12
- [dagre-d3-es](https://npm.io/package/dagre-d3-es.md) 7.0.14

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2026-09-10
- 0.2.3 — 2026-08-19
- 0.2.2 — 2026-06-25
- 0.2.1 — 2026-03-09
- 0.2.0 — 2025-09-04
- 0.1.9 — 2025-08-19
- 0.1.8 — 2025-06-20
- 0.1.7 — 2024-11-27
- 0.1.6 — 2024-11-27
- 0.1.5 — 2024-10-03
- 0.1.4 — 2024-09-09
- 0.1.3 — 2024-09-02
- 0.1.2 — 2024-08-24
- 0.1.1 — 2024-08-24
- 0.1.0 — 2024-08-23

## README

# @mermaid-js/layout-elk

The [ELK](https://www.eclipse.org/elk/) layout engine for Mermaid.

> [!IMPORTANT]
> **Most projects no longer need this package.** ELK is bundled with `mermaid`
> and registered automatically, and it is the default layout — a plain
> `flowchart` is laid out with ELK without any configuration.
>
> This package exists for Mermaid builds that ship without ELK, which today
> means the **tiny** build (`mermaid.tiny.js`). There, registering it is the
> only way to get an ELK layout.

## Do I need it?

| Using                                   | Need this package?                      |
| --------------------------------------- | --------------------------------------- |
| `mermaid` (any normal build, incl. CDN) | No — ELK is built in and is the default |
| `mermaid.tiny.js`                       | Yes, if you want ELK                    |

If you are on a normal build, delete the dependency and the registration call:

```diff
  import mermaid from 'mermaid';
- import elkLayouts from '@mermaid-js/layout-elk';
-
- mermaid.registerLayoutLoaders(elkLayouts);
```

Registering it anyway is harmless — it re-registers the same layouts — but it
loads a second copy of the layout code for no benefit.

## Usage

```sh
npm install @mermaid-js/layout-elk
```

```ts
import mermaid from 'mermaid';
import elkLayouts from '@mermaid-js/layout-elk';

mermaid.registerLayoutLoaders(elkLayouts);
```

### With CDN

```html
<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@0/dist/mermaid-layout-elk.esm.min.mjs';

  mermaid.registerLayoutLoaders(elkLayouts);
</script>
```

## Supported layouts

- `elk` — the default, which is `elk.layered`
- `elk.stress` — stress layout
- `elk.force` — force layout
- `elk.mrtree` — multi-root tree layout
- `elk.sporeOverlap` — spore overlap layout
- `elk.box` — box packing
- `elk.rectpacking` — rectangle packing

```
---
config:
  layout: elk.stress
---

flowchart TD
  A --> B
  A --> C
```

A single container can also select its own algorithm with `@{ algorithm: … }`,
which additionally accepts `elk.layered` and `elk.radial`.

<!-- TODO: Add images for these layouts, as GitHub doesn't support natively. -->

---
_Source: https://npm.io/package/@mermaid-js/layout-elk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._