diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index b4d527fbf..0dbbc801b 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -32,6 +32,9 @@ flowchart LR
 > **Note**
 > The id is what is displayed in the box.
 
+> **💡 Tip**
+> Instead of `flowchart` one can also use `graph`.
+
 ### A node with text
 
 It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
@@ -785,7 +788,10 @@ This feature is applicable to node labels, edge labels, and subgraph labels.
 
 ## Interaction
 
-It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
+It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
+
+> **Note**
+> This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
     click nodeId callback
     click nodeId call callback()
@@ -1077,7 +1083,8 @@ You can change the renderer to elk by adding this directive:
 
     %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 
-Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
+> **Note**
+> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
 
 ### Width
 
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index a638e67d0..82b1cb945 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -25,6 +25,10 @@ flowchart LR
 The id is what is displayed in the box.
 ```
 
+```tip
+Instead of `flowchart` one can also use `graph`.
+```
+
 ### A node with text
 
 It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
@@ -494,7 +498,11 @@ This feature is applicable to node labels, edge labels, and subgraph labels.
 
 ## Interaction
 
-It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
+It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
+
+```note
+This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
+```
 
 ```
 click nodeId callback
@@ -737,7 +745,9 @@ You can change the renderer to elk by adding this directive:
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 ```
 
+```note
 Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
+```
 
 ### Width