program

发布日期: 2024-01-20

更新日期: 2024-07-14

文章字数: 3.4k

阅读时长: 15 分

阅读次数:

Mermaid-流程图

摘录自流程图语法 | Mermaid 中文网 (nodejs.cn)

流程图由 nodes（几何形状）和 edges（箭头或线条）组成。 Mermaid 代码定义了如何制作节点和边，并适应不同的箭头类型、多方向箭头以及任何与子图的链接。

一个节点（默认）

Code:

---
title: Node
---
flowchart LR
    id

---
title: Node
---
flowchart LR
    id

带有文本的节点

也可以在框中设置与 id 不同的文本。如果执行此操作多次，则它将是为要使用的节点找到的最后一个文本。此外，如果稍后为节点定义边，则可以省略文本定义。渲染盒子时将使用先前定义的值。

Code:

---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]

---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]

统一码文本

使用 " 将 unicode 文本括起来。

Code:

flowchart LR
    id["This ❤ Unicode"]

flowchart LR
    id["This ❤ Unicode"]

Markdown 格式

使用双引号和反引号 “text” 将 Markdown 文本括起来。

Code:

%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

方向

该语句声明了流程图的方向。

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

Code:

flowchart TD
    Start --> Stop

flowchart TD
    Start --> Stop

这声明流程图是从左到右定向的 (LR)。

Code:

flowchart LR
    Start --> Stop

flowchart LR
    Start --> Stop

可能的流程图方向是：

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

节点形状

具有圆边的节点

Code:

flowchart LR
    id1(This is the text in the box)

flowchart LR
    id1(This is the text in the box)

体育场形状的节点

Code:

flowchart LR
    id1([This is the text in the box])

flowchart LR
    id1([This is the text in the box])

子程序形状中的节点

Code:

flowchart LR
    id1[[This is the text in the box]]

flowchart LR
    id1[[This is the text in the box]]

圆柱形节点

Code:

flowchart LR
    id1[(Database)]

flowchart LR
    id1[(Database)]

一个圆形的节点

Code:

flowchart LR
    id1((This is the text in the circle))

flowchart LR
    id1((This is the text in the circle))

形状不对称的节点

Code:

flowchart LR
    id1>This is the text in the box]

flowchart LR
    id1>This is the text in the box]

目前只有上面的形状是可能的，而不是它的镜像。这可能会随着未来的版本而改变。

节点（菱形）

Code:

flowchart LR
    id1{This is the text in the box}

flowchart LR
    id1{This is the text in the box}

六边形节点

Code:

flowchart LR
    id1{{ This is the text in the box }}

此处渲染会报错

平行四边形

Code:

flowchart TD
    id1[/This is the text in the box/]

flowchart TD
    id1[/This is the text in the box/]

平行四边形 alt

Code:

flowchart TD
    id1[\This is the text in the box\]

flowchart TD
    id1[\This is the text in the box\]

梯形

Code:

flowchart TD
    A[/Christmas\]

flowchart TD
    A[/Christmas\]

梯形 alt

Code:

flowchart TD
    B[\Go shopping/]

flowchart TD
    B[\Go shopping/]

双圈

Code:

flowchart TD
    id1(((This is the text in the circle)))

flowchart TD
    id1(((This is the text in the circle)))

节点之间的链接

节点可以通过链接/边连接。可以有不同类型的链接或将文本字符串附加到链接。

带箭头的链接

Code:

flowchart LR
    A-->B

flowchart LR
    A-->B

一个打开的链接

Code:

flowchart LR
    A --- B

flowchart LR
    A --- B

链接上的文本

Code:

flowchart LR
    A-- This is the text! ---B

flowchart LR
    A-- This is the text! ---B

Code:

flowchart LR
    A---|This is the text|B

flowchart LR
    A---|This is the text|B

带有箭头和文本的链接

Code:

flowchart LR
    A-->|text|B

flowchart LR
    A-->|text|B

Code:

flowchart LR
    A-- text -->B

flowchart LR
    A-- text -->B

虚线链接

Code:

flowchart LR
   A-.->B;

flowchart LR
   A-.->B;

带文本的虚线链接

Code:

flowchart LR
   A-. text .-> B

flowchart LR
   A-. text .-> B

粗链接

Code:

flowchart LR
   A ==> B

flowchart LR
   A ==> B

带文本的粗链接

Code:

flowchart LR
   A == text ==> B

flowchart LR
   A == text ==> B

看不见的链接

Code:

flowchart LR
    A ~~~ B

flowchart LR
    A ~~~ B

链接的链接

可以在同一行中声明多个链接，如下所示：

Code:

flowchart LR
   A -- text --> B -- text2 --> C

flowchart LR
   A -- text --> B -- text2 --> C

还可以在同一行中声明多个节点链接，如下所示：

Code:

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

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

然后，你可以以非常富有表现力的方式描述依赖。就像下面的一行字：

flowchart TB
    A & B--> C & D

flowchart TB
    A & B--> C & D

如果使用基本语法描述同一个图，则需要四行。警告一句，这样做可能会导致流程图更难以 Markdown 形式阅读。我想到了瑞典语“lagom”。意思是，不能太多，也不能太少。这也适用于表达语法。

Code:

flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D

flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D

新的箭头类型

支持以下新类型的箭头：

Code:

flowchart LR
    A --o B
    B --x C

flowchart LR
    A --o B
    B --x C

