【高效工具】《三》Typora直接使用MarkDown语法绘制流程图、时序图、甘特图

平常使用Typora撰写内容的时候，偶尔会用到流程图，原来一直使用Word来作图，在插入到文档中，昨天偶然间了解到Typora支持使用mermaid来绘制流程图，才发现自己差点Out了。此处整理一下如何使用Typora进行图表的绘制。

mermaid支持三种图形的绘制：流程图、时序图、甘特图。

2.1 流程图绘制

流程图方向定义：字母反过来就是相应箭头方向相反

LR（Left-Right）：表示横向左至右流程图，
TD（Top-Down）：表示纵向上至下流程图用
TB（Top-Bottom）：同TD。

基本图形

id + [文字描述]矩形
id + (文字描述)圆角矩形
id + >文字描述]不对称的矩形
id + {文字描述}菱形
id + ((文字描述))圆形

带文本的矩形

带文本的圆角矩形

带文本的不对称的矩形

带文本的圆形

带文本的菱形

节点连线

A --> B A带箭头指向B
A — B A不带箭头指向B
A -.- B A用虚线指向B
A -.-> B A用带箭头的虚线指向B
A ==> B A用加粗的箭头指向B
A – 描述 — B A不带箭头指向B并在中间加上文字描述
A – 描述 --> B A带箭头指向B并在中间加上文字描述
A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述

# 基本语法说明
graph LRA0[A] --> B0[B] A1[A] --- B1[B] A4[A] -.- B4[B] A5[A] -.-> B5[B] A7[A] ==> B7[B] A2[A] -- 描述 --- B2[B] A3[A] -- 描述 --> B3[B] A6[A] -. 描述 .-> B6[B] A8[A] == 描述 ==> B8[B]

描述

样式渲染

Start

Stop

style id1 fill:#f9f,stroke:#000,stroke-width:2px,stroke-dasharray:5,5;
fill:#f9f           表示框框中填充的颜色，由RGB表示，但只有0~F，如#f00表示填充红色
stroke:#000         表示外框的颜色，也是由RGB表示
stroke-width:2px        表示外框短线的宽度为2个像素，
stroke-dasharray:5,5    表示外框短线的长度，等于方框的边长除以5

# 设置宏定义一样的格式
graph LR
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
class nodeId className; //对结点nodeId使用样式类
class nodeId1,nodeId2 className;    对多个结点nodeId使用样式类# 上面例子改写后如下
graph LR
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
class nodeId className;id1(Start)-->id2(Stop)class id1 className;style id2 fill:#f00,stroke:#000,stroke-width:2px,stroke-dasharray:5,5;

完整示例如下：

graph LRA[理财测试开始] --> B1(奋斗小鲜肉)
A[理财测试开始] --> B2(奋斗老腊肉)
A[理财测试开始] --> B3(高薪小鲜肉)
A[理财测试开始] --> B4(高薪老腊肉)B1 --> C1{可投资金}C1 --> |资金不多| D1{大额支出}D1 --> |有计划| E1[乖乖型]D1 --> |无计划| E2[稳健型]C1 --> |资金充裕| D2{大额支出}D2 --> |有计划| E2[稳健型]D2 --> |无计划| E3[赌徒型]B2 --> C2{可投资金}C2 --> |资金不多| E4[乖乖型]C2 --> |资金充裕| D4{大额支出}D4 --> |有计划| E4[乖乖型]D4 --> |无计划| E5[稳健型]B3 --> C3{可投资金}C3 --> |资金不多| E6[稳健型]C3 --> |资金充裕| E7[赌徒型]B4 --> C4{可投资金}C4 --> |资金不多| D7{大额支出}D7 --> |有计划| E8[乖乖型]D7 --> |无计划| E9[稳健型]C4 --> |资金充裕| D8{大额支出}D8 --> |有计划| E9[稳健型]D8 --> |无计划| E10[赌徒型]

资金不多

有计划

无计划

资金充裕

有计划

无计划

资金不多

资金充裕

