diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index cf199c39b..b0320b36e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -63,6 +63,28 @@ flowchart LR
 
 ```
 
+You can use `note`, `tip`, `warning` and `danger` in triple backticks to add a note, tip, warning or danger box.
+Do not use vitepress specific markdown syntax `::: warning` as it will not be processed correctly.
+
+````
+```note
+Note content
+```
+
+```tip
+Tip content
+```
+
+```warning
+Warning content
+```
+
+```danger
+Danger content
+```
+
+````
+
 **_DO NOT CHANGE FILES IN `/docs`_**
 
 ### The official documentation site
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 6ef8a1046..fd0408c45 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -30,7 +30,8 @@ flowchart LR
     id
 ```
 
-> **Note** The id is what is displayed in the box.
+> **Note**
+> The id is what is displayed in the box.
 
 ### A node with text
 
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 587b3b1fc..5896e0518 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -21,7 +21,9 @@ flowchart LR
     id
 ```
 
-> **Note** The id is what is displayed in the box.
+```note
+The id is what is displayed in the box.
+```
 
 ### A node with text