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/#/