有计划

无计划

资金不多

资金充裕

资金不多

有计划

无计划

资金充裕

有计划

无计划

理财测试开始

奋斗小鲜肉

奋斗老腊肉

高薪小鲜肉

高薪老腊肉

可投资金

大额支出

乖乖型

稳健型

大额支出

赌徒型

可投资金

乖乖型

大额支出

稳健型

可投资金

稳健型

赌徒型

可投资金

大额支出

乖乖型

稳健型

大额支出

赌徒型

2.2 甘特图绘制

在甘特图里，开始日期和截止日期是必填项

dateFormat：日期格式
title：标题，一般填写项目名称
section：区块，模块，分组
任务名称：crit, active,after des1,5d
- crit：关键阶段用来强调
- 完成进度：done(已完成)，active(正在进行)，空(未来要做的事)
- 别名：取别名用于后面日期的"after"语法
- 开始日期：yyyy-mm-dd，after xx(在某个部分之后进行，xx为部分别名)
- 截止时间：yyyy-mm-dd，n d(n天)

# 基本语法如下
ganttdateFormat  YYYY-MM-DDtitle XX项目计划甘特图section 系统设计需求           :done, des1, 2020-01-06,2020-01-10原型           :active,  des2, 2020-01-09, 3dUI设计         :des3, after des2, 5d环境部署      :des4, after des3, 5dsection 软件开发需求理解        :crit, done, 2020-01-06,120h设计框架       :crit, done, after des2, 2d编码            :crit, active, 3d代码审查          :crit, 5dsection 软件测试功能测试         :active, a1, after des3, 3d压力测试         :after a1, 20h测试报告         :48h

Mon 06Mon 13Mon 20需求原型 UI设计环境部署需求理解设计框架编码代码审查功能测试压力测试测试报告系统设计软件开发软件测试XX项目计划甘特图

2.3 时序图绘制

需要使用 mermaid 解析，并在开头使用关键字 sequenceDiagram 指明
连线的样式
- -> ：实线连接
- --> ：虚线连接
- ->> ：实线箭头指向
- -->> ：虚线箭头指向
Title: 我是标题
participant A ：声明对象

# 时序图使用语法说明
sequenceDiagramTitle: 登录流程participant 客户端participant 服务端participant 认证中心Note over 客户端: 输入账号、密码客户端 ->> 认证中心: 发送账号、密码Note over 认证中心: 验证账号、密码认证中心-->>客户端: 返回token客户端->>服务端: 发送token服务端->>认证中心: 验证token认证中心-->>服务端: 验证成功服务端-->>客户端: 登陆成功

客户端服务端认证中心输入账号、密码发送账号、密码验证账号、密码返回token发送token验证token验证成功登陆成功客户端服务端认证中心登录流程

2.4 其他图形示例（来源互联网）

1、横向流程图源码格式：

a=1

a=2

方形

圆角

条件a

结果1

结果2

横向流程图

2、竖向流程图源码格式：

a=1

a=2

方形

圆角

条件a

结果1

结果2

竖向流程图

3、标准流程图源码格式：

Created with Raphaël 2.2.0开始框处理框判断框(是或否?)输入输出框结束框子流程yesno

4、标准流程图源码格式（横向）：

Created with Raphaël 2.2.0开始框处理框判断框(是或否?)输入输出框结束框子流程yesno

5、UML时序图源码样例：

对象A对象B对象B你好吗?（请求）对象B的描述对象A的描述(提示)我很好(响应)你真的好吗？对象A对象B登录流程

6、UML时序图源码复杂样例：

对象A对象B小三C对象B你好吗?（请求）对象B的描述对象A的描述(提示)我很好(响应)你好吗对象B找我了你真的好吗？我们是朋友没人陪我玩对象A对象B小三C标题：复杂使用

7、UML标准时序图样例：

张三李四王五王五你好吗？与疾病战斗loop[ 健康检查 ]合理食物看医生...很好!你怎么样?很好!张三李四王五标题：复杂使用