| 1 | # @mermaid-js/layout-elk |
| 2 | |
| 3 | This package provides a layout engine for Mermaid based on the [ELK](https://www.eclipse.org/elk/) layout engine. |
| 4 | |
| 5 | > [!NOTE] |
| 6 | > The ELK Layout engine will not be available in all providers that support mermaid by default. |
| 7 | > The websites will have to install the `@mermaid-js/layout-elk` package to use the ELK layout engine. |
| 8 | |
| 9 | ## Usage |
| 10 | |
| 11 | ``` |
| 12 | flowchart-elk TD |
| 13 | A --> B |
| 14 | A --> C |
| 15 | ``` |
| 16 | |
| 17 | ``` |
| 18 | --- |
| 19 | config: |
| 20 | layout: elk |
| 21 | --- |
| 22 | |
| 23 | flowchart TD |
| 24 | A --> B |
| 25 | A --> C |
| 26 | ``` |
| 27 | |
| 28 | ``` |
| 29 | --- |
| 30 | config: |
| 31 | layout: elk.stress |
| 32 | --- |
| 33 | |
| 34 | flowchart TD |
| 35 | A --> B |
| 36 | A --> C |
| 37 | ``` |
| 38 | |
| 39 | ### With bundlers |
| 40 | |
| 41 | ```sh |
| 42 | npm install @mermaid-js/layout-elk |
| 43 | ``` |
| 44 | |
| 45 | ```ts |
| 46 | import mermaid from 'mermaid'; |
| 47 | import elkLayouts from '@mermaid-js/layout-elk'; |
| 48 | |
| 49 | mermaid.registerLayoutLoaders(elkLayouts); |
| 50 | ``` |
| 51 | |
| 52 | ### With CDN |
| 53 | |
| 54 | ```html |
| 55 | <script type="module"> |
| 56 | import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; |
| 57 | import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@0/dist/mermaid-layout-elk.esm.min.mjs'; |
| 58 | |
| 59 | mermaid.registerLayoutLoaders(elkLayouts); |
| 60 | </script> |
| 61 | ``` |
| 62 | |
| 63 | ## Supported layouts |
| 64 | |
| 65 | - `elk`: The default layout, which is `elk.layered`. |
| 66 | - `elk.layered`: Layered layout |
| 67 | - `elk.stress`: Stress layout |
| 68 | - `elk.force`: Force layout |
| 69 | - `elk.mrtree`: Multi-root tree layout |
| 70 | - `elk.sporeOverlap`: Spore overlap layout |
| 71 | |
| 72 | <!-- TODO: Add images for these layouts, as GitHub doesn't support natively. --> |
| 73 | |