markdown 中流程图详解

目录

  • 1. Mermaid 流程图
      • 示例
      • 语法结构
      • 显示方向
      • 节点类型
      • 语法详解
          • 节点连线
          • 节点样式
  • 2. Flowchart流程图
      • 示例
      • 语法结构
      • 节点类型
      • 语法详解
          • 节点定义
          • 节点连线
          • 连线样式
          • 关键字
          • 节点状态
  • 3. 时序图
      • 示例
      • 语法结构
      • 语法详解
          • 消息格式
          • 连接样式
          • 激活方块
          • 注释
          • 循环(while)
          • 条件(if/else)

   markdown有不同的插件实现,对应的语法也不太一样,对于插件就是把引用的语法对应成相应的标签,本文以CSDN中写作为例进行分别对mermaid和flowchart进行实例说明和语法解释。

1. Mermaid 流程图

示例

	```mermaid
	graph TB
	A[Apple]-->B{Boy}
	A---C(Cat)
	B.->D((Dog))
	C==喵==>D
	style A fill:#2ff,fill-opacity:0.1,stroke:#faa,stroke-width:4px
	style D stroke:#000,stroke-width:8px;
	```
Apple
Boy
Cat
Dog

语法结构

	```mermaid
	graph 方向
	节点以及节点连线(定义和连线步骤可以分开)
	(样式调整)
	```

显示方向

  • TB/TD( top bottom/top down)表示从上到下
  • BT(bottom top)表示从下到上
  • RL(right left)表示从右到左
  • LR(left right)表示从左到右

节点类型

   节点本身的展现形式,是通过不同括号来代表各自不同的形状,默认为矩形。

  • 默认节点: A
  • 矩形节点: B[矩形]
  • 圆角矩形节点: C(圆角矩形)
  • 圆形节点: D((圆形))
  • 非对称节点: E>非对称]
  • 菱形节点: F{菱形}
A
矩形
圆角矩形
圆形
非对称
菱形

语法详解

节点连线

   线条本身的形式有多种,通过常规的英文格式的格式来标识,具体如下:

  • 箭头连接 A1- ->B1
  • 开放连接 A2- - -B2
  • 虚线箭头连接 A3.->B3 或者 A3-.->B3
  • 虚线连接 A4.-B4 或者 A4-.-B4
  • 粗线箭头连接 A5==>B5
  • 粗线开放连接 A6===B6
  • 标签虚线箭头连接 A7-.text.->B7
  • 标签开放连接 A8- -text- - -B8
text
text
A1
B1
A2
B2
A3
B3
A4
B4
A5
B5
A6
B6
A7
B7
A8
B8
节点样式

   样式写法跟矢量图(SVG)中CSS的写法一致,含有的属性有:

style 节点  样式

2. Flowchart流程图

示例

	```mermaid
	flowchat
	st=>start: 开始
	e=>end: 结束
	op1=>operation: 操作1 | past
	op2=>operation: 操作2 | current
	op3=>operation: 操作3 | future
	pa=>parallel: 多输出操作4 | approved
	cond=>condition: 确认? | rejected
	
	st->op1->cond
	cond(true)->e	
	cond(no)->op2(right)->op3->pa(path1,right)->op1
	pa(path2,left) ->e
	st@>op1({"stroke":"Blue"})@>cond({"stroke":"Green"})@>e({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})
	```
Created with Raphaël 2.2.0 开始 操作1 确认? 结束 操作2 操作3 多输出操作4 yes no

语法结构

	```mermaid
	flowchat
	定义节点
	连接节点
	(样式调整)
	```

节点类型

  目前官网提供7种节点,其实还有很多别的节点类型,但可能插件脚本还没支持。

  • 开始(椭圆形):start
  • 结束(椭圆形):end
  • 操作(矩形):operation
  • 多输出操作(矩形):parallel
  • 条件判断(菱形):condition
  • 输入输出(平行四边形):inputoutput
  • 预处理/子程序(圣旨形):subroutine

