快速上手Mermaid流程图(graph)绘制详解

Waylee · 2024-11-15 00:05

马上注册,查看网站隐藏内容!!

您需要登录才可以下载或查看，没有账号？register

×

整理翻译：雪舞
更新时间：2024-11-15
发布站点：WAYLEE.NET

Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。
流程图（flow chart）是体现封闭系统运动状态的有效展示形式，可以让管理者、实现者清晰的认识系统运转流程，也可以直观的描述工作过程。
本文主要介绍了如何快速上手 Mermaid 流程图,不用贴图上传也不用拖拉点拽绘制,基于源码实时渲染流程图,操作简单易上手,广泛被集成于主流编辑器,包括 markdown 写作环境.
通过本节内容你将学习到以下主要内容:

了解什么是流程图以及Mermaid流程图;
掌握并能记住如何绘制Mermaid流程图;
了解 Gitbook 写作环境的相关集成插件.

什么是Mermaid流程图

关键词

- 项目地址
- 在线编辑
- 官方文档

千言万语不如一张图,使用图形展示事物处理流程的图形称之为流程图.

Mermaid是一个基于 Javascript 的图解和制图工具.它基于 markdown 语法来简化和加速生成流程图的过程,也不止于生成流程图.

除了 graph，还可以使用 flowchart。

如果您在 Flowchart 节点中使用单词 “end” ，请将整个单词或任何字母大写（例如，“End” 或 “END”），或应用此解决方法。以所有小写字母键入 “end” 将破坏流程图。

如果您使用字母“o”或“x”作为连接 Flowchart 节点中的第一个字母，请在字母前添加空格或将字母大写（例如，“dev--- ops”、“dev---Ops”）。

键入 “A---oB” 将创建一个圆边。

键入 “A---xB” 将创建一个交叉边。

源码

graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

效果

graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]

项目地址: https://github.com/mermaid-js/mermaid
在线编辑: https://mermaidjs.github.io/mermaid-live-editor/
官方文档: https://mermaid-js.github.io/mermaid/#/flowchart

Mermaid流程图快速入门

布局方向

关键词

+ TB
+ BT
+ LR
+ RL

流程图布局方向,由四种基本方向组成,分别是英文单词: top(上), bottom(下),left(左)和 right(右).其中可选值: TB (从上到下),BT (从下到上),LR (从左往右)和 RL (从右往左)四种.

核心: 仅支持上下左右四个垂直方向,是英文单词首字母大写缩写.

TB

从上到下: from Top to Bottom

源码

graph TB
    Start --> Stop

效果

graph TB Start --> Stop

BT

从下到上: from Bottom to Top

源码

graph BT
    Start --> Stop

效果

graph BT Start --> Stop

LR

从左往右: from Left to Right

源码

graph LR
    Start --> Stop

效果

graph LR Start --> Stop

RL

从右往左: from Right to Left

源码

graph RL
    Start --> Stop

效果

graph RL Start --> Stop

形状

关键词

- 节点形状
    + [矩形]
        - [[子程序形状]]
        - [(圆柱)]
        - [{暂不支持}]
        - [/平行四边形/]
        - [\平行四边形\]
        - [/梯形\]
        - [\梯形/]
    + (圆角矩形)
        - ((圆形))
        - ([体育场])
        - ({暂不支持})
    + {菱形}
        - {{六边形}}
        - {[暂不支持]}
        - {(暂不支持)}
    + >不对称矩形]

流程图节点形状,默认支持矩形和圆两种基本形状,包括基本形状的简单变体,支持嵌套组合形式,其中 [] 表示矩形,() 表示圆弧,{} 表示尖角(窃以为 <> 更适合)等等.

核心: 最外层代表主形状,内层辅助修饰.

一次性节点

一次性节点,默认表现为矩形节点,其文本内容直接显示 id 的值,适合后续不会出现多次引用的情况.

id 建议直接写成有意义的文本描述而不是当成唯一标识.

源码

graph TD
    id

效果

graph TD id

可重复节点

可重复节点,指定节点形状,其文本内容不再是 id 的值而是 <node shape> 的值,适合后续出现多次引用相同节点的情况.

id 代表节点的唯一标识,当前节点的文本描述由 <node shape> 的值指定,建议 id 写成有意义的唯一标识.

矩形

一般格式: [node description] ,[] 中括号表示节点是矩形形状,node description 是节点的描述文本.

源码

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

效果

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

圆角矩形

一般格式: (node description) ,() 小括号表示节点是圆角矩形形状,node description 是节点的描述文本.

源码

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

效果

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

体育场

一般格式: ([node description]) ,() 小括号嵌套 [] 中括号表示节点是大弧度的圆角矩形形状,也就是体育场形状,node description 是节点的描述文本.

源码

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

效果

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

子程序形状的节点

一般格式: [[node description]] ,[] 中括号嵌套 [] 中括号表示子程序形状的节点形状,node description 是节点的描述文本.

源码

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

效果

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

圆柱

一般格式: [(node description)] ,[] 中括号嵌套 () 小括号表示节点是圆柱形状,node description 是节点的描述文本.

源码

graph LR
    id1[(Database)]

效果

graph LR id1[(Database)]

圆形

一般格式: ((node description)) ,() 小括号嵌套 () 小括号表示节点是圆形形状,node description 是节点的描述文本.

源码

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

效果

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

不对称矩形

一般格式: >node description] ,左边是右尖括号 > ,右边是右中括号 ] 表示不对称矩形形状,node description 是节点的描述文本.

源码

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

效果

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

菱形

一般格式: {node description} ,{} 大括号表示菱形形状,node description 是节点的描述文本.

源码

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

效果

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

六角形

一般格式: {{node description}} ,{} 大括号嵌套 {} 大括号表示六角形形状,node description 是节点的描述文本.

源码

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

效果

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

左斜平行四边形

一般格式: [/node description/] ,[] 中括号嵌套 // 左斜杠表示左斜平行四边形形状,node description 是节点的描述文本.

源码

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

效果

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

右斜平行四边形

一般格式: [\node description\] ,[] 中括号嵌套 \\ 右斜杠表示右斜平行四边形形状,node description 是节点的描述文本.

源码

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

效果

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

梯形 A

一般格式: [/node description\] ,[] 中括号嵌套 /\ 左右斜杠表示上短下长梯形形状,node description 是节点的描述文本.

源码

graph TD
    A[/Christmas\]

效果

graph TD A[/Christmas\]

梯形 B

一般格式: [\node description/] ,[] 中括号嵌套 \/ 右左斜杠表示上长下短梯形形状,node description 是节点的描述文本.

源码

graph TD
    B[\Go shopping/]

效果

graph TD B[\Go shopping/]

双圆

