From 8975a1907ae86d45c3f302579e59aca483f57182 Mon Sep 17 00:00:00 2001
From: Josh Soref <2119212+jsoref@users.noreply.github.com>
Date: Wed, 16 Apr 2025 16:31:54 -0400
Subject: [PATCH 1/6] chore: Switch from `%%{init` to `config:`

Use format which works reliably...
---
 packages/mermaid/src/docs/syntax/gitgraph.md | 214 ++++++++++++++-----
 1 file changed, 157 insertions(+), 57 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
index 2b3f1a88b..53840b8f7 100644
--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -290,7 +290,13 @@ Sometimes you may want to hide the branch names and lines from the diagram. You
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+---
       gitGraph
         commit
         branch hotfix
@@ -346,7 +352,13 @@ You can change the layout of the commit labels by using the `rotateCommitLabel`
 Usage example: Rotated commit labels
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: true
+---
 gitGraph
   commit id: "feat(api): ..."
   commit id: "a"
@@ -367,7 +379,13 @@ gitGraph
 Usage example: Horizontal commit labels
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: false
+---
 gitGraph
   commit id: "feat(api): ..."
   commit id: "a"
@@ -392,7 +410,14 @@ Sometimes you may want to hide the commit labels from the diagram. You can do th
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+    showCommitLabel: false
+---
       gitGraph
         commit
         branch hotfix
@@ -444,7 +469,15 @@ Sometimes you may want to customize the name of the main/default branch. You can
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchName: 'MetroLine1'
+---
       gitGraph
         commit id:"NewYork"
         commit id:"Dallas"
@@ -486,7 +519,14 @@ To fully control the order of all the branches, you must define `order` for all
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+---
       gitGraph
       commit
       branch test1 order: 3
@@ -500,7 +540,15 @@ Look at the diagram, all the branches are following the order defined.
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchOrder: 2
+---
       gitGraph
       commit
       branch test1 order: 3
@@ -652,7 +700,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Base Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+---
       gitGraph
         commit
         branch hotfix
@@ -700,7 +752,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Forest Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'forest'
+---
       gitGraph
         commit
         branch hotfix
@@ -748,7 +804,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Default Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
       gitGraph
         commit type:HIGHLIGHT
         branch hotfix
@@ -796,7 +856,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Dark Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'dark'
+---
       gitGraph
         commit
         branch hotfix
@@ -844,7 +908,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Neutral Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'neutral'
+---
       gitGraph
         commit
         branch hotfix
@@ -898,7 +966,11 @@ For understanding let us take a sample diagram with theme `default`, the default
 See how the default theme is used to set the colors for the branches:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
        gitGraph
        commit
        branch develop
@@ -929,16 +1001,20 @@ Example:
 Now let's override the default values for the `git0` to `git3` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'git0': '#ff0000',
-              'git1': '#00ff00',
-              'git2': '#0000ff',
-              'git3': '#ff00ff',
-              'git4': '#00ffff',
-              'git5': '#ffff00',
-              'git6': '#ff00ff',
-              'git7': '#00ffff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+      'git0': '#ff0000'
+      'git1': '#00ff00'
+      'git2': '#0000ff'
+      'git3': '#ff00ff'
+      'git4': '#00ffff'
+      'git5': '#ffff00'
+      'git6': '#ff00ff'
+      'git7': '#00ffff'
+---
        gitGraph
        commit
        branch develop
@@ -965,18 +1041,22 @@ Lets see how the default theme is used to set the colors for the branch labels:
 Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-        'gitBranchLabel0': '#ffffff',
