Markdown： 流程图绘制全手册

nick_dang
1,408 阅读6分钟

流程图 - 基本语法

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

节点（默认）

mermaid代码：
---
title: Node
---
flowchart LR
    id

---
title: Node
---
flowchart LR
    id

信息

id 是框中显示的内容。

提示 也可以使用代替.flowchart``graph

带有文本的节点

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

mermaid 代码：
---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]

---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]

Unicode 文本

用于将 unicode 文本括起来。"

mermaid 代码：
flowchart LR
    id["This ❤ Unicode"]

flowchart LR
    id["This ❤ Unicode"]

Markdown 格式

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

mermaid 代码：
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

方向

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

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

mermaid 代码：
flowchart TD
    Start --> Stop

flowchart TD
    Start --> Stop

这声明流程图的方向是从左到右 （）。LR

mermaid 代码：
flowchart LR
    Start --> Stop

flowchart LR
    Start --> Stop

可能的流程图方向包括：

  • TB - 从上到下
  • TD - 自上而下/自上而下
  • BT - 从下到上
  • RL - 从右到左
  • LR - 从左到右

节点形状

具有圆边的节点

mermaid 代码：
flowchart LR
    id1(This is the text in the box)

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

体育场形节点

mermaid 代码：
flowchart LR
    id1([This is the text in the box])

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

子例程形状中的节点

mermaid mermaid代码：
flowchart LR
    id1[[This is the text in the box]]

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

圆柱形的节点

mermaid 代码：
flowchart LR
    id1[(Database)]

flowchart LR
    id1[(Database)]

圆形的节点

mermaid 代码：
flowchart LR
    id1((This is the text in the circle))

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

非对称形状的节点

mermaid 代码：
flowchart LR
    id1>This is the text in the box]

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

目前只有上面的形状是可能的，而不是它的镜子。这可能会在将来的版本中发生变化。

节点（菱形）

mermaid 代码：
flowchart LR
    id1{This is the text in the box}

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

六边形节点

mermaid 代码：
flowchart LR
    id1{{This is the text in the box}}

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

平行四边形

mermaid 代码：
flowchart TD
    id1[/This is the text in the box/]

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

平行四边形

mermaid 代码：
flowchart TD
    id1[\This is the text in the box]

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

梯形

mermaid 代码：
flowchart TD
    B[\Go shopping/]

flowchart TD
    B[\Go shopping/]

双圆

mermaid代码：
flowchart TD
    id1(((This is the text in the circle)))

flowchart TD
    id1(((This is the text in the circle)))

节点之间的链接

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

带箭头的链接

mermaid 代码：
flowchart LR
    A-->B

flowchart LR
    A-->B

开放链接

mermaid代码：
flowchart LR
    A --- B

flowchart LR
    A --- B

链接上的文字

mermaid代码：
flowchart LR
    A-- This is the text! ---B

flowchart LR
    A-- This is the text! ---B

或

mermaid 代码：
flowchart LR
    A---|This is the text|B

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

带有箭头和文本的链接

mermaid 代码：
flowchart LR
    A-->|text|B

flowchart LR
    A-->|text|B

或

mermaid 代码：
flowchart LR
    A-- text -->B

flowchart LR
    A-- text -->B

虚线链接

mermaid 代码：
flowchart LR
   A-.->B;

flowchart LR
   A-.->B;

带文本的虚线链接

mermaid 代码：
flowchart LR
   A-. text .-> B

flowchart LR
   A-. text .-> B

粗链接

mermaid 代码：
flowchart LR
   A ==> B

flowchart LR
   A ==> B

带文本的粗链接

mermaid 代码：
flowchart LR
   A == text ==> B

flowchart LR
   A == text ==> B

隐藏连接

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

mermaid代码：
flowchart LR
    A ~~~ B

flowchart LR
    A ~~~ B

连续链接

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

mermaid 代码：
flowchart LR
   A -- text --> B -- text2 --> C

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

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

mermaid 代码：
flowchart LR
   a --> b & c--> d

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

然后，您可以以一种非常富有表现力的方式描述依赖关系。就像下面的一句话：

mermaid 代码：
flowchart TB
    A & B--> C & D

flowchart TB
    A & B--> C & D

当然你也可以使用基本语法描述同一图表，则需要四行，这样清晰，但会比较占用篇幅。

mermaid 代码：
flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D

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

新的箭头类型

支持新支持的箭头类型：

  • 圆箭头
  • 叉箭头

圆箭头示例

mermaid 代码：
flowchart LR
    A --o B

flowchart LR
    A --o B

叉箭头示例

mermaid代码：
flowchart LR
    A --x B

flowchart LR
    A --x B

多方向箭头

可以使用多向箭头。

mermaid代码：
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]

注意为了适应其他请求，渲染引擎可能仍会使链接长于请求的等级数。

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

mermaid 代码：
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]

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

长度123
常规------------
带箭头的线-->--->---->
粗线============
带箭头的线==>===>====>
修饰线-.--..--...-
修饰线箭头-.->-..->-...->

如果特殊字符导致语法错误

可以将文本放在引号内，包裹特殊的字符。如下例所示：

mermaid 代码：
flowchart LR
    id1["This is the (text) in the box"]

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

字符转义

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

mermaid 代码：
    flowchart LR
        A["A double quote:#quot;"] --> B["A dec char:#9829;"]

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

父子图

subgraph title
    graph definition
end

下面是一个例子：

mermaid 代码：
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

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

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

mermaid 代码：
flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

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

流程图

使用 graphtype 流程图，还可以设置多图之间的连接线，如下图所示。

mermaid 代码：
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

子图中的方向

使用 graphtype 流程图，您可以使用 direction 语句来设置子图将呈现的方向，如本例所示。

mermaid 代码：
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

限度

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

mermaid 代码：
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
avatar
文章
阅读
粉丝