diff --git a/README.md b/README.md
index 5e69e40da..b3c4e1b81 100644
--- a/README.md
+++ b/README.md
@@ -34,12 +34,13 @@ To submit a blog post for publication on [wechaty.js.org](https://wechaty.js.org
 6. Write your blog in markdown in the file you created in the previous step. If you are not familiar with markdown syntax, you can learn it [here](https://guides.github.com/features/mastering-markdown/)
 7. Add related images to [jekyll/assets](./jekyll/assets) folder under `$YEAR/$MONTH-your-blog-slug/` directory
 8. Add your info into `jekyll/_contributors/your_github_id.md`
-9. Commit your changes using the command `git commit -am "YOUR_BLOG_TITLE"`. `YOUR_BLOG_TITLE` is the title of your blog
-10. Push your branch to github using the command `git push origin name-of-blog-branch`.
-11. Create new Pull Request(PR)
-12. Sign the [CLA](https://en.wikipedia.org/wiki/Contributor_License_Agreement)
-13. Wait for the continuous integration workflow run to finish. If it is failing, fix whatever is making it to fail so that CI turns green
-14. Wait for @wechaty/editors to review your PR
+9. Use mermaid: [URL](/jekyll#use-mermaid)
+10. Commit your changes using the command `git commit -am "YOUR_BLOG_TITLE"`. `YOUR_BLOG_TITLE` is the title of your blog
+11. Push your branch to github using the command `git push origin name-of-blog-branch`.
+12. Create new Pull Request(PR)
+13. Sign the [CLA](https://en.wikipedia.org/wiki/Contributor_License_Agreement)
+14. Wait for the continuous integration workflow run to finish. If it is failing, fix whatever is making it to fail so that CI turns green
+15. Wait for @wechaty/editors to review your PR
 
 That's it!
 
diff --git a/jekyll/Makefile b/jekyll/Makefile
index f33476c1c..da2e2ef3e 100644
--- a/jekyll/Makefile
+++ b/jekyll/Makefile
@@ -33,7 +33,7 @@ serve:
 docker-serve:
 	docker run \
 		--rm \
-		-v .:/srv/jekyll:z \
+		-v $(pwd):/srv/jekyll:z \
 		-p 4000:4000 \
 		jekyll/jekyll \
 		jekyll serve --force_polling
diff --git a/jekyll/README.md b/jekyll/README.md
index f0950288f..ff827b78e 100644
--- a/jekyll/README.md
+++ b/jekyll/README.md
@@ -13,6 +13,20 @@ wechaty.js.org/ | Repo Folder
 1. For news posts (will show in `/news/` URL), add `news` to `tags`
 1. For sticky posts, add `sticky` to `tags`
 
+## Use mermaid
+
+````bash
+```
+title: xxxxx
+author: xxxxx
+categories: xxxxx
+tags:
+  - xxxxx
+image: /assets/2022/xxxxx/logo.webp
+mermaid: true
+```
+````
+
 ## Serve from local
 
 Run the Jekyll at localhost for blog preview.
diff --git a/jekyll/_includes/mermaid.html b/jekyll/_includes/mermaid.html
new file mode 100644
index 000000000..9b3ca23c6
--- /dev/null
+++ b/jekyll/_includes/mermaid.html
@@ -0,0 +1,10 @@
+<script src="https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js"></script>
+<script>
+  $(document).ready(function () {
+    mermaid.initialize({
+      startOnLoad:true,
+      theme: "default",
+    });
+    window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
+  });
+</script>
\ No newline at end of file
diff --git a/jekyll/_posts/2022-04-13-wechaty-gateway-use.md b/jekyll/_posts/2022-04-13-wechaty-gateway-use.md
index d674d051b..cf19140e2 100644
--- a/jekyll/_posts/2022-04-13-wechaty-gateway-use.md
+++ b/jekyll/_posts/2022-04-13-wechaty-gateway-use.md
@@ -7,6 +7,7 @@ tags:
   - gateway
   - wechat4u
 image: /assets/2022/04-wechaty-gateway-use/logo.webp
+mermaid: true
 ---
 
 ## 前言