-        'gitBranchLabel1': '#ffffff',
-        'gitBranchLabel2': '#ffffff',
-        'gitBranchLabel3': '#ffffff',
-        'gitBranchLabel4': '#ffffff',
-        'gitBranchLabel5': '#ffffff',
-        'gitBranchLabel6': '#ffffff',
-        'gitBranchLabel7': '#ffffff',
-        'gitBranchLabel8': '#ffffff',
-        'gitBranchLabel9': '#ffffff'
-  } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    'gitBranchLabel0': '#ffffff'
+    'gitBranchLabel1': '#ffffff'
+    'gitBranchLabel2': '#ffffff'
+    'gitBranchLabel3': '#ffffff'
+    'gitBranchLabel4': '#ffffff'
+    'gitBranchLabel5': '#ffffff'
+    'gitBranchLabel6': '#ffffff'
+    'gitBranchLabel7': '#ffffff'
+    'gitBranchLabel8': '#ffffff'
+    'gitBranchLabel9': '#ffffff'
+---
   gitGraph
     checkout main
     branch branch1
@@ -1002,10 +1082,14 @@ Example:
 Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+---
        gitGraph
        commit
        branch develop
@@ -1031,11 +1115,15 @@ Example:
 Now let's override the default values for the `commitLabelFontSize` variable:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00',
-              'commitLabelFontSize': '16px'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+    commitLabelFontSize: '16px'
+---
        gitGraph
        commit
        branch develop
@@ -1061,11 +1149,15 @@ Example:
 Now let's override the default values for the `tagLabelFontSize` variable:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00',
-              'tagLabelFontSize': '16px'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+    tagLabelFontSize: '16px'
+---
        gitGraph
        commit
        branch develop
@@ -1090,11 +1182,15 @@ Example:
 Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'tagLabelColor': '#ff0000',
-              'tagLabelBackground': '#00ff00',
-              'tagLabelBorder': '#0000ff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    tagLabelColor: '#ff0000'
+    tagLabelBackground: '#00ff00'
+    tagLabelBorder: '#0000ff'
+---
        gitGraph
        commit
        branch develop
@@ -1121,9 +1217,13 @@ Example:
 Now let's override the default values for the `git0` to `git3` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'gitInv0': '#ff0000'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    'gitInv0': '#ff0000'
+---
        gitGraph
        commit
        branch develop

From f56895832fb6081b0373e87c6fa1b65647e3e1f9 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 16 Apr 2025 20:46:18 +0000
Subject: [PATCH 2/6] [autofix.ci] apply automated fixes

---
 docs/syntax/gitgraph.md | 428 +++++++++++++++++++++++++++++-----------
 1 file changed, 314 insertions(+), 114 deletions(-)

diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 340a31695..05f465358 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -432,7 +432,13 @@ Sometimes you may want to hide the branch names and lines from the diagram. You
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+---
       gitGraph
         commit
         branch hotfix
@@ -478,7 +484,13 @@ Usage example:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+---
       gitGraph
         commit
         branch hotfix
@@ -534,7 +546,13 @@ You can change the layout of the commit labels by using the `rotateCommitLabel`
 Usage example: Rotated commit labels
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: true
+---
 gitGraph
   commit id: "feat(api): ..."
   commit id: "a"
@@ -553,7 +571,13 @@ gitGraph
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: true
+---
 gitGraph
   commit id: "feat(api): ..."
   commit id: "a"
@@ -574,7 +598,13 @@ gitGraph
 Usage example: Horizontal commit labels
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: false
+---
 gitGraph
   commit id: "feat(api): ..."
   commit id: "a"
@@ -593,7 +623,13 @@ gitGraph
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: false
+---
 gitGraph
   commit id: "feat(api): ..."
   commit id: "a"
@@ -618,7 +654,14 @@ Sometimes you may want to hide the commit labels from the diagram. You can do th
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+    showCommitLabel: false
+---
       gitGraph
         commit
         branch hotfix
@@ -664,7 +707,14 @@ Usage example:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+    showCommitLabel: false
+---
       gitGraph
         commit
         branch hotfix
@@ -716,7 +766,15 @@ Sometimes you may want to customize the name of the main/default branch. You can
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchName: 'MetroLine1'
+---
       gitGraph
         commit id:"NewYork"
         commit id:"Dallas"
@@ -740,7 +798,15 @@ Usage example:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchName: 'MetroLine1'
+---
       gitGraph
         commit id:"NewYork"
         commit id:"Dallas"
