流程图 - 基础语法

¥Flowcharts - Basic Syntax

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

¥Flowcharts are composed of nodes (geometric shapes) and edges (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.

警告

如果你在流程图节点中使用单词 "end"，请将整个单词或任何字母大写（例如，"End" 或 "END"），或应用此 workaround。输入全部小写字母的 "end" 将破坏流程图。

警告

如果你使用字母 "o" 或 "x" 作为连接流程图节点的首字母，请在字母前添加空格或将字母大写（例如，"dev--- ops"、"dev---Ops"）。输入 "A---oB" 将创建 circle edge。输入 "A---xB" 将创建 cross edge。

一个节点（默认）

¥A node (default)

信息

id 是框中显示的内容。

提示

除了 flowchart，还可以使用 graph。

带有文本的节点

¥A node with text

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

¥It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The one previously defined will be used when rendering the box.

统一码文本

¥Unicode text

使用 " 将 unicode 文本括起来。

¥Use " to enclose the unicode text.

Markdown 格式

¥Markdown formatting

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

¥Use double quotes and backticks "text" to enclose the markdown text.

方向

¥Direction

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

¥This statement declares the direction of the Flowchart.

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

¥This declares the flowchart is oriented from top to bottom (TD or TB).

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

¥This declares the flowchart is oriented from left to right (LR).

可能的流程图方向是：

¥Possible FlowChart orientations are:

• TB - 从上到下

  ¥TB - Top to bottom

• TD - 自上而下/与自上而下相同

  ¥TD - Top-down/ same as top to bottom

• BT - 从下到上

  ¥BT - Bottom to top

• RL - 右到左

  ¥RL - Right to left

• LR - 左到右

  ¥LR - Left to right

节点形状

¥Node shapes

具有圆边的节点

¥A node with round edges

体育场形状的节点

¥A stadium-shaped node

子程序形状中的节点

¥A node in a subroutine shape

圆柱形节点

¥A node in a cylindrical shape

一个圆形的节点

¥A node in the form of a circle

形状不对称的节点

¥A node in an asymmetric shape

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

¥Currently only the shape above is possible and not its mirror. This might change with future releases.

节点（菱形）

¥A node (rhombus)

六边形节点

¥A hexagon node

平行四边形

¥Parallelogram

平行四边形 alt

¥Parallelogram alt

梯形

¥Trapezoid

梯形 alt

¥Trapezoid alt

双圈

¥Double circle

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

¥Expanded Node Shapes in Mermaid Flowcharts (v11.3.0+)

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

¥Mermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning.

形状定义的新语法

¥New Syntax for Shape Definition

Mermaid 现在支持定义形状类型的通用语法，以适应不断增长的形状数量。此语法允许你使用清晰灵活的格式将特定形状分配给节点：

¥Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:

A@{ shape: rect }

此语法将节点 A 创建为矩形。它的渲染方式与 A["A"] 或 A 相同。

¥This syntax creates a node A as a rectangle. It renders in the same way as A["A"], or A.

新形状的完整列表

¥Complete List of New Shapes

以下是新引入的形状及其相应的语义含义、简称和别名的完整列表：

¥Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:

Semantic Name	Shape Name	Short Name	Description	Alias Supported
Card	Notched Rectangle	notch-rect	Represents a card	card, notched-rectangle
Collate	Hourglass	hourglass	Represents a collate operation	collate, hourglass
Com Link	Lightning Bolt	bolt	Communication link	com-link, lightning-bolt
Comment	Curly Brace	brace	Adds a comment	brace-l, comment
Comment Right	Curly Brace	brace-r	Adds a comment
Comment with braces on both sides	Curly Braces	braces	Adds a comment
Data Input/Output	Lean Right	lean-r	Represents input or output	in-out, lean-right
Data Input/Output	Lean Left	lean-l	Represents output or input	lean-left, out-in
Database	Cylinder	cyl	Database storage	cylinder, database, db
Decision	Diamond	diam	Decision-making step	decision, diamond, question
Delay	Half-Rounded Rectangle	delay	Represents a delay	half-rounded-rectangle
Direct Access Storage	Horizontal Cylinder	h-cyl	Direct access storage	das, horizontal-cylinder
Disk Storage	Lined Cylinder	lin-cyl	Disk storage	disk, lined-cylinder
Display	Curved Trapezoid	curv-trap	Represents a display	curved-trapezoid, display
Divided Process	Divided Rectangle	div-rect	Divided process shape	div-proc, divided-process, divided-rectangle
Document	Document	doc	Represents a document	doc, document
Event	Rounded Rectangle	rounded	Represents an event	event
Extract	Triangle	tri	Extraction process	extract, triangle
Fork/Join	Filled Rectangle	fork	Fork or join in process flow	join
Internal Storage	Window Pane	win-pane	Internal storage	internal-storage, window-pane
Junction	Filled Circle	f-circ	Junction point	filled-circle, junction
Lined Document	Lined Document	lin-doc	Lined document	lined-document
Lined/Shaded Process	Lined Rectangle	lin-rect	Lined process shape	lin-proc, lined-process, lined-rectangle, shaded-process
Loop Limit	Trapezoidal Pentagon	notch-pent	Loop limit step	loop-limit, notched-pentagon
Manual File	Flipped Triangle	flip-tri	Manual file operation	flipped-triangle, manual-file
Manual Input	Sloped Rectangle	sl-rect	Manual input step	manual-input, sloped-rectangle
Manual Operation	Trapezoid Base Top	trap-t	Represents a manual task	inv-trapezoid, manual, trapezoid-top
Multi-Document	Stacked Document	docs	Multiple documents	documents, st-doc, stacked-document
Multi-Process	Stacked Rectangle	st-rect	Multiple processes	processes, procs, stacked-rectangle
Odd	Odd	odd	Odd shape
Paper Tape	Flag	flag	Paper tape	paper-tape
Prepare Conditional	Hexagon	hex	Preparation or condition step	hexagon, prepare
Priority Action	Trapezoid Base Bottom	trap-b	Priority action	priority, trapezoid, trapezoid-bottom
Process	Rectangle	rect	Standard process shape	proc, process, rectangle
Start	Circle	circle	Starting point	circ
Start	Small Circle	sm-circ	Small starting point	small-circle, start
Stop	Double Circle	dbl-circ	Represents a stop point	double-circle
Stop	Framed Circle	fr-circ	Stop point	framed-circle, stop
Stored Data	Bow Tie Rectangle	bow-rect	Stored data	bow-tie-rectangle, stored-data
Subprocess	Framed Rectangle	fr-rect	Subprocess	framed-rectangle, subproc, subprocess, subroutine
Summary	Crossed Circle	cross-circ	Summary	crossed-circle, summary
Tagged Document	Tagged Document	tag-doc	Tagged document	tag-doc, tagged-document
Tagged Process	Tagged Rectangle	tag-rect	Tagged process	tag-proc, tagged-process, tagged-rectangle
Terminal Point	Stadium	stadium	Terminal point	pill, terminal
Text Block	Text Block	text	Text block

具有新形状的示例流程图

¥Example Flowchart with New Shapes

以下是使用一些新引入的形状的示例流程图：

¥Here’s an example flowchart that utilizes some of the newly introduced shapes:

进程

¥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)

