技术笔记

外观

图例

约 2156 字大约 7 分钟

2025-06-19

流程图、时序图(顺序图)、甘特图

在markdown中画流程图，可以使用mermaid ，mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本栏介绍了mermaid中流程图在markdown的使用。

参考资料：
如何在Markdown中画流程图
vuepress-plugin-flowchart

基本语法

	```mermaid
		graph 流程图方向
		流程图内容
	```

流程图方向有下面几个值：

  • TB 从上到下
  • BT 从下到上
  • RL 从右到左
  • LR 从左到右
  • TD 同TB

示例：
从上到下

	```mermaid
	graph TD
	A --> B
	```

效果：

	graph TD
	A --> B

基本图形

  • 识别符 + [文字描述] ：矩形
  • 识别符 + (文字描述) ：圆角矩形
  • 识别符 + >文字描述] ：不对称的矩形
  • 识别符 + {文字描述} ：菱形
  • 识别符 + ((文字描述)) ：圆形

示例：

	```mermaid
	graph TD
    A[带文本的矩形]
    B(带文本的圆角矩形)
    C>带文本的不对称的矩形]
    D{带文本的菱形}
    E((带文本的圆形))
	```

效果：

	graph TD
    A[带文本的矩形]
    B(带文本的圆角矩形)
    C>带文本的不对称的矩形]
    D{带文本的菱形}
    E((带文本的圆形))

节点之间的连接

  • 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并在中间加上文字描述

示例：

	```mermaid
	graph LR
    A[A] --> B[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] 
	```

效果：

	graph LR
    A[A] --> B[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]

子流程图

格式：

subgraph title
    graph definition
end

示例：

	```mermaid
	graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
	```

效果：

	graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

自定义样式

语法： style id 具体样式

示例：

	```mermaid
	graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
	```

效果：

	graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5

案例

横向流程图

示例：

	```mermaid
	graph LR
    start[开始] --> input[输入A,B,C]
    input --> conditionA{A是否大于B}
    conditionA -- YES --> conditionC{A是否大于C}
    conditionA -- NO --> conditionB{B是否大于C}
    conditionC -- YES --> printA[输出A]
    conditionC -- NO --> printC[输出C]
    conditionB -- YES --> printB[输出B]
    conditionB -- NO --> printC[输出C]
    printA --> stop[结束]
    printC --> stop
    printB --> stop
	```

效果：

	graph LR
    start[开始] --> input[输入A,B,C]
    input --> conditionA{A是否大于B}
    conditionA -- YES --> conditionC{A是否大于C}
    conditionA -- NO --> conditionB{B是否大于C}
    conditionC -- YES --> printA[输出A]
    conditionC -- NO --> printC[输出C]
    conditionB -- YES --> printB[输出B]
    conditionB -- NO --> printC[输出C]
    printA --> stop[结束]
    printC --> stop
    printB --> stop

竖向流程图

示例：

	```mermaid
	graph TB
    start[开始] --> input[输入A,B,C]
    input --> conditionA{A是否大于B}
    conditionA -- YES --> conditionC{A是否大于C}
    conditionA -- NO --> conditionB{B是否大于C}
    conditionC -- YES --> printA[输出A]
    conditionC -- NO --> printC[输出C]
    conditionB -- YES --> printB[输出B]
    conditionB -- NO --> printC[输出C]
    printA --> stop[结束]
    printC --> stop
    printB --> stop
	```

效果：

	graph TB
    start[开始] --> input[输入A,B,C]
    input --> conditionA{A是否大于B}
    conditionA -- YES --> conditionC{A是否大于C}
    conditionA -- NO --> conditionB{B是否大于C}
    conditionC -- YES --> printA[输出A]
    conditionC -- NO --> printC[输出C]
    conditionB -- YES --> printB[输出B]
    conditionB -- NO --> printC[输出C]
    printA --> stop[结束]
    printC --> stop
    printB --> stop

标准流程图

示例：

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

效果：

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

标准流程图（横向）

示例：

    ```flow
    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
    ```

效果：

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

标准流程图（复杂）

示例：

    ```flow
    st=>start: Start|past:>http://www.google.com[blank]
    e=>end: End|future:>http://www.google.com
    op1=>operation: My Operation|past
    op2=>operation: Stuff|current
    sub1=>subroutine: My Subroutine|invalid
    cond=>condition: Yes
    or No?|approved:>http://www.google.com
    c2=>condition: Good idea|rejected
    io=>inputoutput: catch something...|future

    st->op1(right)->cond
    cond(yes, right)->c2
    cond(no)->sub1(left)->op1
    c2(yes)->io->e
    c2(no)->op2->e
    ```

效果：

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

UML时序图

示例：

	```mermaid 
	sequenceDiagram
	对象A->对象B: 对象B你好吗?（请求）
	Note right of 对象B: 对象B的描述
	Note left of 对象A: 对象A的描述(提示)
	对象B-->对象A: 我很好(响应)
	对象A->对象B: 你真的好吗？
	```

效果：

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

UML时序图（复杂）

示例：

	```mermaid 
	sequenceDiagram
	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: 没人陪我玩
	```

效果：

sequenceDiagram
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: 没人陪我玩

UML时序图（标准）

示例：

	```mermaid 
	%% 时序图例子,-> 直线，-->虚线，->>实线箭头
	sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
	```

效果：

	%% 时序图例子,-> 直线，-->虚线，->>实线箭头
	sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

甘特图

示例：

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

效果：

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