@@ -782,7 +848,14 @@ To fully control the order of all the branches, you must define `order` for all
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+---
       gitGraph
       commit
       branch test1 order: 3
@@ -792,7 +865,14 @@ Usage example:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+---
       gitGraph
       commit
       branch test1 order: 3
@@ -806,7 +886,15 @@ Look at the diagram, all the branches are following the order defined.
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchOrder: 2
+---
       gitGraph
       commit
       branch test1 order: 3
@@ -817,7 +905,15 @@ Usage example:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchOrder: 2
+---
       gitGraph
       commit
       branch test1 order: 3
@@ -1046,7 +1142,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Base Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+---
       gitGraph
         commit
         branch hotfix
@@ -1092,7 +1192,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+---
       gitGraph
         commit
         branch hotfix
@@ -1140,7 +1244,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Forest Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'forest'
+---
       gitGraph
         commit
         branch hotfix
@@ -1186,7 +1294,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'forest'
+---
       gitGraph
         commit
         branch hotfix
@@ -1234,7 +1346,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Default Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
       gitGraph
         commit type:HIGHLIGHT
         branch hotfix
@@ -1280,7 +1396,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
       gitGraph
         commit type:HIGHLIGHT
         branch hotfix
@@ -1328,7 +1448,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Dark Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'dark'
+---
       gitGraph
         commit
         branch hotfix
@@ -1374,7 +1498,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'dark'
+---
       gitGraph
         commit
         branch hotfix
@@ -1422,7 +1550,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Neutral Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'neutral'
+---
       gitGraph
         commit
         branch hotfix
@@ -1468,7 +1600,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'neutral'
+---
       gitGraph
         commit
         branch hotfix
@@ -1522,7 +1658,11 @@ For understanding let us take a sample diagram with theme `default`, the default
 See how the default theme is used to set the colors for the branches:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
        gitGraph
        commit
        branch develop
@@ -1538,7 +1678,11 @@ See how the default theme is used to set the colors for the branches:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
        gitGraph
        commit
        branch develop
@@ -1569,16 +1713,20 @@ Example:
 Now let's override the default values for the `git0` to `git3` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'git0': '#ff0000',
-              'git1': '#00ff00',
-              'git2': '#0000ff',
-              'git3': '#ff00ff',
-              'git4': '#00ffff',
-              'git5': '#ffff00',
-              'git6': '#ff00ff',
-              'git7': '#00ffff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+      'git0': '#ff0000'
+      'git1': '#00ff00'
+      'git2': '#0000ff'
+      'git3': '#ff00ff'
+      'git4': '#00ffff'
+      'git5': '#ffff00'
+      'git6': '#ff00ff'
+      'git7': '#00ffff'
+---
        gitGraph
        commit
        branch develop
@@ -1595,16 +1743,20 @@ Now let's override the default values for the `git0` to `git3` variables:
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'git0': '#ff0000',
-              'git1': '#00ff00',
-              'git2': '#0000ff',
-              'git3': '#ff00ff',
-              'git4': '#00ffff',
-              'git5': '#ffff00',
-              'git6': '#ff00ff',
-              'git7': '#00ffff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+      'git0': '#ff0000'
+      'git1': '#00ff00'
+      'git2': '#0000ff'
+      'git3': '#ff00ff'
+      'git4': '#00ffff'
+      'git5': '#ffff00'
+      'git6': '#ff00ff'
+      'git7': '#00ffff'
+---
        gitGraph
        commit
        branch develop
@@ -1631,18 +1783,22 @@ Lets see how the default theme is used to set the colors for the branch labels:
 Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-        'gitBranchLabel0': '#ffffff',