注释（大括号）

¥Comment (Curly Brace)

注释右侧（大括号右侧）

¥Comment Right (Curly Brace Right)

注释两侧均带括号

¥Comment with braces on both sides

Com Link（闪电）

¥Com Link (Lightning Bolt)

文档

¥Document

延迟（半圆角矩形）

¥Delay (Half-Rounded Rectangle)

直接访问存储（水平圆柱体)

¥Direct Access Storage (Horizontal Cylinder)

磁盘存储 (带线圆柱体)

¥Disk Storage (Lined Cylinder)

显示 (弧形梯形)

¥Display (Curved Trapezoid)

分割流程 (分割矩形)

¥Divided Process (Divided Rectangle)

提取 (小三角形)

¥Extract (Small Triangle)

内部存储 (窗格)

¥Internal Storage (Window Pane)

连接 (实心圆)

¥Junction (Filled Circle)

带线文档

¥Lined Document

循环限制 (缺口五边形)

¥Loop Limit (Notched Pentagon)

手动文件 (翻转三角形)

¥Manual File (Flipped Triangle)

手动输入 (倾斜矩形)

¥Manual Input (Sloped Rectangle)

多文档 (堆叠文档)

¥Multi-Document (Stacked Document)

多进程 (堆叠矩形)

¥Multi-Process (Stacked Rectangle)

纸带 (标志)

¥Paper Tape (Flag)

存储的数据 (蝴蝶结矩形)

¥Stored Data (Bow Tie Rectangle)

摘要 (带十字的圆圈)

¥Summary (Crossed Circle)

标记的文档

