From 6f5d889f192a7d17630745413af9d527b10446c1 Mon Sep 17 00:00:00 2001
From: kimulaco <kimulaco@gmail.com>
Date: Sun, 18 May 2025 08:36:43 +0900
Subject: [PATCH 1/2] docs(flowchart): fix the example code of Markdown Strings

---
 docs/syntax/flowchart.md                      | 2 ++
 packages/mermaid/src/docs/syntax/flowchart.md | 1 +
 2 files changed, 3 insertions(+)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 7daf7ca2b..fdd74309a 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -1600,6 +1600,7 @@ flowchart LR
 The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
 
 ```mermaid-example
+---
 config:
   flowchart:
     htmlLabels: false
@@ -1616,6 +1617,7 @@ end
 ```
 
 ```mermaid
+---
 config:
   flowchart:
     htmlLabels: false
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index cea326b37..c643a298a 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -980,6 +980,7 @@ flowchart LR
 The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
 
 ```mermaid-example
+---
 config:
   flowchart:
     htmlLabels: false

From e6be1e9202274f877fa6cb2cbcee607937813d66 Mon Sep 17 00:00:00 2001
From: kimulaco <kimulaco@gmail.com>
Date: Sun, 18 May 2025 08:41:07 +0900
Subject: [PATCH 2/2] docs(flowchart): disable image shape preview

---
 docs/syntax/flowchart.md                      | 5 -----
 packages/mermaid/src/docs/syntax/flowchart.md | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index fdd74309a..e9feb8874 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -969,12 +969,7 @@ flowchart TD
 
 You can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows:
 
-```mermaid-example
-flowchart TD
-    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
 ```
-
-```mermaid
 flowchart TD
     A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
 ```
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index c643a298a..295093128 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -576,7 +576,7 @@ flowchart TD
 
 You can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows:
 
-```mermaid-example
+```
 flowchart TD
     A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
 ```