Mermaind学习笔记

一、流程图

1，节点

flowchart LR
    id
    id1[带文字节点]
    id2["Unicode文本"]
    markdown["`this ** is ** _Markdown_`"];
    id4[多行文本] -->
    newLines["`Line1
    Line2
    line3`"]

方向

这声明流程图是从上到下（或）定向的。TD

TB

flowchart TD
	开始 --> 停止

flowchart TB
	开始 --> 停止

flowchart TB
	开始 --> 停止

flowchart TD
	开始 --> 停止

flowchart TB
	开始 --> 停止

flowchart TB
	开始 --> 停止

这声明流程图的方向是从左到右 （）。LR

flowchart LR
	开始 --> 停止

可能的流程图方向是：

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

节点形状

圆边节点

flowchart LR
  id(圆边节点)

体育场形节点

flowchart LR
	id([体育场形节点])

子例程形节点

flowchart LR
	id[[子例程形节点]]

圆柱形节点

flowchart LR
	id[(数据库)]

圆形节点

flowchart LR
	id((圆形节点))

不对称形状节点

flowchart LR
	id1>不对称形状节点]

菱形节点

flowchart LR
	id{菱形节点}

六边形节点

flowchart LR
 id{{六边形节点}}

平行四边形节点

flowchart LR
	id[/平行四边形节点/]
	id2[\平行四边形节点\]

梯形节点Trapezoid

flowchart TD
	id[/梯形节点\]
	id2[\梯形节点/]

双圆节点 Double circle

markdown支持不好

flowchart TD
    id(((双圆节点)))

节点之间的连接

带箭头的连接

flowchart LR
	1 --> 2

直接连接 open link

flowchart LR
	a --- b

链接上的文字

flowchart LR
	a -- 链接上的文字 --- b
	c--- |链接上的文字|d

带有箭头和文本的链接

flowchart LR
	a --> |带有箭头和文本的链接|b
	c -- 带有箭头和文本的链接 -->d

虚线链接

flowchart LR
	a -.-> b

带文本的虚线链接

flowchart LR
	a -. 带文本的虚线链接 .-> b

粗链接Thick link

flowchart LR
	a ==> b

包含文本的粗链接

flowchart LR
	a == 包含文本的粗链接 ==> b

不可见链接

markdown不支持

flowchart LR
	a ~~~ b

链接链条 Chaining of links

可以在同一行中声明许多链接

flowchart LR
	a -- Chaining of links --> b -- Chaining of links --> c

也可以在同一行中声明多个节点链接

flowchart LR
	a --> b & c --> d

flowchart TB
	a & b --> c & d

如果使用基本语法描述相同的关系图，则需要四行。警告一下，这可能会使流程图更难以降价形式阅读。我想到了瑞典语这个词。这意味着，不要太多也不要太少。这也适用于表达语法.

flowchart TB
	a --> c
	a --> d
	b --> c
	b --> d

新箭头

flowchart LR
	a --o b
	b --x c

多方向箭头

flowchart LR
	a o--o b
	c <--> d
	e x--x f

链接的最小长度

流程图中的每个节点最终被分配给渲染图中的等级，即根据其链接到的节点分配给垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量的排名，但您可以通过在链接定义中添加额外的短划线来要求任何链接比其他链接长。

在以下示例中，在从节点 B 到节点 E 的链接中添加了两个额外的短划线，以便它比常规链接跨越两个等级：

flowchart TD
	a[开始]  --> b{是?}
	b -->|yes| c[ok]
	c --> d[反思]
	d --> b
	b ---->|no| e[结束]

当链接标签写入链接中间时，必须在链接的右侧添加额外的破折号。以下示例等效于上一个示例：

flowchart TB
	a[开始] --> b{是?}
	b --> |yes| c[ok]
	c[反思] --> b
	b -- no ----> e[结束]

对于虚线或粗链接，要添加的字符是等号或点，如下表所示：

flowchart LR
	a --- b
	c ---- d
	e ----- f

flowchart LR
	a --> b
	c ---> d
	e ----> f

flowchart LR
	a === b
	c ==== d
	e ===== f

flowchart LR
	a ==> b
	c ===> d
	e ====> f

破坏语法的特殊字符

可以将文本放在引号内，以便呈现更麻烦的字符

flowchart LR
 id["几号(text)"]

用于转义字符的实体代码

flowchart LR
	id["a: #quot;"] --> b["一个十进制数字：#9829"]

子图 Subgraphs

flowchart TB
	c1 --> a2
	subgraph 1
	a1 --> a2
	end
	subgraph 2
	b1 --> b2
	end
	subgraph 3
	c1 --> c2
	end

您还可以为子图设置显式 ID。

flowchart TB
	c1 --> a2
	subgraph id[1]
	a1 --> a2
	end

流程图

使用graphtype流程图，还可以设置子图的边

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

子图中的方向

使用 graphtype 流程图，您可以使用方向语句来设置子图将呈现的方向

flowchart LR
	subgraph Top
		direction LR
		subgraph B1
			direction RL
			i1 --> f1
		end
		subgraph B2
			direction BT
			i2 --> f2
		end
	end
	A --> Top --> B

Markdown 字符串

“Markdown 字符串”功能通过提供更通用的字符串类型来增强流程图和思维导图，该字符串类型支持粗体和斜体等文本格式选项，并自动将文本换行在标签内。

flowchart LR
subgraph "One"
	a("`The **cat**
	in the hat`") -- "edge label" --> b{{"`The **dog** in the hog·`"}}
end
subgraph "`**Two**`"
	c("`The **cat**
	in the hat`") -- "`Bold **edge label`" --> d("The dog int the hog")
end

格式：

对于粗体文本，请在文本前后使用双星号 （）。**
对于斜体，请在文本前后使用单星号 （）。*
对于传统字符串，您需要为文本添加标签以换行节点。但是，markdown 字符串会在文本变得太长时自动换行，并允许您通过简单地使用换行符而不是标签来开始新行。<br><br>
此功能适用于节点标签、边缘标签和子图标签。

交互 Interaction

可以将单击事件绑定到节点，单击可能导致 javascript 回调或将在新的浏览器选项卡中打开的链接。
click nodeId callback
click nodeId call callback()

nodeId 是节点的 ID
回调是在显示图形的页面上定义的JavaScript函数的名称，该函数将以nodeId作为参数进行调用。

flowchart LR
	a --> b
	b --> c
	click a "https://www.github.com"
	click b href "https: //www.baidu.com"

注释

flowchart LR
%%这是注释%%
	a --> b

设置节点样式

flowchart LR
	id(start) --> b(stop)
	style id fill: #f9f,stroke:#333,stroke-width:40x
	style b fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

对fontawesome的基本支持

可以从字体添加图标。

这些图标可通过语法 fa：#icon类名#访问。

在markdown中不支持

flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)