流程图 - 基本语法

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

WARNING

If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this workaround. Typing "end" in all lowercase letters will break the Flowchart.

WARNING

If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").

Typing "A---oB" will create a circle edge.

Typing "A---xB" will create a cross edge.

一个节点（默认）

¥A node (default)

INFO

The id is what is displayed in the box.

TIP

Instead of flowchart one can also use 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

节点之间的链接

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

INFO

This functionality is disabled when using securityLevel='strict' and enabled when using 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>
  const 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>
    const 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"}} }%%

INFO

Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.

宽度

¥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%
}