Introduce the mermaid in docs

cotes2020 · cotes2020 · commit 3017301ac3c6 · 2020-12-10T06:39:03.000+08:00
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
@@ -5,25 +5,24 @@ date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
 math: true
+mermaid: true
 image: /assets/img/sample/devices-mockup.png
 ---
 
 This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
 
 
 ## Titles
-
 ---
+# H1 - heading
 
-# H1
-
-<h2 data-toc-skip>H2</h2>
-
-<h3 data-toc-skip>H3</h3>
+<h2 data-toc-skip>H2 - heading</h2>
 
-<h4>H4</h4>
+<h3 data-toc-skip>H3 - heading</h3>
 
+<h4>H4 - heading</h4>
 ---
+<br>
 
 ## Paragraph
 
@@ -79,32 +78,50 @@ Click the hook will locate the footnote[^footnote].
 
 ## Images
 
-By default, the image is centered and the image caption can be displayed at the bottom:
+- Default (with caption)
 
 ![Desktop View](/assets/img/sample/mockup.png)
 _Full screen width and center alignment_
 
-You can change the size of the picture:
+<br>
+
+- Specify width
 
 ![Desktop View](/assets/img/sample/mockup.png){: width="400"}
 _400px image width_
 
-In addition, you can use class `normal` , `left` and `right` to specify the image position (but in these case, the image caption is prohibited), for example:
+<br>
+
+- Left aligned
+
+![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
 
-- Normal position
-  
-  ![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
+<br>
 
-- Float to the left
+- Float to left
 
   ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"}
   "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
 
-- Float to the right
+<br>
+
+- Float to right
 
   ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="right"}
   "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
 
+<br>
+
+## Mermaid SVG
+
+```mermaid
+ gantt
+  title  Adding GANTT diagram functionality to mermaid
+  apple :a, 2017-07-20, 1w
+  banana :crit, b, 2017-07-23, 1d
+  cherry :active, c, after b a, 1d
+```
+
 ## Inline code
 
 This is an example of `Inline Code`.
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_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:
