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

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

参考资料:
如何在Markdown中画流程图open in new window
vuepress-plugin-flowchartopen in new window

基本语法

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

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

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

示例:
从上到下

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

效果:

基本图形

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

示例:

	```mermaid
	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] 
	```

效果:

子流程图

格式:

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

效果:

自定义样式

语法: 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
	```

效果:

案例

横向流程图

示例:

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

效果:

竖向流程图

示例:

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

效果:

标准流程图

示例:

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

效果:

标准流程图(横向)

示例:

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

效果:

标准流程图(复杂)

示例:

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

效果:

UML时序图

示例:

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

效果:

UML时序图(标准)

示例:

	```mermaid 
	%% 时序图例子,-> 直线,-->虚线,->>实线箭头
	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
	```

效果:

Last Updated:
Contributors: hqdxhyf, huangyanfu