Introduce the mermaid in docs

_posts/2019-08-08-write-a-new-post.md

@@ -68,7 +68,22 @@ math: true
 ---
 ```
 
-## Preview Image
+## Mermaid
+
+[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagrams generation tool. To enable it on your post, add the following to the YAML block:
+
+```yml
+---
+mermaid: true
+---
+```
+
+Then you can use it like other markdown language: surround the graph code with <code class="language-plaintext highlighter-rouge">```mermaid</code>
+and <code class="language-plaintext highlighter-rouge">```</code>.
+
+## Images
+
+### Preview image
 
 If you want to add an image to the top of the post contents, specify the url for the image by:
 
@@ -78,6 +93,49 @@ image: /path/to/image-file
 ---
 ```
 
+### Image caption
+
+Add italics to the next line of an image，then it will become the caption and appear at the bottom of the image:
+
+```markdown
+![img-description](/path/to/image)
+_Image Caption_
+```
+
+### Image size
+
+You can specify the width (and height) of a image with `width`:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: width="400"}
+```
+
+### Image position
+
+By default, the image is centered, but you can specify the position by using one of class `normal` , `left` and `right`. For example:
+
+- **Normal position**
+
+  Image will be left aligned in below sample:
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
+  ```
+
+- **Float to the left**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"}
+  ```
+
+- **Float to the right**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="right"}
+  ```
+
+> **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
+
 ## Pinned Posts
 
 You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by: