流程图 - 基本语法

【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”），或者使用这个解决方法。全部小写输入“end”会导致流程图出错。

警告

如果你在连接流程图节点时使用字母“o”或“x”作为首字母，请在字母前加一个空格或将字母大写（例如，“dev--- ops”，“dev---Ops”）。

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

输入“A---xB”将创建一个叉形边。

一个节点（默认）

【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 文本

【Unicode text】

使用 " 将 Unicode 文本括起来。

【Use " to enclose the unicode text.】

Markdown 格式

【Markdown formatting】

用双引号和反勾“' text '”来封装标记标记。

【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 - 从上到下
• TD - 自上而下 / 与从上到下相同
• BT - 从下到上
• RL - 从右到左
• LR - 从左到右

节点形状

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

平行四边形高

【Parallelogram alt】

梯形

【Trapezoid】

梯形替代

【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
Bang	Bang	bang	Bang	bang
Card	Notched Rectangle	notch-rect	Represents a card	card, notched-rectangle
Cloud	Cloud	cloud	cloud	cloud
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 (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 还引入了两种特殊形状来增强你的流程图：图标和图片。这些形状允许你在流程图中直接添加图标和图片，从而提供更多的视觉上下文和清晰度。

【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 to add custom icons. The syntax for defining an icon shape is as follows:】

参数

【Parameters】

• icon: 图标包中注册图标的名称。
• form: 指定图标的背景形状。如果未定义，则图标没有背景。选项包括：
  • square（方形）
  • circle（圆形）
  • rounded（圆角）
• label: 与图标关联的文本标签。可以是任意字符串。如果未定义，则不显示标签。
• pos: 标签的位置。如果未定义，标签默认显示在图标下方。可能的值包括：
  • t（上）
  • b（下）
• h: 图标的高度。如果未定义，默认值为 48，这是最小高度。

图片形状

【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:】

flowchart TD
    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }

参数

【Parameters】

• img：要显示的图片的 URL。
• label：与图片关联的文本标签。可以是任何字符串。如果未定义，将不显示标签。
• pos：标签的位置。如果未定义，标签将默认为图片底部。可能的值有：
  • t
  • b
• w：图片的宽度。如果未定义，将默认为图片的自然宽度。
• h：图片的高度。如果未定义，将默认为图片的自然高度。
• constraint：确定图片是否应该限制节点大小。此设置还确保图片保持其原始宽高比，根据高度（h）相应调整宽度（w）。如果未定义，将默认为 off。可能的值有：
  • on
  • off

如果你想调整图片大小，但保持相同的宽高比，请设置 h，并将 constraint: on 设置为约束宽高比。例如。

【If you want to resize an image, but keep the same aspect ratio, set h, and set constraint: on to constrain the aspect ratio. E.g.】

节点之间的链接

【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.】

为边分配一个 ID

【Attaching an ID to Edges】

Mermaid 现在支持为边分配 ID，类似于可以将 ID 和元数据附加到节点上。此功能为边上的更高级样式、类和动画功能奠定了基础。

【Mermaid now supports assigning IDs to edges, similar to how IDs and metadata can be attached to nodes. This feature lays the groundwork for more advanced styling, classes, and animation capabilities on edges.】

语法:

要为一条边分配 ID，请在边的语法前加上 ID，然后跟一个 @ 字符。例如：

【To give an edge an ID, prepend the edge syntax with the ID followed by an @ character. For example:】

在这个例子中，e1 是连接 A 和 B 的边的 ID。你可以在后续的定义或样式语句中使用这个 ID，就像使用节点一样。

【In this example, e1 is the ID of the edge connecting A to B. You can then use this ID in later definitions or style statements, just like with nodes.】

打开动画

【Turning an Animation On】

一旦你为一条边分配了 ID，就可以通过定义边的属性来开启该边的动画效果：

【Once you have assigned an ID to an edge, you can turn on animations for that edge by defining the edge’s properties:】

这告诉 Mermaid 边 e1 应该被动画化。

【This tells Mermaid that the edge e1 should be animated.】

选择动画类型

【Selecting Type of Animation】

在初始版本中，支持两种动画速度：fast 和 slow。选择特定的动画类型是启用动画并一次性设置动画速度的简便方式。

【In the initial version, two animation speeds are supported: fast and slow. Selecting a specific animation type is a shorthand for enabling animation and setting the animation speed in one go.】

示例:

这相当于 { animate: true, animation: fast }。

【This is equivalent to { animate: true, animation: fast }.】

