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