Typora画图-Mermaid流程图

一.介绍

Mermaid 是一个用于画流程图.状态图.时序图.甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中

二.流程图基础

1.流程图符号和含义

Mermaid 的流程图的图形含义使用象形的表达形式，非常类似中国象形，理解起来也不难，比如矩形 [],圆角矩形(),圆形(())

图形 符号含义 示例
圆角矩形 表示开始和结束 id(“文字”)
矩形 表示过程环节 id[“文字”]
单向箭头线段 表示流程进行方向
菱形 决策判断 id{“文字”}
圆形 表示连接，避免流程图 id((“文字”))
右向旗帜节点 标志提示 id>“文字”] 
1
2
3
4
5
6

graph TB
    start("圆角矩形")
    rectangle["矩形"]
    rhombus{"菱形"}
    round(("圆形"))
    right_arrow>"右向旗帜节点"]

2.节点之间的连线

表述 说明 使用示例
–> 添加尾部箭头 A(把你送进去监牢)–>B{打开监牢}
— 不添加尾部箭头 A(把你送进去监牢)—B{打开监牢}
– 单线 A(把你送进去监牢)–B{打开监牢}
–text– 单线上加文字 A(把你送进去监牢)–你好亲爱的–B{打开监牢}
== 粗线 A(把你送进去监牢)==>B{打开监牢}
==text== 粗线加文字
-.- 虚线
-.text.- 虚线加文字
代码示例 1:箭头连线示例
1
2
3
4
5
6
7

graph TD
    A(把你送进去监牢)-->B{打开监牢门}
    B-->|"你是初犯,使用小箭头"|C["放进去小监牢"]
    C---E("三杠没有箭头指向")
    B==>|"你是老犯,使用大箭头"|D["换个大监牢"]
    D-- "终身监禁" ---forever("没出头了")
    D---|"终身监禁"|forever("没出头了")
代码示例 2：箭头上加文字

加文字方式：节点连线表述定义+文字+节点连线表述定义 如：-.|“文字”|.->id("")

1
2
3
4

graph TB
    connect["数据库连接"]--"root 127.0.0.1"-->start{"开始连接"}
    start-.虚线加文字.->ok["连接成功"]
    start-.->faild["虚线不加文字"]
代码示例3：结合fontawesome使用
1
2
3
4

graph TD
    B["fa:fa-weixin weixin"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner waitting);
代码示例4：给流程表标题添加样式

将其添加到流程图TD定义之后的顶部。 这将定义一个框，用下划线（）设置其文本的样式，并使框填充和描边为空白#FFF（样式标题） 并将其链接到实际的第一步/框（FirstStep），从而使其显示在顶部，同时使使用linkStyle 0隐藏链接

1
2
3
4
5
6
7
8

graph TD

title[<u>My Title</u>]
title-->FirstStep
style title fill:#FFF,stroke:#FFF
linkStyle 0 stroke:#FFF,stroke-width:0;

FirstStep-->...

3.布局方向

关键字 含义
TB/TD Top Bottom 从上到下
BT bottom top 从下到上
LR left right 从左到右
RL right left 从右到左

4.子图

1
2
3

subgraph title
 graph definition
end

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

graph TB

    subgraph 图3
    two1---two2
    end
    subgraph 图2
    three1 ==> three2
    end
        subgraph 图1
    one1-->one2
    end
    one1-->two2
    style 图2 fill:#f9f,stroke:#333,stroke-width:4px

三.代码格式

1.基本格式

基本格式： graph {布局方向[TB | BT | LR |RL ]} 【自定义代码】

2.示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

graph LR
	
    subgraph 管理系统
    DA1(fa:fa-ban infinity管理系统)--添加任务-->DB1(infi-sync-datasync服务)
    DB1-->DC1(定时任务)
    DC1-->DD2(添加任务到etcd)
    DB1-->DD1(同步任务)
    DD1-->DE1(infi-sync-grpc服务)
    DE1-->DF1(分发任务到mq)
    end
    
	subgraph 同步任务定时服务
	TA1(infi-timer服务)--启动-->TB1(监听etcd中任务到定时器)
	TB1--运行时-触发任务-->TC1(调用内网接口)
	TB1--运行时-->TC2(定时更新数据同步任务的状态及进度)
	TB1--运行时-->TC3(定时更新已完成任务记录)
	TC1--添加任务到-->TD1(rabbitmq)
	TC3--添加记录到-->TD2(elasticsearch)
	end
	
	subgraph 监视器服务
	MA1(infi-sync-monitor服务)--启动-->MB1(监控服务)
	MB1-->MB2(shell命令查看服务状态)
	MB2-->MC1(infi-sync-datasync服务)
	MB2-->MC2(infi-sync-grpc服务)
	MB2-->MC3(infi-sync-notify服务)
	MB2-->MC4(infi-timer服务)
	MC1-->MD1(发现服务停止,自动启动服务)
	MC2-->MD1
	MC3-->MD1
	MC4-->MD2(主节点停止,从节点启动)
	end
	
	subgraph 文件监听服务
	NA1(infi-sync-notify服务)--启动-->NB1(监听etcd同步任务)
	NB1--同步任务获取目录-->NC1(监听目录变动)
	NC1--触发文件变更事件-->ND1(添加任务到mq)
	NC1--触发文件变更事件-->ND2(记录日志到es)
	end

四.示例

1.横向流程图

1
2
3
4
5
6

graph LR
A[方形] --变化--> B(圆角)
B -.变化.-> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| D[结果2]
F[横向流程图]

2.竖向流程图

1
2
3
4
5
6

graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> D[结果1]
C --> E[结果2]
F[竖向流程图]

3.标准流程图(纵向)

1
2
3
4
5
6
7
8
9

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框（是或否？）
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

4.标准流程图(横向)

1
2
3
4
5
6
7
8
9

st=>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

5.UML 简单时序图样例

1
2
3
4
5

对象A->对象B: 对象B你好吗？（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述
对象B-->对象A: 我很好（响应）
对象A->对象B: 你真的好吗？

6.UML 复杂时序图样例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Title: 标题: 复杂使用
对象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: 没人陪我玩

7.UML 准样时序图标例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五，你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物
看医生...
李四-->张三: 很好！
王五->李四: 你怎么样？
李四-->王五: 很好！

8.甘兰图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

gantt

title 软件开发甘特图
dateFormat YYYY-MM-DD
section 设计
需求:done,des1,2020-01-01,2020-01-05
原型:active,des2,2020-01-06,3d
UI设计:des3,after des2,5d
未来任务:des4,after des3,5d
section 开发
学习准备理解需求:crit,done,2020-01-01,24h
设计框架:crit,done,after des2,2d
开发:crit,active,3d
未来任务:crit,5d
耍:2d
section 测试
功能测试:active,a1,after des3,3d
压力测试:after a1,20h
测试报告:48h