-        'gitBranchLabel1': '#ffffff',
-        'gitBranchLabel2': '#ffffff',
-        'gitBranchLabel3': '#ffffff',
-        'gitBranchLabel4': '#ffffff',
-        'gitBranchLabel5': '#ffffff',
-        'gitBranchLabel6': '#ffffff',
-        'gitBranchLabel7': '#ffffff',
-        'gitBranchLabel8': '#ffffff',
-        'gitBranchLabel9': '#ffffff'
-  } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    'gitBranchLabel0': '#ffffff'
+    'gitBranchLabel1': '#ffffff'
+    'gitBranchLabel2': '#ffffff'
+    'gitBranchLabel3': '#ffffff'
+    'gitBranchLabel4': '#ffffff'
+    'gitBranchLabel5': '#ffffff'
+    'gitBranchLabel6': '#ffffff'
+    'gitBranchLabel7': '#ffffff'
+    'gitBranchLabel8': '#ffffff'
+    'gitBranchLabel9': '#ffffff'
+---
   gitGraph
     checkout main
     branch branch1
@@ -1659,18 +1815,22 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-        'gitBranchLabel0': '#ffffff',
-        'gitBranchLabel1': '#ffffff',
-        'gitBranchLabel2': '#ffffff',
-        'gitBranchLabel3': '#ffffff',
-        'gitBranchLabel4': '#ffffff',
-        'gitBranchLabel5': '#ffffff',
-        'gitBranchLabel6': '#ffffff',
-        'gitBranchLabel7': '#ffffff',
-        'gitBranchLabel8': '#ffffff',
-        'gitBranchLabel9': '#ffffff'
-  } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    'gitBranchLabel0': '#ffffff'
+    'gitBranchLabel1': '#ffffff'
+    'gitBranchLabel2': '#ffffff'
+    'gitBranchLabel3': '#ffffff'
+    'gitBranchLabel4': '#ffffff'
+    'gitBranchLabel5': '#ffffff'
+    'gitBranchLabel6': '#ffffff'
+    'gitBranchLabel7': '#ffffff'
+    'gitBranchLabel8': '#ffffff'
+    'gitBranchLabel9': '#ffffff'
+---
   gitGraph
     checkout main
     branch branch1
@@ -1696,10 +1856,14 @@ Example:
 Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+---
        gitGraph
        commit
        branch develop
@@ -1716,10 +1880,14 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+---
        gitGraph
        commit
        branch develop
@@ -1745,11 +1913,15 @@ Example:
 Now let's override the default values for the `commitLabelFontSize` variable:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00',
-              'commitLabelFontSize': '16px'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+    commitLabelFontSize: '16px'
+---
        gitGraph
        commit
        branch develop
@@ -1766,11 +1938,15 @@ Now let's override the default values for the `commitLabelFontSize` variable:
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00',
-              'commitLabelFontSize': '16px'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+    commitLabelFontSize: '16px'
+---
        gitGraph
        commit
        branch develop
@@ -1796,11 +1972,15 @@ Example:
 Now let's override the default values for the `tagLabelFontSize` variable:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00',
-              'tagLabelFontSize': '16px'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+    tagLabelFontSize: '16px'
+---
        gitGraph
        commit
        branch develop
@@ -1817,11 +1997,15 @@ Now let's override the default values for the `tagLabelFontSize` variable:
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00',
-              'tagLabelFontSize': '16px'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+    tagLabelFontSize: '16px'
+---
        gitGraph
        commit
        branch develop
@@ -1846,11 +2030,15 @@ Example:
 Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'tagLabelColor': '#ff0000',
-              'tagLabelBackground': '#00ff00',
-              'tagLabelBorder': '#0000ff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    tagLabelColor: '#ff0000'
+    tagLabelBackground: '#00ff00'
+    tagLabelBorder: '#0000ff'
+---
        gitGraph
        commit
        branch develop
@@ -1867,11 +2055,15 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'tagLabelColor': '#ff0000',
-              'tagLabelBackground': '#00ff00',
-              'tagLabelBorder': '#0000ff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    tagLabelColor: '#ff0000'
+    tagLabelBackground: '#00ff00'
+    tagLabelBorder: '#0000ff'
+---
        gitGraph
        commit
        branch develop
@@ -1898,9 +2090,13 @@ Example:
 Now let's override the default values for the `git0` to `git3` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'gitInv0': '#ff0000'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    'gitInv0': '#ff0000'
+---
        gitGraph
        commit
        branch develop
@@ -1917,9 +2113,13 @@ Now let's override the default values for the `git0` to `git3` variables:
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'gitInv0': '#ff0000'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    'gitInv0': '#ff0000'
+---
        gitGraph
        commit
        branch develop

From 8474cf43feffbd778a101173079a388edad6c65b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 17 Apr 2025 04:05:18 +0000
Subject: [PATCH 3/6] chore: update E2E timings

---
 cypress/timings.json | 104 +++++++++++++++++++++----------------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/cypress/timings.json b/cypress/timings.json
index 6164a81fb..66ea9918d 100644
--- a/cypress/timings.json
+++ b/cypress/timings.json
@@ -2,211 +2,211 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5475
+      "duration": 5450
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2037
+      "duration": 2004
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3207
+      "duration": 3183
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1915
+      "duration": 1913
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 10952
+      "duration": 10944
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1872
+      "duration": 1938
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 26686
+      "duration": 26753
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 2629
+      "duration": 2571
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 104
+      "duration": 110
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 14765
+      "duration": 14697
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 4913
+      "duration": 4705
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 36667
+      "duration": 35841
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 33813
+      "duration": 34279
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 20441
+      "duration": 20641
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 32504
+      "duration": 33020
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 13772
+      "duration": 13546
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 7978
+      "duration": 8072
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2101
+      "duration": 2083
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 76556
+      "duration": 78269
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 12756
+      "duration": 12578
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 2766
+      "duration": 2784
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 35641
+      "duration": 36205
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 26915
+      "duration": 26627
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 21171
+      "duration": 21332
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 37844
+      "duration": 37328
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 26254
+      "duration": 25914
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 15149
+      "duration": 15383
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 45049
+      "duration": 45226
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 250225
+      "duration": 251094
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 51531
+      "duration": 50916
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 2455
+      "duration": 2489
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 3181
+      "duration": 5988
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 6298
+      "duration": 6225
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3065
+      "duration": 3009
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2521
+      "duration": 2426
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 9341
+      "duration": 9306
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 132809
+      "duration": 134419
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 101299
+      "duration": 102434
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 3481
+      "duration": 3373
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 4878
+      "duration": 4898
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 7416
+      "duration": 7578
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 4554
+      "duration": 4526
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2068
+      "duration": 2172
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 47583
+      "duration": 47175
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 5792
+      "duration": 5717
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 33035
+      "duration": 32556
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 22716
+      "duration": 22572
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 13868
+      "duration": 14064
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 26376
+      "duration": 26565
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 5872
+      "duration": 6233
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 9469
+      "duration": 17750
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 2742
+      "duration": 2696
     }
   ]
 }

From 3c69bd34c74bcf98040df25d439266d73ef073c1 Mon Sep 17 00:00:00 2001
From: Josh Soref <2119212+jsoref@users.noreply.github.com>
Date: Thu, 17 Apr 2025 06:46:00 -0400
Subject: [PATCH 4/6] chore: Remove duplicate `mermaid` blocks

---
 packages/mermaid/src/docs/config/theming.md | 36 ---------------------
 1 file changed, 36 deletions(-)

diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md
index 5643dc7fb..f9afb15b8 100644
--- a/packages/mermaid/src/docs/config/theming.md
+++ b/packages/mermaid/src/docs/config/theming.md
@@ -41,12 +41,6 @@ Example of `init` directive setting the `theme` to `forest`:
     a --> b
 ```
 
-```mermaid
-%%{init: {'theme':'forest'}}%%
-  graph TD
-    a --> b
-```
-
 > **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
 
 ## Customizing Themes with `themeVariables`
@@ -91,36 +85,6 @@ Example of modifying `themeVariables` using the `init` directive:
           end
 ```
 
-```mermaid
-%%{
-  init: {
-    'theme': 'base',
-    'themeVariables': {
-      'primaryColor': '#BB2528',
-      'primaryTextColor': '#fff',
-      'primaryBorderColor': '#7C0000',
-      'lineColor': '#F8B229',
-      'secondaryColor': '#006100',
-      'tertiaryColor': '#fff'
-    }
-  }
-}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
 ## Color and Color Calculation
 
 To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.

From c7fa906115328783abeb9b6b08075fc39d94bfca Mon Sep 17 00:00:00 2001
From: Josh Soref <2119212+jsoref@users.noreply.github.com>
Date: Thu, 17 Apr 2025 06:50:20 -0400
Subject: [PATCH 5/6] chore: Change `mermaid` blocks to `mermaid-example` in
 docs

---
 packages/mermaid/src/docs/config/8.6.0_docs.md      | 2 +-
 packages/mermaid/src/docs/config/directives.md      | 2 +-
 packages/mermaid/src/docs/config/math.md            | 4 ++--
 packages/mermaid/src/docs/intro/getting-started.md  | 2 +-
 packages/mermaid/src/docs/intro/syntax-reference.md | 4 ++--
 packages/mermaid/src/docs/syntax/block.md           | 2 +-
 packages/mermaid/src/docs/syntax/classDiagram.md    | 2 +-
 packages/mermaid/src/docs/syntax/examples.md        | 2 +-
 packages/mermaid/src/docs/syntax/gantt.md           | 2 +-
 packages/mermaid/src/docs/syntax/sequenceDiagram.md | 2 +-
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid/src/docs/config/8.6.0_docs.md b/packages/mermaid/src/docs/config/8.6.0_docs.md
index efd29bfdc..342e05763 100644
--- a/packages/mermaid/src/docs/config/8.6.0_docs.md
+++ b/packages/mermaid/src/docs/config/8.6.0_docs.md
@@ -75,7 +75,7 @@ When deployed within code, init is called before the graph/diagram description.
 
 **for example**:
 
-```mermaid
+```mermaid-example
 %%{init: {"theme": "default", "logLevel": 1 }}%%
  graph LR
   a-->b
diff --git a/packages/mermaid/src/docs/config/directives.md b/packages/mermaid/src/docs/config/directives.md
index 0e211161c..017fc486b 100644
--- a/packages/mermaid/src/docs/config/directives.md
+++ b/packages/mermaid/src/docs/config/directives.md
@@ -88,7 +88,7 @@ Here the directive declaration will set the `logLevel` to `debug` and the `theme
 
 Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed.
 
-```mermaid
+```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
 %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
 ...
diff --git a/packages/mermaid/src/docs/config/math.md b/packages/mermaid/src/docs/config/math.md
index a53dceaf2..bb6556b6c 100644
--- a/packages/mermaid/src/docs/config/math.md
+++ b/packages/mermaid/src/docs/config/math.md
@@ -10,7 +10,7 @@ Note that at the moment, the only supported diagrams are below:
 
 ### Flowcharts
 
-```mermaid
+```mermaid-example
  graph LR
       A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
       A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
@@ -20,7 +20,7 @@ Note that at the moment, the only supported diagrams are below:
 
 ### Sequence
 
-```mermaid
+```mermaid-example
 sequenceDiagram
     autonumber
     participant 1 as $$\alpha$$
diff --git a/packages/mermaid/src/docs/intro/getting-started.md b/packages/mermaid/src/docs/intro/getting-started.md
index 574881c4f..8e6482ae2 100644
--- a/packages/mermaid/src/docs/intro/getting-started.md
+++ b/packages/mermaid/src/docs/intro/getting-started.md
@@ -41,7 +41,7 @@ In the `Code` panel, write or edit Mermaid code, and instantly `Preview` the ren
 
 Here is an example of Mermaid code and its rendered result:
 
-```mermaid
+```mermaid-example
 graph TD
     A[Enter Chart Definition] --> B(Preview)
     B --> C{decide}
