使用typora画图

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