diff --git a/source/books/gitsite-guide/40-write-content/60-advanced-formatting/40-diagrams/README.md b/source/books/gitsite-guide/40-write-content/60-advanced-formatting/40-diagrams/README.md
index 4aa8378..d70497a 100644
--- a/source/books/gitsite-guide/40-write-content/60-advanced-formatting/40-diagrams/README.md
+++ b/source/books/gitsite-guide/40-write-content/60-advanced-formatting/40-diagrams/README.md
@@ -10,7 +10,9 @@ GitSite don't require Mermaid JavaScript on page because it pre-compile Mermaid
 
 To create a Mermaid diagram, add Mermaid syntax inside a fenced code block with the `mermaid` identifier.
 
+```alert type=tip
 It is a good practice that use [Mermaid live editor](https://mermaid.live/) to make sure your markdown text can be compiled to Mermaid diagrams successfully.
+```
 
 ## Creating flow chart