Mermaid 使用教程之流程图 - 从入门到精通

本文由 Mermaid中文文档 整理而来，并且它同时提供了一个Mermaid在线编辑器。

Mermaid 流程图 - 基本语法​

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

WARNING

如果在流程图节点中使用“end”这个词，整个词或其中的字母必须大写（例如“End”或“END”）。在小写字母中输入“end”将会导致流程图出现问题。

WARNING

如果在连接的流程图节点中使用“o”或“x”作为首字母，请在前面加一个空格或将该字母大写（例如“dev--- ops”、“dev---Ops”）。 输入“A---oB”将创建一个[circle edge](#circle-edge-example)。 输入“A---xB”将创建一个[cross edge](#cross-edge-example)。

节点​

Code:

---
title: 节点
---
flowchart LR
    id

节点

NOTE

id是显示在框中的内容。

除了`flowchart`，也可以使用`graph`。

带文本的节点​

也可以设置与id不同的文本。 如果多次进行此操作，最后找到的文本将用于该节点。如果稍后为该节点定义边时，您可以省略文本定义。先前定义的文本将在渲染框时使用。

Code:

---
title: 带文本的节点
---
flowchart LR
    id1[这是框中的文本]

带文本的节点

Unicode文本​

使用"将unicode文本括起来。

Code:

flowchart LR
    id["这是 ❤ Unicode"]

Markdown格式化​

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

Code:

%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`这一行 **是** _Markdown_`"]
    newLines["`Line 1
    Line 2
    Line 3`"]
    markdown --> newLines

方向​

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

这声明了流程图从上到下定向（TD或TB）。

Code:

flowchart TD
    Start --> Stop

这声明了流程图从左到右定向（LR）。

Code:

flowchart LR
    Start --> Stop

可能的流程图方向:

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

节点形状​

带圆边的节点​

Code:

flowchart LR
    id1(这是框中的文本)

体育馆形状的节点​

Code:

flowchart LR
    id1([这是框中的文本])

子程序形状的节点​

Code:

flowchart LR
    id1[[这是框中的文本]]

圆柱形状的节点​

Code:

flowchart LR
    id1[(数据库)]

圆形的节点​

Code:

flowchart LR
    id1((这是圆形中的文本))

不对称形状的节点​

Code:

flowchart LR
    id1>这是框中的文本]

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

菱形节点​

Code:

flowchart LR
    id1{这是框中的文本}

六边形节点​

Code:

mermaid

flowchart LR
    id1{
  {这是框中的文本}}

平行四边形​

Code:

flowchart TD
    id1[/这是框中的文本/]

反平行四边形​

Code:

flowchart TD
    id1[\这是框中的文本\]

梯形​

Code:

flowchart TD
    A[/圣诞节\]

反梯形​

Code:

flowchart TD
    B[\去购物/]

双圈​

Code:

mermaid

flowchart TD
    id1(((这是圈中的文本)))

Mermaid流程图中的扩展节点形状（v11.3.0+）​

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

新的形状定义语法

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

A@{ shape: rect }

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

新形状的示例流程图​

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

Code:

flowchart RL
    A@{ shape: manual-file, label: "文件处理"}
    B@{ shape: manual-input, label: "用户输入"}
    C@{ shape: docs, label: "多个文档"}
    D@{ shape: procs, label: "过程自动化"}
    E@{ shape: paper-tape, label: "纸质记录"}

过程​

Code:

flowchart TD
    A@{ shape: rect, label: "这是一个过程" }

事件​

Code:

flowchart TD
    A@{ shape: rounded, label: "这是一个事件" }

终点（体育馆）​

Code:

flowchart TD
    A@{ shape: stadium, label: "终点" }