marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-07 17:46:44 +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

34
docs/syntax/entityRelationshipDiagram.md
View File

@@ -625,19 +625,45 @@ 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: config:
layout: elk layout: elk
--- ---
``` ```
Your Mermaid code should be similar to the following:
```mermaid-example
---
title: Order example
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**
> 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.

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

@@ -407,13 +407,13 @@ 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
@@ -422,8 +422,7 @@ config:
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.