流程图
typora支持以下代码块画流程图
flow：流程图，会自动被flowchart.js渲染。sequence：序列图，会自动被js-sequence解析和渲染mermaid：mermaid图。
要使 Typora 支持代码绘图，需要对 Typora 软件进行相应设置：从 Typora 的【文件】-【偏好设置…】-【Markdown】-【 Markdown扩展语法】下启用 图表 (序列图、流程图和Marmaid图) 复选项(如下图示)，并重启 Typora 生效。
当 Typora 将 Markdown 文档导出为 HTML、PDF、epub、docx 文件格式时，相关渲染图也将包括在内；但是当 Typora 将 Markdown 导出为当前版本的其他文件格式时，相关渲染图将不包括在内。
画流程图、时序图(顺序图)、甘特图
横向流程图源码格式
```mermaidgraph LRA[方形] -->B(圆角)B --> C{条件a}C -->|a=1| D[结果1]C -->|a=2| E[结果2]F[横向流程图]```
竖向流程图源码格式：
```mermaidgraph TDA[方形] --> B(圆角)B --> C{条件a}C --> |a=1| D[结果1]C --> |a=2| E[结果2]F[竖向流程图]```
标准流程图源码格式
```mermaid
flowchatst=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op```标准流程图源码格式（横向）
```mermaid
flowchatst=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op```
UML时序图源码样例
```mermaid
sequenceDiagram对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗？```
UML时序图源码复杂样例
```mermaid
sequenceDiagramTitle: 标题：复杂使用
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象B->>小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->>对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩```
UML标准时序图样例
```mermaid%% 时序图例子,-> 直线，-->虚线，->>实线箭头sequenceDiagramparticipant 张三participant 李四张三->王五: 王五你好吗？loop 健康检查王五->王五: 与疾病战斗endNote right of 王五: 合理 食物 <br/>看医生...李四-->>张三: 很好!王五->李四: 你怎么样?李四-->王五: 很好!```
甘特图样例
```mermaid
%% 语法示例ganttdateFormat YYYY-MM-DDtitle 软件开发甘特图section 设计需求 :done, des1, 2014-01-06,2014-01-08原型 :active, des2, 2014-01-09, 3dUI设计 : des3, after des2, 5d未来任务 : des4, after des3, 5dsection 开发学习准备理解需求 :crit, done, 2014-01-06,24h设计框架 :crit, done, after des2, 2d开发 :crit, active, 3d未来任务 :crit, 5d耍 :2dsection 测试功能测试 :active, a1, after des3, 3d压力测试 :after a1 , 20h测试报告 : 48h```
%% 语法示例ganttdateFormat YYYY-MM-DDtitle 软件开发甘特图section 设计需求 :done, des1, 2014-01-06,2014-01-08原型 :active, des2, 2014-01-09, 3dUI设计 : des3, after des2, 5d未来任务 : des4, after des3, 5dsection 开发学习准备理解需求 :crit, done, 2014-01-06,24h设计框架 :crit, done, after des2, 2d开发 :crit, active, 3d未来任务 :crit, 5d耍 :2dsection 测试功能测试 :active, a1, after des3, 3d压力测试 :after a1 , 20h测试报告 : 48h附录
参考
typora官网
mermaid官网
mermaid基础语法
http://flowchart.js.org/
sequence.js官网 ， https://bramp.github.io/js-sequence-diagrams/
http://cncounter.github.io/flowchart/
升级mermaid
1、查看版本，确定是否支持。
以下代码会显示当前的版本。
```mermaid
info
```
2、下载新的版本
参考https://github.com/mermaid-js/mermaid/releases ，查看最新版本，然后下载版本https://unpkg.com/ ，
例如最新版本是：9.4.0，则下载
https://unpkg.com/mermaid@9.4.0/dist/mermaid.min.js
3、安装新版本
1）找到typora的安装路径：D:\Program Files\Typora\resources\app，找到 window.html 文件。
2）引用Mermaid的js文件。
以下脚本放在</body> 前面
<script>
const interval = setInterval(() => {console.log('check mermaid...');if (window.editor &&window.editor.diagrams &&window.mermaidAPI) {$.getScript('file:///E:/setups/mermaid.9.4.0.min.js') .then(() => {mermaidAPI = mermaid.mermaidAPI;editor.diagrams.refreshDiagram(editor);clearInterval(interval);});}
}, 100);
</script>
Mermaid
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。
)