语法详解

节点定义
变量名=>节点标识: 节点显示名
节点连线
变量名1->变量名2->...->变量名n
连线样式

  设置变量m和变量n之间连线的样式,具体样式由变量n后面key-value控制,需要两个变量之间有直接连线。语法中的连接符为(@>)。

变量名m@>变量名n({"key":"value"})
关键字
  • yes/true:condition类型变量连接时,用于分别表示yes条件的流向
  • no/false:同上,表示否定条件的流向
  • left/right:表示连线出口在节点位置(默认下面是出口,如op3),可以跟condition变量一起用:cond(yes,right)
  • path1/path2/path3:parallel变量的三个出口路径(默认下面是出口)
节点状态

  为节点设置不同的状态,可以通过不同的颜色显示,其中状态包括下面6个,含义如英文所示,不过CSDN中好像目前还不支持:

  • past
  • current
  • future
  • approved
  • rejected
  • invalid

3. 时序图

示例

	```mermaid
	    sequenceDiagram
	    participant 张 as 张三
	    participant 李 as 李四
	    participant 王 as  王五   
	    张 ->> +李: 你好!李四, 最近怎么样?
	    李-->> 王: 你最近怎么样,王五?
	    李--x -张: 我很好,谢谢!
	    activate 王
	    李-x 王: 我很好,谢谢!   
	    Note over 李,王: 李四想了很长时间, 文字太长了
不适合放在一行. deactivate 王 loop 李四再想想 李-->>王: 我还要想想 王-->>李: 想想吧 end 李-->>张: 打量着王五... 张->>王: 很好... 王五, 你怎么样? ```
张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 我还要想想 想想吧 loop [ 李四再想想 ] 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

语法结构

	```mermaid
	    sequenceDiagram
	    participant 别名 as 对象显示名(全部直接用显示名时可以不写)
	    顺序增加图表中消息
	    (可以加入标签提示)
	```

语法详解

消息格式
【对象1】【箭头类型】【对象2】 : 消息内容
连接样式

一共6种箭头类型的样式:

  • 实线:->
  • 虚线:- ->
  • 带箭头的实线:->>
  • 带箭头的虚线:- ->>
  • x的实线:-x
  • x的虚线:- -x
激活方块

  这部分有两种写法,第一种是显示通过语法实现,语法如下,会在指定对象的消息中增加,示例中李四;第二种直接在对象前面增加加减号(开始时用加号“+”,结束时用减号“-”),则在加号对应的对象上开始,减号对应的时间结束,示例中王五。

开始:activate 【对象】
结束:deactivate 【对象】
注释
Note 【位置】 【对象】

注释显示的位置有三个,以被标记的对象中心为参考系,基于横跨多个时,可以都逗号分隔,如示例:

  • right of
  • left of
  • over
循环(while)

见示例

loop 循环说明
【消息流】
end
条件(if/else)
alt 条件说明
【消息流】
else
【消息流】
end
opt 条件说明
【消息流】
end

示例内容太多了,为了防止太臃肿,把条件内容独立出来进行演示,当有else时,用alt,否则用opt。

	```mermaid
	    sequenceDiagram
	    participant 张 as 张三
	    participant 李 as 李四
	    张 ->> 李: 你好!李四, 最近怎么样?
	    alt 如果感冒了
	    李->> 张: 不太好,生病了。
	    else 挺好的
	    李->> 张: 我很好,谢谢。
	    end
	        opt 另外补充
	        李->> 张: 谢谢问候。
	    end
	```
张三 李四 你好!李四, 最近怎么样? 不太好,生病了。 我很好,谢谢。 alt [ 如果感冒了 ] [ 挺好的 ] 谢谢问候。 opt [ 另外补充 ] 张三 李四

参考自:
https://mermaidjs.github.io/
http://flowchart.js.org/

你可能感兴趣的:(其他)