From 0104d19f6602800d18f3759bb0d0164bf4d750be Mon Sep 17 00:00:00 2001 From: isaiah robinson <95643215+internetisaiah@users.noreply.github.com> Date: Thu, 27 Mar 2025 15:47:43 -0700 Subject: [PATCH 1/2] Fix formatting of ELK example in ERD + clarify usage --- .../docs/syntax/entityRelationshipDiagram.md | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md index 46fb7ee86..cb0db0844 100644 --- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md +++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md @@ -409,17 +409,33 @@ erDiagram ### Renderer -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). ``` --- - config: - layout: elk +config: + layout: elk --- ``` +Your Mermaid code should be similar to the following: + +``````mermaid-example +```mermaid +--- +title: Order example +config: + layout: elk +--- +erDiagram + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses +``` +`````` + ```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. ``` From de72e18a7fa0894f9eac5c60670299dfc7a533fc Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Mon, 7 Apr 2025 16:07:43 +0800 Subject: [PATCH 2/2] docs: improve elk section of ER docs --- docs/syntax/entityRelationshipDiagram.md | 36 ++++++++++++++++--- .../docs/syntax/entityRelationshipDiagram.md | 12 +++---- 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md index 3dec08524..4ec776c10 100644 --- a/docs/syntax/entityRelationshipDiagram.md +++ b/docs/syntax/entityRelationshipDiagram.md @@ -625,17 +625,43 @@ erDiagram ## 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: - layout: elk +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** diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md index cb0db0844..600d50723 100644 --- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md +++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md @@ -407,23 +407,22 @@ erDiagram ## Configuration -### Renderer +### Layout 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: - layout: elk + layout: elk --- ``` Your Mermaid code should be similar to the following: -``````mermaid-example -```mermaid +```mermaid-example --- title: Order example config: @@ -434,7 +433,6 @@ erDiagram ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses ``` -`````` ```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.