【高效工具】《三》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 LR
A0[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]
描述
描述
描述
描述
A
B
A
B
A
B
A
B
A
B
A
B
A
B
A
B
A
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 LR
A[理财测试开始] --> 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天)
# 基本语法如下
gantt
dateFormat YYYY-MM-DD
title XX项目计划甘特图
section 系统设计
需求 :done, des1, 2020-01-06,2020-01-10
原型 :active, des2, 2020-01-09, 3d
UI设计 :des3, after des2, 5d
环境部署 :des4, after des3, 5d
section 软件开发
需求理解 :crit, done, 2020-01-06,120h
设计框架 :crit, done, after des2, 2d
编码 :crit, active, 3d
代码审查 :crit, 5d
section 软件测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1, 20h
测试报告 :48h
Mon 06 Mon 13 Mon 20 需求 原型 UI设计 环境部署 需求理解 设计框架 编码 代码审查 功能测试 压力测试 测试报告 系统设计 软件开发 软件测试 XX项目计划甘特图
2.3 时序图绘制
-
需要使用
mermaid解析，并在开头使用关键字sequenceDiagram指明 -
连线的样式
->： 实线连接-->：虚线连接->>：实线箭头指向-->>：虚线箭头指向
-
Title: 我是标题
-
participant A ：声明对象
# 时序图使用语法说明
sequenceDiagram
Title: 登录流程
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 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no
4、标准流程图源码格式（横向）：
Created with Raphaël 2.2.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no
5、UML时序图源码样例：
对象A 对象B 对象B你好吗?（请求） 对象B的描述 对象A的描述(提示) 我很好(响应) 你真的好吗？ 对象A 对象B 登录流程
6、UML时序图源码复杂样例：
对象A 对象B 小三 C 对象B你好吗?（请求） 对象B的描述 对象A的描述(提示) 我很好(响应) 你好吗 对象B找我了 你真的好吗？ 我们是朋友 没人陪我玩 对象A 对象B 小三 C 标题：复杂使用
7、UML标准时序图样例：
张三 李四 王五 王五你好吗？ 与疾病战斗 loop [ 健康检查 ] 合理 食物 看医生... 很好! 你怎么样? 很好! 张三 李四 王五 标题：复杂使用