¥Tagged Document

标记的流程 (标记矩形)

¥Tagged Process (Tagged Rectangle)

Mermaid 流程图中的特殊形状（v11.3.0+）

¥Special shapes in Mermaid Flowcharts (v11.3.0+)

Mermaid 还引入了 2 种特殊形状来增强你的流程图：图标和图片。这些形状允许你直接在流程图中包括图标和图片，从而提供更多的视觉背景和清晰度。

¥Mermaid also introduces 2 special shapes to enhance your flowcharts: icon and image. These shapes allow you to include icons and images directly within your flowcharts, providing more visual context and clarity.

图标形状

¥Icon Shape

你可以使用 icon 形状在流程图中包括图标。要使用图标，你需要先注册图标包。按照提供的说明 此处。定义图标形状的语法如下：

¥You can use the icon shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided here. The syntax for defining an icon shape is as follows:

参数

¥Parameters

• 图标：来自注册图标包的图标名称。

  ¥icon: The name of the icon from the registered icon pack.

• 表格：指定图标的背景形状。如果未定义，图标将没有背景。选项包括：

  ¥form: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include:

  • square

  • circle

  • rounded

• 标签：与图标关联的文本标签。这可以是任何字符串。如果未定义，则不会显示任何标签。

  ¥label: The text label associated with the icon. This can be any string. If not defined, no label will be displayed.

• pos：标签的位置。如果未定义，标签将默认为图标底部。可能的值是：

  ¥pos: The position of the label. If not defined label will default to bottom of icon. Possible values are:

  • t

  • b

• h：图标的高度。如果未定义，则默认为 48，这是最小值。

  ¥h: The height of the icon. If not defined this will default to 48 which is minimum.

图片形状

¥Image Shape

你可以使用 image 形状在流程图中包括图片。定义图片形状的语法如下：

¥You can use the image shape to include an image in your flowchart. The syntax for defining an image shape is as follows:

参数

¥Parameters

• 图片：要显示的图片的 URL。

  ¥img: The URL of the image to be displayed.

• 标签：与图片关联的文本标签。这可以是任何字符串。如果未定义，则不会显示任何标签。

  ¥label: The text label associated with the image. This can be any string. If not defined, no label will be displayed.

• pos：标签的位置。如果未定义，则标签将默认为图片底部。可能的值是：

  ¥pos: The position of the label. If not defined, the label will default to the bottom of the image. Possible values are:

  • t

  • b

• w：图片的宽度。如果未定义，则默认为图片的自然宽度。

  ¥w: The width of the image. If not defined, this will default to the natural width of the image.

• h：图片的高度。如果未定义，则默认为图片的自然高度。

  ¥h: The height of the image. If not defined, this will default to the natural height of the image.

• 约束：确定图片是否应限制节点大小。此设置还确保图片保持其原始纵横比，并根据宽度（w）调整高度（h）。如果未定义，则默认为 off 可能的值是：

  ¥constraint: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (h) accordingly to the width (w). If not defined, this will default to off Possible values are:

  • on

  • off

这些新形状为你的流程图提供了额外的灵活性和视觉吸引力，使其更具信息性和吸引力。

¥These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging.

节点之间的链接

¥Links between nodes

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

¥Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.

带箭头的链接

¥A link with arrow head

一个打开的链接

¥An open link

链接上的文本

¥Text on links

or

带有箭头和文本的链接

¥A link with arrow head and text

or

虚线链接

¥Dotted link

带文本的虚线链接

¥Dotted link with text

粗链接

¥Thick link

带文本的粗链接

¥Thick link with text

看不见的链接

¥An invisible link

在某些你想要更改节点的默认位置的情况下，这可能是一个有用的工具。

¥This can be a useful tool in some instances where you want to alter the default positioning of a node.

链接的链接

¥Chaining of links

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

¥It is possible declare many links in the same line as per below:

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

¥It is also possible to declare multiple nodes links in the same line as per below:

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

¥You can then describe dependencies in a very expressive way. Like the one-liner below:

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

¥If you describe the same diagram using the basic syntax, it will take four lines. A word of warning, one could go overboard with this making the flowchart harder to read in markdown form. The Swedish word lagom comes to mind. It means, not too much and not too little. This goes for expressive syntaxes as well.

新的箭头类型

¥New arrow types

支持新类型的箭头：

¥There are new types of arrows supported:

• 圆边

  ¥circle edge

• 交叉边缘

  ¥cross edge

