chore: Change mermaid blocks to mermaid-example in docs

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

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 } }%%
 ...

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

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}

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

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"))

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

packages/mermaid/src/docs/syntax/examples.md

@@ -141,7 +141,7 @@ sequenceDiagram
 
 ## A commit flow diagram.
 
-```mermaid
+```mermaid-example
 gitGraph:
     commit "Ashish"
     branch newbranch

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

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