一般格式: (((node description))) ,((())) 表示双圆形状, node description` 是节点的描述文本.

源码

graph LR
  node(((Content)))

效果

graph LR node(((Content)))

连接线

关键词

+ 实线/虚线
    - --
    - -.
+ 有箭头/无箭头
    - >
    - -
+ 有描述/无描述
    - 实线
        + --描述文字
        + |描述文字|
    - 虚线
        + -.描述文字
        + |描述文字|
+ 加粗
    - ==
+ 组合形式
    - -->
    - ---
    - -.->
    - -.-
    - 有描述实线有箭头
        + --描述文字-->
        + -->|描述文字|
    - 有描述实线无箭头
        + --描述文字---
        + ---|描述文字|
    - 有描述虚线有箭头
        + -.描述文字-.->
        + -.->|描述文字|
    - 有描述虚线无箭头
        + -.描述文字-.-
        + -.-|描述文字|
    - ==>
    - ===
    - 有描述加粗实线有箭头(2)
        + ==描述文字==>
        + ==>|描述文字|
    - 有描述加粗实线无箭头(2)
        + ==描述文字===
        + ===|描述文字|

流程图连接线样式,支持实线和虚线以及有箭头样式和无箭头样式,除此之外还支持添加连接线描述文字,其中 -- 代表实线,实线中间多一点 -.- 代表虚线,添加箭头用右尖括号 > ,没有箭头继续用短横线 -.

核心: 先实线再虚线,先有箭头再去箭头,左边位置添加描述文字需要区分实现还是虚线,右边位置添加描述文字格式一致.

有箭头无描述实线

一般格式: --> ,其中 -- 表示实线,> 表示有箭头.

源码

graph LR
    A-->B

效果

graph LR A-->B

无箭头实线

一般格式: --- ,其中 -- 表示实线,- 表示无箭头.

源码

graph LR
    A --- B

效果

graph LR A --- B

带描述的有箭头实线

一般格式: --connection line description--> ,其中左边的 -- 添加到实线左边位置,右边的 --> 表示带箭头的实线.

源码

graph LR
    A-- text -->B

效果

graph LR A-- text -->B

一般格式: |connection line description| ,其中 || 添加到连接线右边位置.

源码

graph LR
    A-->|text|B

效果

graph LR A-->|text|B

带描述的无箭头实线

一般格式: --connection line description ,其中左边的 -- 添加到实线左边位置,右边的 --- 表示不带箭头的实线.

源码

graph LR
    A-- This is the text ---B

效果

graph LR A-- This is the text ---B

一般格式: |connection line description| ,其中 || 添加到连接线右边位置.

源码

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

效果

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

有箭头虚线

一般格式: -.connection line description.-> ,其中左边的 -. 添加到虚线左边位置,右边的 .-> 表示带箭头的虚线.

源码

graph LR
   A-. text .-> B

效果

graph LR A-. text .-> B

有箭头加粗实线

一般格式: ==> ,表示加粗实线.

源码

graph LR
   A ==> B

效果

graph LR A ==> B

带描述的有箭头加粗实线

一般格式: ==connection line description ,左边的 == 添加到加粗实现左边,右边的 ==> 代表加粗实线.

源码

graph LR
   A == text ==> B

效果

graph LR A == text ==> B

带描述的有箭头加粗实线

一般格式: |connection line description| ,其中 || 添加到连接线右边位置.

源码

graph LR
   A ==>|text| B

效果

graph LR A ==>|text| B

高级用法

关键词

+ -->-->
+ &
+ ""
+ %%
+ subgraph

多节点链式连接

源码

支持链式连接方式,A-->B-->C 等价于 A-->B 和 B-->C 形式.

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

效果

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

多节点共同连接

支持共同连接方式,A-->B & C 等价于 A-->B 和 A-->C 形式.

源码

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

效果

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

多节点相互连接

多节点共同连接的变体形式,A & B --> C & D 等价于 A-->C ,A-->D,B-->C 和 B-->D 四种组合形式.

源码

graph TB
    A & B--> C & D

效果

graph TB A & B--> C & D

如果你使用基本语法描述相同的图表，它将需要四行代码。需要提醒的是，过度使用这种方式可能会导致流程图变得更难以在 Markdown 中阅读。让我想到了瑞典语中的 "lagom" 这个词。它的意思是，既不多也不太少。这个原则同样适用于富有表现力的语法。
源码

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

效果

graph TB A --> C A --> D B --> C B --> D

新的箭头类型

支持新类型的箭头：

圆边
交叉边缘

圆形边缘示例

源码

flowchart LR
    A --o B

效果

flowchart LR A --o B

交叉边缘示例

源码

flowchart LR
    A --x B

效果

flowchart LR A --x B

多向箭头

可以使用多方向箭头。

源码

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 的链接添加了两个额外的破折号(短划线)，使得它跨越了比常规链接多出两个排名：
源码

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]

注意：渲染引擎可能会为了适应其他请求，将链接延长超过请求的排名数。

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

源码

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
正常	---	----	-----
带箭头的正常	-->	--->	---->
粗线	===	====	=====
带箭头的粗线	==>	===>	====>
虚线	-.-	-..-	-...-
带箭头的虚线	-.->	-..->	-...->

双引号包裹特殊字符

连接线描述文字存在特殊字符使用双引号 "" 包裹处理,如遇到 [] 和 () 以及 {} 等特殊字符情况.

源码

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

效果

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

双引号包裹转义字符

支持 Html 转移字符

源码

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

效果

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

嵌套子流程图

定义

subgraph title
    graph definition
end

示例

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

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

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

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

效果

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

解释：
在这个示例中，subgraph ide1 [one] 设置了一个子图的显式ID ide1，并为该子图命名为 "one"。a1-->a2 表示子图内的节点 a1 和 a2 之间的连接。end 表示子图的结束。

flowcharts 流程图

在 flowchart 图类型中，还可以设置子图之间的边连接，正如下面的流程图所示。
源码

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 图类型中，您可以使用 direction 语句来设置子图的渲染方向，如以下示例所示：
源码

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

限制
如果子图的任何节点与外部相连接，则子图的方向设置将被忽略，子图将继承父图的方向。
源码

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

解释：

在此示例中，两个子图 "One" 和 "Two" 使用了 Markdown 字符串 格式，其中：

子图 "One" 和 "Two" 中的节点都使用了粗体和斜体，并且边标签和节点标签也使用了 Markdown 格式。
通过 Markdown 字符串，文本能够自动换行，而不需要   标签。

格式化：

粗体：使用双星号（**）包裹文本。
斜体：使用单星号（*）包裹文本。
在传统的字符串中，您需要使用   标签来换行，但使用 Markdown 字符串时，文本会自动换行，当文本过长时，您只需要在文本中插入换行符（\n），而不需要   标签。
这个功能适用于节点标签、边标签和子图标签。

禁用自动换行：
通过以下配置，可以禁用自动换行功能：

---
config:
  markdownAutoWrap: false
---
graph LR

互动

可以将点击事件绑定到节点，点击后可以触发 JavaScript 回调函数，或者打开一个链接，该链接将在新的浏览器标签页中打开。
信息
当使用 securityLevel='strict' 时，此功能被禁用；当使用 securityLevel='loose' 时，此功能被启用。
语法

click nodeId callback：点击节点时调用回调函数。
click nodeId call callback()：点击节点时调用指定的 JavaScript 函数。
其中：
nodeId 是节点的 ID。
callback 是页面上定义的 JavaScript 函数的名称，调用时将 nodeId 作为参数传递给该函数。

示例：工具提示使用

<script>
  window.callback = function () {
    alert('A callback was triggered');
  };
</script>

工具提示文本被双引号括起来。工具提示的样式由 .mermaidTooltip 类定义。

代码示例：

flowchart LR
    A-->B
    B-->C
    C-->D
    click A callback "Tooltip for a callback"
    click B "https://www.github.com" "This is a tooltip for a link"
    click C call callback() "Tooltip for a callback"
    click D href "https://www.github.com" "This is a tooltip for a link"

效果

flowchart LR A-->B B-->C C-->D click A callback "Tooltip for a callback" click B "https://www.github.com" "This is a tooltip for a link" click C call callback() "Tooltip for a callback" click D href "https://www.github.com" "This is a tooltip for a link"

成功
工具提示功能和链接到 URL 的能力从版本 0.5.2 开始提供。
注意：由于 Docsify 对 JavaScript 回调函数的处理存在局限，您可以在这个 jsfiddle 查看上面代码的工作示例。

链接的目标设置
默认情况下，链接将在同一浏览器标签页/窗口中打开。您可以通过为点击定义添加链接目标（_self、_blank、_parent 和 _top）来更改此行为。

代码示例：

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

初学者提示：使用交互式链接的完整 HTML 示例

<body>
  <pre class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "Tooltip"
        click B "https://www.github.com" "This is a link"
        click C call callback() "Tooltip"
        click D href "https://www.github.com" "This is a link"
  </pre>

  <script>
    window.callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

注释语法

注释以 %% 开头并且独占一行.

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

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

样式与类

链接样式
可以对链接应用样式。例如，您可能希望对流向图中倒退的链接进行样式设置。由于链接不像节点那样有 ID，因此需要另一种方式来确定链接应应用的样式。与其使用 ID，您可以使用定义链接时的顺序编号，或者使用 default 来应用到所有链接。
在下面的示例中，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 项目的 Shapes 文档。

节点样式
可以对节点应用特定的样式，例如设置更厚的边框或不同的背景颜色。
代码示例：

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;

一种更简短的形式是使用 ::: 操作符来将类名附加到节点：
代码示例：

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

效果

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

这种形式也可以用于声明多个节点之间的链接：

代码示例：

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

CSS 类

还可以在 CSS 样式中预定义类，并从图表定义中应用它们，示例如下：

样式示例：

<style>
  .cssClass > rect {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

图表定义示例：

flowchart LR
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass

效果

flowchart LR A-->B[AAABBB] B-->D class A cssClass

默认类

如果类名为 default，则该类将被分配给所有没有特定类定义的节点：

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

FontAwesome 基本支持

Mermaid 支持添加来自 FontAwesome 的图标。
图标通过语法 fa:#icon 类名# 进行访问。

代码示例：：

flowchart TD
    B["fa:fa-x-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 图标，只要网站中包含了 Font Awesome 的 CSS。Mermaid 对 Font Awesome 版本没有任何限制。
请参考 Font Awesome 官方文档了解如何将其添加到您的网站中。

如果您想在网页中使用 Font Awesome v6.5.1，可以在 <head> 标签中添加以下代码：

<link
  href="https://waylee.net/font-awesome/4.7.0/css/font-awesome.min.css"
  rel="stylesheet"
/>

自定义图标

只要网站导入了相应的 Font Awesome 套件，就可以使用来自 Font Awesome 的自定义图标。
请注意，这目前是 Font Awesome 的付费功能。
对于自定义图标，您需要使用 fak 前缀。
代码示例：：

flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C["fab:fa-truck-bold a custom icon"]

效果

flowchart TD B["fa:fa-twitter for peace"] B-->C["fab:fa-truck-bold a custom icon"]

图表声明中允许在顶点和链接之间添加空格，并且可以不使用分号
在图表声明中，现在可以在语句末尾不加分号。从版本 0.2.16 开始，图表声明末尾的分号变成了可选的。因此，下面的图表声明是有效的，同时也支持旧版的图表声明。

允许在顶点和链接之间添加一个空格。然而，顶点与其文本之间、链接与其文本之间不能有空格。旧的图表声明语法仍然有效，因此这个新特性是可选的，目的是提高可读性。

下面是图表边缘的新声明方式，这种方式与旧的图表边声明方式一样有效。
代码示例：：

flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

效果

flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
[/mermaid]

配置

渲染器
图表的布局是通过渲染器完成的。默认的渲染器是 dagre。
从 Mermaid 版本 9.4 开始，你可以使用名为 elk 的替代渲染器。elk 渲染器对于较大和/或更复杂的图表更为合适。
elk 渲染器是一个实验性功能。你可以通过添加以下指令来将渲染器更改为 elk：

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

信息：
请注意，站点需要使用 Mermaid 版本 9.4 及以上版本，且该功能需要在懒加载配置中启用才能正常工作。
宽度
可以调整渲染的流程图的宽度。

这可以通过定义 mermaid.flowchartConfig 或使用 CLI 配合 JSON 配置文件来实现。如何使用 CLI，请参见 MermaidCLI 页面。mermaid.flowchartConfig 可以设置为包含配置参数的 JSON 字符串或相应的对象。

mermaid.flowchartConfig = {
    width: 100%
}

快速入门流程图回顾总结

关键词

- 英文单词缩写
- 几何化形状
- 有限语法

Mermaid 是一款开源的制图工具,可使用 Markdown 语法绘制流程图,支持更改流程图节点形状,添加描述文字以及更改连接线样式等等.

英文单词缩写

四种布局方向的值是英文单词首字母大写缩写形式,默认仅支持垂直方向.

中文	英文	示例
图解	graph	`graph` 流程图类型标识
子图	subgraph	`subgraph` 嵌套子流程图标识
上	top	`TB` 或 `BT` ,从上到下或从下到上的布局方向
下	bottom	`BT` 或 `TB`,从下到上或从上到下的布局方向
左	left	`LR` 或 `RL`,从左往右或从右往左的布局方向
右	right	`RL` 或 `LR`,从右往左或从左往右的布局方向

几何化形状

键盘符号形象化几何形状,组合形式表示形状的叠加,其中最外层符号是主形状,嵌套符号是辅助形状.

基本单元

表示法	含义	类型	备注
`[]`	矩形	节点形状	支持
`()`	圆角矩形	节点形状	支持
`{}`	菱形	节点形状	支持
`<>`	菱形	节点形状	不支持
`--`	实线	连接线样式	支持
`-.`	虚线	连接线样式	支持
`==`	加粗实线	连接线样式	支持
`=:`	加粗虚线	连接线样式	不支持
`>`	有箭头	连接线样式	支持
`-`	无箭头	连接线样式	支持
`双竖线`	右边连接线描述文字	连接线描述文字	支持
`--`	左边实线连接线描述文字	连接线描述文字	支持
`-.`	左边虚线连接线描述文字	连接线描述文字	支持
`==`	左边加粗实线连接线描述文字	连接线描述文字	支持
`=:`	左边加粗虚线连接线描述文字	连接线描述文字	不支持

组合单元

表示法	含义	类型	备注
`[[]]`	正方形	节点形状	支持
`[()]`	圆柱体	节点形状	支持
`[{}]`	棱柱体	节点形状	不支持
`(())`	圆形	节点形状	支持
`([])`	体育场	节点形状	支持
`({})`	圆弧	节点形状	不支持
`双大括号`	六边形	节点形状	支持
`{[]}`	正多边形	节点形状	不支持
`{()}`	圆弧	节点形状	不支持
`-->`	实线带箭头	连接线样式	支持
`---`	实线无箭头	连接线样式	支持
`-.>`	虚线带箭头	连接线样式	不支持
`-.->`	虚线带箭头	连接线样式	支持
`.->`	虚线带箭头	连接线样式	支持
`-.-`	虚线无箭头	连接线样式	支持
`.-`	虚线无箭头	连接线样式	支持
`==>`	加粗实线带箭头	连接线样式	支持
`===`	加粗实线无箭头	连接线样式	支持
`=:>`	加粗虚线带箭头	连接线样式	不支持
`=:=>`	加粗虚线带箭头	连接线样式	不支持
`=:=`	加粗虚线无箭头	连接线样式	不支持
`:=`	加粗虚线无箭头	连接线样式	不支持
`双竖线`	右边连接线描述文字	连接线描述文字	支持
`--connection line description-->`	左边实线带箭头连接线描述文字	连接线描述文字	支持
`-.connection line description-.->`	左边虚线带箭头连接线描述文字	连接线描述文字	支持
`--connection line description---`	左边实线无箭头连接线描述文字	连接线描述文字	支持
`-.connection line description-.-`	左边虚线无箭头连接线描述文字	连接线描述文字	支持
`==connection line description==>`	左边加粗实线带箭头连接线描述文字	连接线描述文字	支持
`=:connection line description=:=>`	左边加粗虚线带箭头连接线描述文字	连接线描述文字	不支持
`==connection line description===`	左边加粗实线无箭头连接线描述文字	连接线描述文字	支持
`=:connection line description=:=`	左边加粗虚线无箭头连接线描述文字	连接线描述文字	不支持

Mermaid 流程图中的扩展节点形状 (v11.3.0+)

Mermaid 引入了 30 个新形状，以增强流程图创建的灵活性和精确性。这些新形状提供了更多的选项来以可视化的方式表示过程、决策、事件、数据存储以及流程图中的其他元素，从而提高了清晰度和语义表达。

新的形状定义语法

Mermaid 现在支持一种通用的语法来定义形状类型，以适应不断增加的形状数量。此语法允许您使用清晰且灵活的格式为节点分配特定的形状：

A@{ shape: rect }

新形状完整列表

以下是新引入的形状及其对应的语义名称、短名称和别名的全面列表：

语义名称	形状名称	短名称	描述	支持的别名
卡片	有缺口的矩形	notch-rect	表示一个卡片	card, notched-rectangle
汇总	沙漏形状	hourglass	表示汇总操作	collate, hourglass
通信链路	闪电形状	bolt	通信链路	com-link, lightning-bolt
注释	大括号	brace	添加注释	brace-l, comment
右侧注释	大括号	brace-r	添加右侧注释
双侧括号注释	大括号	braces	添加左右侧注释
数据输入/输出	向右倾斜的矩形	lean-r	表示输入或输出	in-out, lean-right
数据输入/输出	向左倾斜的矩形	lean-l	表示输出或输入	lean-left, out-in
数据库	圆柱形	cyl	数据库存储	cylinder, database, db
决策	菱形	diam	决策步骤	decision, diamond, question
延迟	半圆角矩形	delay	表示延迟	half-rounded-rectangle
直接存取存储	水平圆柱形	h-cyl	直接存取存储	das, horizontal-cylinder
磁盘存储	带线圆柱形	lin-cyl	磁盘存储	disk, lined-cylinder
显示	弯曲的梯形	curv-trap	表示显示	curved-trapezoid, display
分割过程	分割矩形	div-rect	分割过程形状	div-proc, divided-process, divided-rectangle
文档	文档形状	doc	表示文档	doc, document
事件	圆角矩形	rounded	表示事件	event
提取	三角形	tri	提取过程	extract, triangle
分叉/合并	填充矩形	fork	流程中的分叉或合并	join
内部存储	窗格形状	win-pane	内部存储	internal-storage, window-pane
汇合点	填充圆形	f-circ	汇合点	filled-circle, junction
带线文档	带线文档	lin-doc	带线文档	lined-document
带线/阴影过程	带线矩形	lin-rect	带线过程形状	lin-proc, lined-process, lined-rectangle, shaded-process
循环限制	梯形五边形	notch-pent	循环限制步骤	loop-limit, notched-pentagon
手动文件	翻转的三角形	flip-tri	手动文件操作	flipped-triangle, manual-file
手动输入	倾斜矩形	sl-rect	手动输入步骤	manual-input, sloped-rectangle
手动操作	顶部为梯形的平行四边形	trap-t	表示手动任务	inv-trapezoid, manual, trapezoid-top
多文档	堆叠文档	docs	多个文档	documents, st-doc, stacked-document
多过程	堆叠矩形	st-rect	多个过程	processes, procs, stacked-rectangle
奇形怪状	奇形	odd	奇形
纸带	旗形	flag	纸带	paper-tape
准备条件	六边形	hex	准备或条件步骤	hexagon, prepare
优先操作	梯形底部	trap-b	优先操作	priority, trapezoid, trapezoid-bottom
过程	矩形	rect	标准过程形状	proc, process, rectangle
开始	圆形	circle	起始点	circ
开始	小圆形	sm-circ	小起始点	small-circle, start
停止	双圆形	dbl-circ	停止点	double-circle
停止	带框圆形	fr-circ	停止点	framed-circle, stop
存储数据	蝴蝶结矩形	bow-rect	存储数据	bow-tie-rectangle, stored-data
子过程	带框矩形	fr-rect	子过程	framed-rectangle, subproc, subprocess, subroutine
汇总	交叉圆形	cross-circ	汇总	crossed-circle, summary
标记文档	标记文档	tag-doc	标记文档	tag-doc, tagged-document
标记过程	标记矩形	tag-rect	标记过程	tag-proc, tagged-process, tagged-rectangle
终端点	体育场形状	stadium	终端点	pill, terminal
文本块	文本块形状	text	文本块

使用新形状的示例流程图

下面是一个示例流程图，它利用了一些新引入的形状：

graph RL
    A@{ shape: manual-file, label: "File Handling"}
    B@{ shape: manual-input, label: "User Input"}
    C@{ shape: docs, label: "Multiple Documents"}
    D@{ shape: procs, label: "Process Automation"}
    E@{ shape: paper-tape, label: "Paper Records"}

graph RL A@{ shape: manual-file, label: "File Handling"} B@{ shape: manual-input, label: "User Input"} C@{ shape: docs, label: "Multiple Documents"} D@{ shape: procs, label: "Process Automation"} E@{ shape: paper-tape, label: "Paper Records"}

Process – 流程

flowchart TD
    A@{ shape: rect, label: "This is a process" }

flowchart TD A@{ shape: rect, label: "This is a process" }

Event – 事件

flowchart TD
    A@{ shape: rounded, label: "This is an event" }

flowchart TD A@{ shape: rounded, label: "This is an event" }

Terminal Point (Stadium) – 终点（椭圆形）

flowchart TD
    A@{ shape: stadium, label: "Terminal point" }

flowchart TD A@{ shape: stadium, label: "Terminal point" }

Subprocess – 子流程

flowchart TD
    A@{ shape: subproc, label: "This is a subprocess" }

flowchart TD A@{ shape: subproc, label: "This is a subprocess" }

Database (Cylinder) – 数据库（圆柱形）

flowchart TD
    A@{ shape: cyl, label: "Database" }

flowchart TD A@{ shape: cyl, label: "Database" }

Start (Circle) – 起始（圆形）

flowchart TD
    A@{ shape: circle, label: "Start" }

flowchart TD A@{ shape: circle, label: "Start" }

Odd – 不规则形状

flowchart TD
    A@{ shape: odd, label: "Odd shape" }

flowchart TD A@{ shape: odd, label: "Odd shape" }

Decision (Diamond) – 决策（菱形）

flowchart TD
    A@{ shape: diamond, label: "Decision" }

flowchart TD A@{ shape: diamond, label: "Decision" }

Prepare Conditional (Hexagon) – 准备条件（六边形）

flowchart TD
    A@{ shape: hex, label: "Prepare conditional" }

flowchart TD A@{ shape: hex, label: "Prepare conditional" }

Data Input/Output (Lean Right) – 数据输入/输出（右倾）

flowchart TD
    A@{ shape: lean-r, label: "Input/Output" }

flowchart TD A@{ shape: lean-r, label: "Input/Output" }

Data Input/Output (Lean Left) – 数据输入/输出（左倾）

flowchart TD
    A@{ shape: lean-l, label: "Output/Input" }

flowchart TD A@{ shape: lean-l, label: "Output/Input" }

Priority Action (Trapezoid Base Bottom) – 优先行动（底部梯形）

flowchart TD
    A@{ shape: trap-b, label: "Priority action" }

flowchart TD A@{ shape: trap-b, label: "Priority action" }

Manual Operation (Trapezoid Base Top) – 手动操作（顶部梯形）

flowchart TD
    A@{ shape: trap-t, label: "Manual operation" }

flowchart TD A@{ shape: trap-t, label: "Manual operation" }

Stop (Double Circle) – 停止（双圆形）

flowchart TD
    A@{ shape: dbl-circ, label: "Stop" }

flowchart TD A@{ shape: dbl-circ, label: "Stop" }

Text Block – 文本块

flowchart TD
    A@{ shape: text, label: "This is a text block" }

flowchart TD A@{ shape: text, label: "This is a text block" }

Card (Notched Rectangle) – 卡片（缺口矩形）

flowchart TD
    A@{ shape: notch-rect, label: "Card" }

flowchart TD A@{ shape: notch-rect, label: "Card" }

Lined/Shaded Process – 线条/阴影过程

flowchart TD
    A@{ shape: lin-rect, label: "Lined process" }

flowchart TD A@{ shape: lin-rect, label: "Lined process" }

Start (Small Circle) – 起始（小圆形）

flowchart TD
    A@{ shape: sm-circ, label: "Small start" }

flowchart TD A@{ shape: sm-circ, label: "Small start" }

Stop (Framed Circle) – 停止（框架圆形）

flowchart TD
    A@{ shape: framed-circle, label: "Stop" }

flowchart TD A@{ shape: framed-circle, label: "Stop" }

Fork/Join (Long Rectangle) – 分支/合并（长矩形）

flowchart TD
    A@{ shape: fork, label: "Fork or Join" }

flowchart TD A@{ shape: fork, label: "Fork or Join" }

Collate (Hourglass) – 汇总（沙漏形）

flowchart TD
    A@{ shape: hourglass, label: "Collate" }

flowchart TD A@{ shape: hourglass, label: "Collate" }

Comment (Curly Brace) – 注释（大括号）

flowchart TD
    A@{ shape: comment, label: "Comment" }

flowchart TD A@{ shape: comment, label: "Comment" }

Comment Right (Curly Brace Right) – 右侧注释（右大括号）

flowchart TD
    A@{ shape: brace-r, label: "Comment" }

flowchart TD A@{ shape: brace-r, label: "Comment" }

Comment with braces on both sides – 双边注释（两边大括号）

flowchart TD
    A@{ shape: braces, label: "Comment" }

flowchart TD A@{ shape: braces, label: "Comment" }

Com Link (Lightning Bolt) – 通信链接（闪电形）

flowchart TD
    A@{ shape: bolt, label: "Communication link" }

flowchart TD A@{ shape: bolt, label: "Communication link" }

Document – 文档

flowchart TD
    A@{ shape: doc, label: "Document" }

flowchart TD A@{ shape: doc, label: "Document" }

Delay (Half-Rounded Rectangle) – 延迟（半圆角矩形）

flowchart TD
    A@{ shape: delay, label: "Delay" }

flowchart TD A@{ shape: delay, label: "Delay" }

Direct Access Storage (Horizontal Cylinder) – 直接存取存储（水平圆柱）

flowchart TD
    A@{ shape: das, label: "Direct access storage" }

flowchart TD A@{ shape: das, label: "Direct access storage" }

Disk Storage (Lined Cylinder) – 磁盘存储（带线圆柱）

flowchart TD
    A@{ shape: lin-cyl, label: "Disk storage" }

flowchart TD A@{ shape: lin-cyl, label: "Disk storage" }

Display (Curved Trapezoid) – 显示（弯曲梯形）

flowchart TD
    A@{ shape: curv-trap, label: "Display" }

flowchart TD A@{ shape: curv-trap, label: "Display" }

Divided Process (Divided Rectangle) – 分割过程（分割矩形）

flowchart TD
    A@{ shape: div-rect, label: "Divided process" }

flowchart TD A@{ shape: div-rect, label: "Divided process" }

Extract (Small Triangle) – 提取（小三角形）

flowchart TD
    A@{ shape: tri, label: "Extract" }

flowchart TD A@{ shape: tri, label: "Extract" }

Internal Storage (Window Pane) – 内部存储（窗格形）

flowchart TD
    A@{ shape: win-pane, label: "Internal storage" }

flowchart TD A@{ shape: win-pane, label: "Internal storage" }

Junction (Filled Circle) – 连接点（填充圆形）

flowchart TD
    A@{ shape: f-circ, label: "Junction" }

flowchart TD A@{ shape: f-circ, label: "Junction" }

Lined Document – 带线文档

flowchart TD
    A@{ shape: lin-doc, label: "Lined document" }

flowchart TD A@{ shape: lin-doc, label: "Lined document" }

Loop Limit (Notched Pentagon) – 循环限制（缺口五边形）

flowchart TD
    A@{ shape: notch-pent, label: "Loop limit" }

flowchart TD A@{ shape: notch-pent, label: "Loop limit" }

Manual File (Flipped Triangle) – 手动文件（倒三角形）

flowchart TD
    A@{ shape: flip-tri, label: "Manual file" }

flowchart TD A@{ shape: flip-tri, label: "Manual file" }

Manual Input (Sloped Rectangle) – 手动输入（斜矩形）

flowchart TD
    A@{ shape: sl-rect, label: "Manual input" }

flowchart TD A@{ shape: sl-rect, label: "Manual input" }

Multi-Document (Stacked Document) – 多文档（堆叠文档）

flowchart TD
    A@{ shape: docs, label: "Multiple documents" }

flowchart TD A@{ shape: docs, label: "Multiple documents" }

Multi-Process (Stacked Rectangle) – 多流程（堆叠矩形）

flowchart TD
    A@{ shape: processes, label: "Multiple processes" }

flowchart TD A@{ shape: processes, label: "Multiple processes" }

Paper Tape (Flag) – 纸带（旗形）

flowchart TD
    A@{ shape: flag, label: "Paper tape" }

flowchart TD A@{ shape: flag, label: "Paper tape" }

Stored Data (Bow Tie Rectangle) – 存储数据（蝴蝶结矩形）

flowchart TD
    A@{ shape: bow-rect, label: "Stored data" }

flowchart TD A@{ shape: bow-rect, label: "Stored data" }

Summary (Crossed Circle) – 总结（交叉圆形）

flowchart TD
    A@{ shape: cross-circ, label: "Summary" }

flowchart TD A@{ shape: cross-circ, label: "Summary" }

Tagged Document – 标签文档

flowchart TD
    A@{ shape: tag-doc, label: "Tagged document" }

flowchart TD A@{ shape: tag-doc, label: "Tagged document" }

Tagged Process (Tagged Rectangle) – 标签流程（标签矩形）

flowchart TD
    A@{ shape: tag-rect, label: "Tagged process" }

flowchart TD A@{ shape: tag-rect, label: "Tagged process" }

Mermaid 流程图中的特殊形状 (v11.3.0+)

Mermaid 还引入了两种特殊形状，以增强流程图的功能：图标和图片。这些形状允许你直接在流程图中插入图标和图片，从而提供更多的视觉上下文和清晰度。

图标形状

你可以使用图标形状在流程图中包含一个图标。要使用图标，首先需要注册图标包。请按照此处提供的说明进行操作。定义图标形状的语法如下：
代码示例：

flowchart TD
    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }

输出示例：

flowchart TD A@{ icon: "fa:user", form: "square", label: "用户图标", pos: "t", h: 60 }

参数说明：

icon：图标包中注册的图标名称。
form：指定图标的背景形状。如果未定义，则图标不会有背景。可选值包括：
- square（方形）
- circle（圆形）
- rounded（圆角）
label：与图标关联的文本标签。可以是任何字符串。如果未定义，则不会显示标签。
pos：标签的位置。如果未定义，标签将默认显示在图标的底部。可选值为：
- t（顶部）
- b（底部）
h：图标的高度。如果未定义，默认高度为48，这是最小值。
图片形状
你可以使用图片形状在流程图中包含一张图片。定义图片形状的语法如下：
代码示例：
```
flowchart TD
A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
```
输出示例：

flowchart TD A@{ img: "https://waylee.net/data/attachment/common/template/boardimg_20240901geuyj265.png", label: "Image Label", pos: "t", w: 170, h: 75, constraint: "off" }

参数说明：

img：要显示的图片 URL。
label：与图片关联的文本标签。可以是任何字符串。如果未定义，则不会显示标签。
pos：标签的位置。如果未定义，标签将默认显示在图片的底部。可选值为：
- t（顶部）
- b（底部）
w：图片的宽度。如果未定义，则默认使用图片的自然宽度。
h：图片的高度。如果未定义，则默认使用图片的自然高度。
constraint：确定图片是否应限制节点大小。此设置还确保图片保持原始纵横比，并根据宽度（w）调整高度（h）。如果未定义，默认值为 "off"。可选值为：
- on
- off
  这些新的形状为你的流程图提供了更多的灵活性和视觉吸引力，使得流程图更加信息丰富和具有互动性。

有限语法

不论是节点形状还是连接线样式,语法支持是有限的,并不是随意组合的叠加状态,也可能随着后续更新会支持更多,一切以官方文档为主.

除了提供最基础的操作节点的能力之外,还可以根据 JS 和 CSS 相关知识高度自定义流程图行为表现,具体可参考官方文档.

官方文档: https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes

交互能力 Interaction : https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction
外观样式 Styling and classes : https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction
字体支持 Basic support for fontawesome: https://mermaid-js.github.io/mermaid/#/flowchart?id=basic-support-for-fontawesome
空格分隔 https://mermaid-js.github.io/mermaid/#/flowchart?id=graph-declarations-with-spaces-between-vertices-and-link-and-without-semicolon

账号		自动登录	找回密码
密码			register

账号		自动登录	找回密码
密码			立即注册

[每天自学] 快速上手Mermaid流程图(graph)绘制详解

[每天自学] 快速上手Mermaid流程图(graph)绘制详解

马上注册,查看网站隐藏内容!!

什么是Mermaid流程图

Mermaid流程图快速入门

布局方向

TB

BT

LR

RL

形状

一次性节点

可重复节点

矩形

圆角矩形

体育场

子程序形状的节点

圆柱

圆形

不对称矩形

菱形

六角形

左斜平行四边形

右斜平行四边形

梯形 A

梯形 B

双圆

连接线

有箭头无描述实线

无箭头实线

带描述的有箭头实线

带描述的无箭头实线

有箭头虚线

有箭头加粗实线

带描述的有箭头加粗实线

带描述的有箭头加粗实线

高级用法

多节点链式连接

多节点共同连接

多节点相互连接

新的箭头类型

多向箭头

链接的最小长度

双引号包裹特殊字符

双引号包裹转义字符

嵌套子流程图

flowcharts 流程图

子图中的方向设置

Markdown 字符串

互动

注释语法

快速入门流程图回顾总结

英文单词缩写

几何化形状

Mermaid 流程图中的扩展节点形状 (v11.3.0+)

新的形状定义语法

新形状完整列表

使用新形状的示例流程图

下面是一个示例流程图，它利用了一些新引入的形状：

Process – 流程

Event – 事件

Terminal Point (Stadium) – 终点（椭圆形）

Subprocess – 子流程

Database (Cylinder) – 数据库（圆柱形）

Start (Circle) – 起始（圆形）

Odd – 不规则形状

Decision (Diamond) – 决策（菱形）

Prepare Conditional (Hexagon) – 准备条件（六边形）

Data Input/Output (Lean Right) – 数据输入/输出（右倾）

Data Input/Output (Lean Left) – 数据输入/输出（左倾）

Priority Action (Trapezoid Base Bottom) – 优先行动（底部梯形）

Manual Operation (Trapezoid Base Top) – 手动操作（顶部梯形）

Stop (Double Circle) – 停止（双圆形）

Text Block – 文本块

Card (Notched Rectangle) – 卡片（缺口矩形）

Lined/Shaded Process – 线条/阴影过程

Start (Small Circle) – 起始（小圆形）

Stop (Framed Circle) – 停止（框架圆形）

Fork/Join (Long Rectangle) – 分支/合并（长矩形）

Collate (Hourglass) – 汇总（沙漏形）