圆边示例

¥Circle edge example

交叉边缘示例

¥Cross edge example

多方向箭头

¥Multi directional arrows

可以使用多向箭头。

¥There is the possibility to use multidirectional arrows.

链接的最小长度

¥Minimum length of a link

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

¥Each node in the flowchart is ultimately assigned to a rank in the rendered graph, i.e. to a vertical or horizontal level (depending on the flowchart orientation), based on the nodes to which it is linked. By default, links can span any number of ranks, but you can ask for any link to be longer than the others by adding extra dashes in the link definition.

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

¥In the following example, two extra dashes are added in the link from node B to node E, so that it spans two more ranks than regular links:

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

¥Links may still be made longer than the requested number of ranks by the rendering engine to accommodate other requests.

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

¥When the link label is written in the middle of the link, the extra dashes must be added on the right side of the link. The following example is equivalent to the previous one:

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

¥For dotted or thick links, the characters to add are equals signs or dots, as summed up in the following table:

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

破坏语法的特殊字符

¥Special characters that break syntax

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

¥It is possible to put text within quotes in order to render more troublesome characters. As in the example below:

用于转义字符的实体代码

¥Entity codes to escape characters

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

¥It is possible to escape characters using the syntax exemplified here.

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

¥Numbers given are base 10, so # can be encoded as #35;. It is also supported to use HTML character names.

子图

¥Subgraphs

subgraph title
    graph definition
end

下面是一个例子：

¥An example below:

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

¥You can also set an explicit id for the subgraph.

流程图

¥flowcharts

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

¥With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.

子图中的方向

¥Direction in subgraphs

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

¥With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.

局限性

¥Limitation

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

¥If any of a subgraph's nodes are linked to the outside, subgraph direction will be ignored. Instead the subgraph will inherit the direction of the parent graph:

Markdown 字符串

¥Markdown Strings

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

¥The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.

格式设置：

¥Formatting:

• 对于粗体文本，请在文本前后使用双星号 (**)。

  ¥For bold text, use double asterisks (**) before and after the text.

• 对于斜体，请在文本前后使用单个星号 (*)。

  ¥For italics, use single asterisks (*) before and after the text.

• 对于传统字符串，你需要添加 <br> 标签以使文本换行在节点中。但是，当文本变得太长时，Markdown 字符串会自动换行，并允许你只需使用换行符而不是 <br> 标记来开始新行。

  ¥With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.

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

¥This feature is applicable to node labels, edge labels, and subgraph labels.

可以通过使用禁用自动换行

¥The auto wrapping can be disabled by using

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

相互作用

¥Interaction

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

¥It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.

信息

使用 securityLevel='strict' 时禁用此功能，使用 securityLevel='loose' 时启用此功能。

click nodeId callback
click nodeId call callback()

• nodeId 是节点的 id

  ¥nodeId is the id of the node

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

  ¥callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.

下面的工具提示使用示例：

¥Examples of tooltip usage below:

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

工具提示文本用双引号引起来。工具提示的样式由 .mermaidTooltip 类设置。

¥The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.

成功 工具提示功能和链接到 URL 的功能从 0.5.2 版本开始提供。

¥The tooltip functionality and the ability to link to urls are available from version 0.5.2.

?> 由于 Docsify 处理 JavaScript 回调函数方式的限制，可以在 这个 jsfiddle 查看上述代码的替代工作演示。

¥?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at this jsfiddle.

默认情况下，链接在同一浏览器选项卡/窗口中打开。可以通过向点击定义添加链接目标来更改此设置（支持 _self、_blank、_parent 和 _top）：

¥Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (_self, _blank, _parent and _top are supported):

初学者提示 — 在 html 上下文中使用交互式链接的完整示例：

¥Beginner's tip—a full example using interactive links in a html context:

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

注释

¥Comments

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

