Hello👋,this is lele0120😄.|

乐乐0120

园龄:1年1个月粉丝:1关注:1

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

流程图

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

声明流程图

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

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

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

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

创建节点&&节点形状

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

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

节点间关系

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

test1
test2
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

链接的长度

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

YES
YES
A
list
C
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;"]
A double quote:"
A dec char:♥

给出的数字以 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
three
666
c2
c1
two
b2
b1
a2
a1

子图间也可进行链接

如下所示:

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
three
one
c2
c1
two
b2
b1
a2
a1

注释

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

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
Start
Stop

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

类定义如下例所示:

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;
A
B

美化链接样式

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

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/

本文作者:lele0120

本文链接:https://www.cnblogs.com/lele0120/p/17978150

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   乐乐0120  阅读(1251)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起