在Markdown中使用mermaid画图之流程图

流程图

流程图由流程图方向、节点、节点形状、节点间关系构成

声明流程图

首先将代码块的解释器类型定义为mermaid:

···mermaid
flowchart LR  //flowchart 声明为流程图、LR确定流程图从左至右的方向
	id1[test1] //id--创建出一个节点、括号内为该节点显示的内容
	id2[test2]
	id3[test3]
···

流程图的方向有以下几种选择:

  • TB - 从上到下
  • TD - 自上而下/与自上而下相同
  • BT - 自下而上
  • RL - 从右到左
  • LR - 从左到右

创建节点&&节点形状

创建节点如上方代码块内容所示,仅需在流程图的声明下方使用id即可创建。
节点的形状在流程图中的声明样式有点类似于象形文字的感觉,所见即所得,例如长方形节点的形状是在id后面跟上[ ],圆形倒角的长方形为( ),具体类型与使用方法如下所示:

  • id( )
flowchart LR id(test)
  • id[ ]
flowchart LR id[test]
  • id[[ ]]
flowchart LR id[[test]]
  • id[( )]
flowchart LR id[(test)]
  • id(( ))
flowchart LR id((test))
  • id> ]
flowchart LR id>test]
  • id
flowchart LR id{test}
  • id{{ }}
flowchart LR id{{test}}
  • id[/ /]
flowchart LR id[/test/]
  • id[\ ]
flowchart LR id[\test\]
  • id[/ ]
flowchart LR id[/test\]
  • id[\ /]
flowchart LR id[\test/]

节点间关系

节点可以与链接/边连接。可以有不同类型的链接或将文本字符串附加到链接。
在mermaid中有两种写法:
1.声明节点时顺带声明节点间关系,如:id1-->id2
2.单独声明节点与节点间关系,逻辑更清晰,如:id1\n id2\n id1-->id2

flowchart LR id1[test1] id2[test2] id1-->id2 A-->B

以下是上方的效果的书写格式

flowchart LR
	id1[test1]
	id2[test2]
	id1 --> id2
    A --> B

节点间关系的样式

  • 带箭头的链接:A-->B
  • 无箭头:A---B
  • 箭头类型:--> --o --x
  • 多向箭头:o--o <--> x--x
  • 连接上带文字:A--test---B或A---|text|B
  • 带箭头的链接带文字:A-->|text|B或A--text-->B
  • 虚线链接:A-.->B
  • 带文本的虚线链接:A-. text .->B
  • 加粗的链接:A==text==>B
  • 多重链接:A--text-->B--text-->C
  • 简写多重关系:A-->B&C-->D 含义:A到B到D以及A到C到D
  • A&B-->C&D:A与B分别到C与D

链接的长度

连接的长度由破折号的个数决定,当连接上带文字时,多出来的破折号需在文字右侧(因为添加在左侧数量超过两个破折号后会被认为成一个节点)

flowchart LR A--YES-->D[list] C--YES------>E[list]

上方效果的书写格式:

flowchart LR
	A--YES-->D[list]
	C--YES------>E[list]

对于虚线链接或加粗的链接,要添加的字符为等号或点,如下表所示:

长度 1 2 3
普通的 --- ---- -----
正常带箭头 --> ---> ---->
加粗带箭头 ==> ===> ====>
虚线 -.- -..- -...-
虚线箭头 -.-> -..-> -...->

更复杂的节点描述

如果你想写出更详细的内容,又怕描述中包含特殊关键字,可以像shell一样使用双引号包裹描述,双引号的内容忽略解释。
还是可以使用转义字符,具体如下所示:

    flowchart LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
flowchart LR A["A double quote:#quot;"] -->B["A dec char:#9829;"]

给出的数字以 10 为底,因此#可以编码为#35;. 还支持使用 HTML 字符名称。

子图(节点间嵌套)

书写格式(子图与子图间可以相互嵌套):

subgraph title  //子图的名称
    direction LR  //子图的方向
    graph definition  //节点间链接
end

例:

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
flowchart TB c1-->a2 subgraph one [666] a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end

子图间也可进行链接

如下所示:

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

注释

可以在流程图中输入注释,解析器将忽略这些注释。注释需要单独一行,并且必须以%%(双百分号)开头。注释开始后到下一个换行符的任何文本都将被视为注释,包括任何流语法

flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

美化节点

可以对节点应用特定样式,例如较粗的边框或不同的背景颜色。

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
flowchart LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

比每次都定义样式更方便的是定义一个样式类,并将该类附加到应该具有不同外观的节点上。

类定义如下例所示:

    classDef className fill:#f9f,stroke:#333,stroke-width:4px;

将类附加到节点按以下方式完成:

    class nodeId1 className;

也可以在一个语句中将一个类附加到节点列表:

    class nodeId1,nodeId2 className;

添加类的更短形式是使用运算符将类名附加到节点:::,如下所示:

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;
flowchart LR A:::someclass --> B classDef someclass fill:#f96;

美化链接样式

可以设置普通的链接样式。例如,

linkStyle id3 stroke:#ff3,stroke-width:4px,color:red;

如果默认方法不能满足需要,则可以设置用于项目之间线条的曲线类型。可用的曲线样式包括basis、bump、linear、monotoneX、monotoneY、natural、step、stepAfter和stepBefore。

在此示例中,从左到右的图形使用stepBefore曲线样式:

%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR

有关可用曲线的完整列表,包括自定义曲线的说明,请参阅d3-shape项目中的Shapes文档 。

参考链接:
https://www.iodraw.com/codechart/tutorial/zh/flowchart.html
http://mermaid.js.org/intro/

热门相关:暖君   朔明   唐土万里   都市狐仙养成记   抗日之全能兵王