¥Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with %% (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax

样式和类别

¥Styling and classes

设置链接样式

¥Styling links

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

¥It is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required. Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links. In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:

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

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

¥It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:

linkStyle 1,2,7 color:blue;

样式线条曲线

¥Styling line curves

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

¥It is possible to style the type of curve used for lines between items, if the default method does not meet your needs. Available curve styles include basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter, and stepBefore.

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

¥In this example, a left-to-right graph uses the stepBefore curve style:

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

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

¥For a full list of available curves, including an explanation of custom curves, refer to the Shapes documentation in the d3-shape project.

设置节点样式

¥Styling a node

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

¥It is possible to apply specific styles such as a thicker border or a different background color to a node.

类

¥Classes

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

¥More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that should have a different look.

类定义如下例所示：

¥A class definition looks like the example below:

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

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

¥Also, it is possible to define style to multiple classes in one statement:

    classDef firstClassName,secondClassName font-size:12pt;

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

¥Attachment of a class to a node is done as per below:

    class nodeId1 className;

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

¥It is also possible to attach a class to a list of nodes in one statement:

    class nodeId1,nodeId2 className;

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

¥A shorter form of adding a class is to attach the classname to the node using the :::operator as per below:

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

¥This form can be used when declaring multiple links between nodes:

CSS 类

¥CSS classes

还可以在 CSS 样式中预定义类，这些类可以从图形定义中应用，如下例所示：

¥It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example below:

示例样式

¥Example style

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

定义示例

¥Example definition

默认类别

¥Default class

如果一个类被命名为 default，它将被分配给所有没有特定类定义的类。

¥If a class is named default it will be assigned to all classes without specific class definitions.

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

对 fontawesome 的基本支持

¥Basic support for fontawesome

可以添加来自 fontawesome 的图标。

¥It is possible to add icons from fontawesome.

通过语法 fa:#icon class name# 访问图标。

¥The icons are accessed via the syntax fa:#icon class name#.

如果网站上包含 CSS，Mermaid 支持 Font Awesome。Mermaid 对可以使用的 Font Awesome 版本没有任何限制。

¥Mermaid supports Font Awesome if the CSS is included on the website. Mermaid does not have any restriction on the version of Font Awesome that can be used.

请参阅 官方 Font Awesome 文档 了解如何将其包含在你的网站中。

¥Please refer the Official Font Awesome Documentation on how to include it in your website.

在 <head> 中添加此代码片段将添加对 Font Awesome v6.5.1 的支持

¥Adding this snippet in the <head> would add support for Font Awesome v6.5.1

<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
  rel="stylesheet"
/>

自定义图标

¥Custom icons

只要网站导入相应的工具包，就可以使用 Font Awesome 提供的自定义图标。

¥It is possible to use custom icons served from Font Awesome as long as the website imports the corresponding kit.

请注意，目前这是 Font Awesome 的付费功能。

¥Note that this is currently a paid feature from Font Awesome.

对于自定义图标，你需要使用 fak 前缀。

¥For custom icons, you need to use the fak prefix.

示例

¥Example

flowchart TD
    B[fa:fa-twitter] %% standard icon
    B-->E(fak:fa-custom-icon-name) %% custom icon

并尝试渲染它

¥And trying to render it

图形声明的顶点和链接之间有空格且没有分号

¥Graph declarations with spaces between vertices and link and without semicolon

• 在图形声明中，语句现在也可以不以分号结束。在 0.2.16 版本之后，以分号结束图形语句只是可选的。因此，下面的图形声明也与旧的图形声明一样有效。

  ¥In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.

• 顶点和链接之间允许有一个空格。但是，顶点及其文本以及链接及其文本之间不应有任何空格。图形声明的旧语法也将起作用，因此这个新功能是可选的，引入它是为了提高可读性。

  ¥A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.

下面是图边的新声明，它与旧的图边声明一起有效。

¥Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.

配置

¥Configuration

渲染器

¥Renderer

图表的布局是通过渲染器完成的。默认渲染器是 dagre。

¥The layout of the diagram is done with the renderer. The default renderer is dagre.

从 Mermaid 版本 9.4 开始，你可以使用名为 elk 的备用渲染器。Elk 渲染器更适合更大和/或更复杂的图表。

¥Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.

Elk 渲染器是一个实验性功能。你可以通过添加以下指令将渲染器更改为 elk：

¥The elk renderer is an experimental feature. You can change the renderer to elk by adding this directive:

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

信息

请注意，网站需要使用 Mermaid 9.4 以上版本才能正常工作，并在延迟加载配置中启用此功能。

宽度

¥Width

可以调整渲染流程图的宽度。

¥It is possible to adjust the width of the rendered flowchart.

这是通过定义 mermaid.flowchartConfig 或通过 CLI 使用带有配置的 JSON 文件来完成的。mermaidCLI 页面描述了如何使用 CLI。mermaid.flowchartConfig 可以设置为带有配置参数的 JSON 字符串或相应的对象。

¥This is done by defining mermaid.flowchartConfig or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page. mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.

mermaid.flowchartConfig = {
    width: 100%
}