marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-08 10:06:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve elk section of ER docs

Browse Source
This commit is contained in:
Alois Klink
2025-04-07 16:07:43 +08:00
parent 0104d19f66
commit de72e18a7f
2 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/syntax/entityRelationshipDiagram.md
View File

@@ -625,17 +625,43 @@ erDiagram
## Configuration ## Configuration
### Renderer ### Layout
The layout of the diagram is done with the renderer. The default renderer is dagre. The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.
You can opt to use an alternate renderer named elk by editing the configuration. The elk renderer is better for larger and/or more complex diagrams. For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).
```yaml
---
config:
layout: elk
---
``` ```
Your Mermaid code should be similar to the following:
```mermaid-example
--- ---
config: title: Order example
layout: elk config:
layout: elk
--- ---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
```mermaid
---
title: Order example
config:
layout: elk
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
``` ```
> **Note** > **Note**

12
packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
View File

@@ -407,23 +407,22 @@ erDiagram
## Configuration ## Configuration
### Renderer ### Layout
The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre. The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.
For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md). For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).
``` ```yaml
--- ---
config: config:
layout: elk layout: elk
--- ---
``` ```
Your Mermaid code should be similar to the following: Your Mermaid code should be similar to the following:
``````mermaid-example ```mermaid-example
```mermaid
--- ---
title: Order example title: Order example
config: config:
@@ -434,7 +433,6 @@ erDiagram
ORDER ||--|{ LINE-ITEM : contains ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
``` ```
``````
```note ```note
Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration. Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.