1、序列圖
語法就是一張圖：具體語法見：https://bramp.github.io/js-sequence-diagrams/
源碼：
````sequence
title: 序列圖的展示 張三-->李四:李四，吃了嗎？ 張三-->>李四:李四，吃了嗎？ Note right of 李四:在李四的右邊(我是誰在哪里) 李四->張三:好久不見了，一起去喝一杯吧？ 張三-->李四:不了，今天不是很方便，改天吧，拜。 Note left of 張三:老子才不想和你喝酒呢(腹誹)
```
結果：
2、流程圖，具體的http://flowchart.js.org/
2.1成績分等流程圖：源碼
st=>start: 開始 op=>operation: 篩選 op1=>operation: 優秀 op2=>operation: 良好 op3=>operation: 及格 cond=>condition: 判斷(是或否及格?) para=>parallel: 成績分等 e1=>end: 修完學分 e2=>end: 補考 st->op->cond cond(yes,bottom)->para para(path1, right)->op1->e1 para(path2, left)->op2->e1 para(path3, bottom)->op3->e1 cond(no)->e2
結果：
官方例程：代碼
st=>start: Start e=>end: End op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No? para=>parallel: parallel tasks io=>inputoutput: catch someThing st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1
結果：
標准流程圖代碼縱向（上下）：
st=>start: 開始 op=>operation: 處理 cond=>condition: 判斷(Yes or No)? sub1=>subroutine: 子流程 io=>inputoutput: 輸入/輸出 e=>end: 結束 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op
結果：
標准流程圖代碼橫向（左右）：
st=>start: 開始 op=>operation: 處理 cond=>condition: 判斷(Yes or No)? sub1=>subroutine: 子流程 io=>inputoutput: 輸入/輸出 e=>end: 結束 st(right)->op(right)->cond cond(yes)->io(bottom)->e cond(no)->sub1(right)->op
結果：
這里有個坑加上自己犯了一個弱智的錯誤，導致多花了將近一個小時才搞定：
1、typora中無法識別流程圖中的並行關鍵字，para=>parallel: 成績分等我開始一直以為是自己的空格還是等於是中文
2、實際到最后是發現，自己睡着了將st=>start: 開始 中的start寫成Start,無法識別關鍵字，就一直出了個錯誤如下：
還是要仔細，仔細，再仔細些啊
3、Mermaid（美人魚）生成圖表的絕好東東
項目地址：https://github.com/mermaid-js/mermaid
教程地址：https://mermaid-js.github.io/mermaid/#/