From c535b10534a5e6345e0e458c66e1cfb4ff2ca64e Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 22 Dec 2022 11:00:30 +0100
Subject: [PATCH] Adding info in the docs for enabling elk flowcharts.

---
 docs/syntax/flowchart.md                      | 14 +++++++++++++-
 packages/mermaid/src/docs/syntax/flowchart.md | 16 +++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 8b3859f8a..fa410623d 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -990,7 +990,19 @@ flowchart LR
     C -->|Two| E[Result two]
 ```
 
-## Configuration...
+## Configuration
+
+### Renderer
+
+The layout of the flowchart diagram can be don in multiple ways. The default rendering is done using an algorithm called dagre. It is possible to use another algorithm called **elk** for rendering flowcharts which is better for large and more complex diagrams. This is an expermental feature but worth exploring.
+
+This can be enabled using directives by adding this in the diagram code:
+
+    %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+
+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.
+
+### Width
 
 It is possible to adjust the width of the rendered flowchart.
 
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 7f8284a2f..a66f795b7 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -669,7 +669,21 @@ flowchart LR
     C -->|Two| E[Result two]
 ```
 
-## Configuration...
+## Configuration
+
+### Renderer
+
+The layout of the flowchart diagram can be don in multiple ways. The default rendering is done using an algorithm called dagre. It is possible to use another algorithm called **elk** for rendering flowcharts which is better for large and more complex diagrams. This is an expermental feature but worth exploring.
+
+This can be enabled using directives by adding this in the diagram code:
+
+```
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+```
+
+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.
+
+### Width
 
 It is possible to adjust the width of the rendered flowchart.