使用 classDef 语句进行动画

【Using classDef Statements for Animations】

你也可以通过给边分配一个类，然后在 classDef 语句中定义动画属性来为边添加动画。例如：

【You can also animate edges by assigning a class to them and then defining animation properties in a classDef statement. For example:】

在这个代码片段中：

【In this snippet:】

• e1@--> 创建一个 ID 为 e1 的边。
• classDef animate 定义一个名为 animate 的类，并设置样式和动画属性。
• class e1 animate 将 animate 类应用到边 e1 上。

关于逃避逗号的注意： 设置“stroke-dasharray”属性时，记得将逗号转为“\”，因为在 Mermaid 风格定义中，逗号被用作分隔符。

新的箭类型

【New arrow types】

支持新的箭头类型：

【There are new types of arrows supported:】

• 圆形边缘
• 十字边缘

圆边示例

【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:】

注意 渲染引擎仍可能将链接延长至超过请求的等级数，以适应其他请求。

当链接标签写在链接中间时，必须在链接的右侧添加额外的短划线。以下示例与前一个示例等效：

【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.】

给出的数字是十进制，因此 # 可以编码为 #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】

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

【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:】

• 对于加粗文本，在文本前后使用双星号（**）。
• 对于斜体文本，在文本前后使用单星号（*）。
• 在传统字符串中，你需要添加 <br> 标签以便文本在节点中换行。然而，Markdown 字符串会在文本过长时自动换行，并且你只需使用换行符而不是 <br> 标签即可开始新行。

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

【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
• callback 是在显示图表的页面上定义的 JavaScript 函数名称，该函数将以 nodeId 作为参数被调用。

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

【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.】

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

?> 由于 Docsify 对 JavaScript 回调函数的处理存在限制，上述代码的替代可行演示可以在 这个 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，因此需要通过其他方式来决定链接应使用的样式。不是使用 ID，而是使用定义链接时的顺序号，或者使用默认值来应用于所有链接。在下面的示例中，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.】

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

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

线条样式可以通过两种方式实现：

【Line styling can be achieved in two ways:】

1. 更改所有线条的曲线样式
2. 更改特定线条的曲线样式

图表等高线风格

【Diagram level curve style】

在这个例子中，一个从左到右的图使用了 stepBefore 曲线样式：

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

---
config:
  flowchart:
    curve: stepBefore
---
graph LR

使用边 ID 的边级曲线样式 (v11.10.0+)

【Edge level curve style using Edge IDs (v11.10.0+)】

你可以为边分配 ID。分配 ID 后，你可以通过使用以下语法修改边的curve属性来更改线条样式：

【You can assign IDs to edges. After assigning an ID you can modify the line style by modifying the edge's curve property using the following syntax:】

Any edge curve style modified at the edge level overrides the diagram level style.

If the same edge is modified multiple times the last modification will be rendered.

为节点设置样式

【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:】

示例样式

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

示例定义

默认类

【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:#图标类名# 来访问图标。

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

显示这些 FontAwesome 图标有两种方式：

【There are two ways to display these FontAwesome icons:】

注册 FontAwesome 图标包（v11.7.0+）

【Register FontAwesome icon packs (v11.7.0+)】

你可以按照“注册图标包”说明来注册你自己的 FontAwesome 图标包。

【You can register your own FontAwesome icon pack following the "Registering icon packs" instructions.】

支持的前缀：fa、fab、fas、far、fal、fad。

【Supported prefixes: fa, fab, fas, far, fal, fad.】

信息

请注意，如果未注册 FontAwesome 包，它将回退到使用 FontAwesome CSS。

注册 FontAwesome CSS

【Register FontAwesome CSS】

如果网站上包含了 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.】

示例

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 版本之后，图语句以分号结尾只是可选的。因此，下面的图声明与旧的图声明一样有效。

• 顶点与连接之间允许一个空格。但顶点与其文本之间以及连接与其文本之间不应有空格。旧的图声明语法依然可用，因此这个新特性是可选的，引入它是为了提高可读性。

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

【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:】

config:
  flowchart:
    defaultRenderer: "elk"

信息

请注意，网站需要使用 Mermaid 版本 9.4 以上才能实现此功能，并且需要在懒加载配置中启用此功能。

宽度

【Width】

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

【It is possible to adjust the width of the rendered flowchart.】

这是通过定义 mermaid.flowchartConfig 或使用 CLI 来使用带有配置的 JSON 文件来完成的。如何使用 CLI 已在 mermaidCLI 页面中描述。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%
}