From e499f700ce058524bcdc824ccb1ef7815c560986 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 23 Aug 2024 17:41:24 +0200
Subject: [PATCH] Updates to information about the new syntax

---
 docs/intro/syntax-reference.md                | 45 ++++++-------------
 .../src/docs/intro/syntax-reference.md        | 25 +++++------
 2 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/docs/intro/syntax-reference.md b/docs/intro/syntax-reference.md
index 2c204ba120..006b6f3f78 100644
--- a/docs/intro/syntax-reference.md
+++ b/docs/intro/syntax-reference.md
@@ -147,7 +147,7 @@ You can specify the layout algorithm directly in the metadata section of your Me
 config:
   layout: elk
   look: handdrawn
-  theme: forest
+  theme: dark
 ---
 flowchart TB
   A[Start] --> B{Decision}
@@ -160,7 +160,7 @@ flowchart TB
 config:
   layout: elk
   look: handdrawn
-  theme: forest
+  theme: dark
 ---
 flowchart TB
   A[Start] --> B{Decision}
@@ -176,14 +176,14 @@ When using the ELK layout, you can further refine the diagram’s configuration,
 
 - To combine parallel edges, use mergeEdges: true | false.
 - To configure node placement, use nodePlacementStrategy with the following options:
-  o SIMPLE
-  o NETWORK_SIMPLEX
-  o LINEAR_SEGMENTS
-  o BRANDES_KOEPF (default)
+  - SIMPLE
+  - NETWORK_SIMPLEX
+  - LINEAR_SEGMENTS
+  - BRANDES_KOEPF (default)
 
 **Example configuration:**
 
-```mermaid-example
+```
 ---
 config:
   layout: elk
@@ -199,40 +199,23 @@ flowchart LR
 #### Using Dagre Layout with Classic Look:
 ```
 
-```mermaid
----
-config:
-  layout: elk
-  elk:
-    mergeEdges: true
-    nodePlacementStrategy: LINEAR_SEGMENTS
----
-flowchart LR
-  A[Start] --> B{Choose Path}
-  B -->|Option 1| C[Path 1]
-  B -->|Option 2| D[Path 2]
+Another example:
 
-#### Using Dagre Layout with Classic Look:
 ```
-
 ---
-
 config:
-layout: dagre
-look: classic
-theme: default
-
+  layout: dagre
+  look: classic
+  theme: default
 ---
 
 flowchart LR
-A\[Start] --> B{Choose Path}
-B -->|Option 1| C\[Path 1]
-B -->|Option 2| D\[Path 2]
+A[Start] --> B{Choose Path}
+B -->|Option 1| C[Path 1]
+B -->|Option 2| D[Path 2]
 
 ```
 
 These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow.
 
 When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk.
-
-```
diff --git a/packages/mermaid/src/docs/intro/syntax-reference.md b/packages/mermaid/src/docs/intro/syntax-reference.md
index 7f36413b2b..1e7cbc4bbe 100644
--- a/packages/mermaid/src/docs/intro/syntax-reference.md
+++ b/packages/mermaid/src/docs/intro/syntax-reference.md
@@ -113,7 +113,7 @@ You can specify the layout algorithm directly in the metadata section of your Me
 config:
   layout: elk
   look: handdrawn
-  theme: forest
+  theme: dark
 ---
 flowchart TB
   A[Start] --> B{Decision}
@@ -129,14 +129,14 @@ When using the ELK layout, you can further refine the diagram’s configuration,
 
 - To combine parallel edges, use mergeEdges: true | false.
 - To configure node placement, use nodePlacementStrategy with the following options:
-  o SIMPLE
-  o NETWORK_SIMPLEX
-  o LINEAR_SEGMENTS
-  o BRANDES_KOEPF (default)
+  - SIMPLE
+  - NETWORK_SIMPLEX
+  - LINEAR_SEGMENTS
+  - BRANDES_KOEPF (default)
 
 **Example configuration:**
 
-```mermaid
+```
 ---
 config:
   layout: elk
@@ -152,13 +152,14 @@ flowchart LR
 #### Using Dagre Layout with Classic Look:
 ```
 
----
+Another example:
 
+```
+---
 config:
-layout: dagre
-look: classic
-theme: default
-
+  layout: dagre
+  look: classic
+  theme: default
 ---
 
 flowchart LR
@@ -171,5 +172,3 @@ B -->|Option 2| D[Path 2]
 These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow.
 
 When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk.
-
-```