多方向箭头

可以使用多向箭头。

Code:

flowchart LR
    A o--o B
    B <--> C
    C x--x D

flowchart LR
    A o--o B
    B <--> C
    C x--x D

链接的最小长度

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

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

Code:

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

注意链接仍可能比渲染引擎所请求的等级数更长，以适应其他请求。

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

Code:

flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]

flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]

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

长度	1	2	3
普通的	`---`	`----`	`-----`
正常带箭头	`-->`	`--->`	`---->`
厚的	`===`	`====`	`=====`
粗带箭头	`==>`	`===>`	`====>`
点状	`-.-`	`-..-`	`-...-`
带有箭头的虚线	`-.->`	`-..->`	`-...->`

破坏语法的特殊字符

可以将文本放在引号内以渲染更麻烦的字符。如下例所示：

Code:

flowchart LR
    id1["This is the (text) in the box"]

flowchart LR
    id1["This is the (text) in the box"]

用于转义字符的实体代码

可以使用此处示例的语法对字符进行转义。

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 字符名称。

子图

Code:

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

你还可以为子图设置显式 id。

Code:

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

流程图

使用图形类型流程图，还可以设置子图的边和子图的边，如下流程图所示。

Code:

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

子图中的方向

使用 graphtype 流程图，你可以使用方向语句来设置子图渲染的方向，如本例所示。

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

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

局限性

如果任何子图的节点链接到外部，则子图方向将被忽略。相反，子图将继承父图的方向：

Code:

flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ These subgraphs are identical, except for the links to them:

    %% Link *to* subgraph1: subgraph1 direction is maintained
    outside --> subgraph1
    %% Link *within* subgraph2:
    %% subgraph2 inherits the direction of the top-level graph (LR)
    outside ---> top2

flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ These subgraphs are identical, except for the links to them:

    %% Link *to* subgraph1: subgraph1 direction is maintained
    outside --> subgraph1
    %% Link *within* subgraph2:
    %% subgraph2 inherits the direction of the top-level graph (LR)
    outside ---> top2

Markdown 字符串

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

%%{init: {"flowchart": {"htmlLabels": false}} }%%
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 in the hog")
end

%%{init: {"flowchart": {"htmlLabels": false}} }%%
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 in the hog")
end

格式设置：

对于粗体文本，请在文本前后使用双星号 (**)。
对于斜体，请在文本前后使用单个星号 (*)。
对于传统字符串，你需要添加 <br> 标签以使文本换行在节点中。但是，当文本变得太长时，Markdown 字符串会自动换行，并允许你只需使用换行符而不是 <br> 标记来开始新行。

此功能适用于节点标签、边标签和子图标签。

相互作用

可以将单击事件绑定到节点，单击可以导致 JavaScript 回调(demo略)或将在新浏览器选项卡中打开的链接。

Code:

flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "https://www.github.com" _blank
    click B "https://www.github.com" "Open this in a new tab" _blank
    click C href "https://www.github.com" _blank
    click D href "https://www.github.com" "Open this in a new tab" _blank

flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "https://www.github.com" _blank
    click B "https://www.github.com" "Open this in a new tab" _blank
    click C href "https://www.github.com" _blank
    click D href "https://www.github.com" "Open this in a new tab" _blank

注释

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

Code:

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

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

样式和类别

设置链接样式

可以设置链接样式。例如，你可能想要设计一个在流程中向后移动的链接。由于链接没有像节点一样的 id，因此需要其他一些方法来决定链接应附加到什么样式。使用图表中定义链接时的顺序号来代替 ids，或者使用默认值应用于所有链接。在下面的示例中，linkStyle 语句中定义的样式将属于图中的第四个链接：

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

还可以通过用逗号分隔链接编号，在单个语句中向多个链接添加样式：

linkStyle 1,2,7 color:blue;

样式线条曲线

如果默认方法不能满足你的需求，可以设置用于项目之间线条的曲线类型的样式。可用的曲线样式包括 basis、bumpX、bumpY、cardinal、catmullRom、linear、monotoneX、monotoneY、natural、step、stepAfter 和 stepBefore。

在此示例中，从左到右的图表使用 stepBefore 曲线样式：

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

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

设置节点样式

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

Code:

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;

此外，还可以在一条语句中为多个类定义样式：

classDef firstClassName,secondClassName font-size:12pt;

将类附加到节点的操作如下：

class nodeId1 className;

还可以在一条语句中将一个类附加到节点列表：

class nodeId1,nodeId2 className;

添加类的一种较短形式是使用 ::: 运算符将类名附加到节点，如下所示：

Code:

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

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

当声明节点之间的多个链接时可以使用这种形式：

Code:

flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f

flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f

对 fontawesome 的基本支持

可以添加来自 fontawesome 的图标。

通过语法 fa 访问图标：#图标类名#.

Code:

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

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

Mermaid 与 Font Awesome 版本 5 兼容，仅限免费图标。检查你使用的图标是否来自支持的图标集。

👑Dee👑

https://www.saddyfire.cn/2024/01/20/mermaid-flowchart/

本博客所有文章除特別声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 👑Dee👑 !

Mermaid Markdown

JVM-Tuning-04-JVM监控及诊断-分析GC日志

JVM监控及诊断-分析GC日志

2024-01-20 program

JVM

node

nvm管理node.js

2024-01-20 program

node