在HEXO中部署流程图以及常用的流程图语法

本文中将给出mermaid和flowchart在hexo上的配置以及基础语法
插件地址：mermaid
参考文章：
Hexo引入Mermaid流程图和MathJax数学公式
hexo支持mermaid图表
hexo优化：Markdown语法引入Flowchart和Mermaid流程图
官方使用文档：使用文档

graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d

graph LR
    A-->B
    B-->C
    C-->D
    D-->E
    E-->F
    F-->M
    M-->AD
    AD-->Q
    Q-->T
    T-->R
    R-->S
    S-->Z

stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

st=>start: Start|past:>http://www.google.com[blank] e=>end: End:>http://www.google.com op1=>operation: My Operation|past op2=>operation: Stuff|current sub1=>subroutine: My Subroutine|invalid cond=>condition: Yes or No?|approved:>http://www.google.com c2=>condition: Good idea|rejected io=>inputoutput: catch something...|request st->op1(right)->cond cond(yes, right)->c2 cond(no)->sub1(left)->op1 c2(yes)->io->e c2(no)->op2->e{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}