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] 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