diff --git a/packages/mermaid/src/docs/intro/syntax-reference.md b/packages/mermaid/src/docs/intro/syntax-reference.md
index 14c56370a..b439c26bc 100644
--- a/packages/mermaid/src/docs/intro/syntax-reference.md
+++ b/packages/mermaid/src/docs/intro/syntax-reference.md
@@ -83,7 +83,7 @@ Mermaid offers a variety of styles or “looks” for your diagrams, allowing yo
 
 You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example:
 
-```mermaid
+```mermaid-example
 ---
 config:
   look: handDrawn
@@ -108,7 +108,7 @@ In addition to customizing the look of your diagrams, Mermaid Chart now allows y
 
 You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example:
 
-```mermaid
+```mermaid-example
 ---
 config:
   layout: elk
diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md
index 5b8aa1c99..396f39148 100644
--- a/packages/mermaid/src/docs/syntax/block.md
+++ b/packages/mermaid/src/docs/syntax/block.md
@@ -7,7 +7,7 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
 
 ## Introduction to Block Diagrams
 
-```mermaid
+```mermaid-example
 block-beta
 columns 1
   db(("DB"))
diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index 552670d3f..f2cec2ec5 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -248,7 +248,7 @@ classE o-- classF : aggregation
 
 Relations can logically represent an N:M association:
 
-```mermaid
+```mermaid-example
 classDiagram
     Animal <|--|> Zebra
 ```
diff --git a/packages/mermaid/src/docs/syntax/examples.md b/packages/mermaid/src/docs/syntax/examples.md
index 64e85815f..48af4dc77 100644
--- a/packages/mermaid/src/docs/syntax/examples.md
+++ b/packages/mermaid/src/docs/syntax/examples.md
@@ -141,7 +141,7 @@ sequenceDiagram
 
 ## A commit flow diagram.
 
-```mermaid
+```mermaid-example
 gitGraph:
     commit "Ashish"
     branch newbranch
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index eab35d09f..de54363bc 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -259,7 +259,7 @@ gantt
 
 The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.
 
-```mermaid
+```mermaid-example
 ---
 displayMode: compact
 ---
diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
index 2357b9bf4..3087eb743 100644
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -442,7 +442,7 @@ sequenceDiagram
 
 Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
 
-```mermaid
+```mermaid-example
 sequenceDiagram
     Alice->>John: Hello John, how are you?
     %% this is a comment

From 2a859f27394ca36d3270afa3bbeaf224a6bc9a44 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 17 Apr 2025 11:08:43 +0000
Subject: [PATCH 6/6] [autofix.ci] apply automated fixes

---
 docs/config/theming.md | 72 ------------------------------------------
 1 file changed, 72 deletions(-)

diff --git a/docs/config/theming.md b/docs/config/theming.md
index 088d9e755..f510a114a 100644
--- a/docs/config/theming.md
+++ b/docs/config/theming.md
@@ -53,18 +53,6 @@ Example of `init` directive setting the `theme` to `forest`:
     a --> b
 ```
 
-```mermaid-example
-%%{init: {'theme':'forest'}}%%
-  graph TD
-    a --> b
-```
-
-```mermaid
-%%{init: {'theme':'forest'}}%%
-  graph TD
-    a --> b
-```
-
 > **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
 
 ## Customizing Themes with `themeVariables`
@@ -139,66 +127,6 @@ Example of modifying `themeVariables` using the `init` directive:
           end
 ```
 
-```mermaid-example
-%%{
-  init: {
-    'theme': 'base',
-    'themeVariables': {
-      'primaryColor': '#BB2528',
-      'primaryTextColor': '#fff',
-      'primaryBorderColor': '#7C0000',
-      'lineColor': '#F8B229',
-      'secondaryColor': '#006100',
-      'tertiaryColor': '#fff'
-    }
-  }
-}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{
-  init: {
-    'theme': 'base',
-    'themeVariables': {
-      'primaryColor': '#BB2528',
-      'primaryTextColor': '#fff',
-      'primaryBorderColor': '#7C0000',
-      'lineColor': '#F8B229',
-      'secondaryColor': '#006100',
-      'tertiaryColor': '#fff'
-    }
-  }
-}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
 ## Color and Color Calculation
 
 To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.