Mermaid流程图

最新推荐文章于 2024-05-30 23:45:00 发布

Scarlett2025

最新推荐文章于 2024-05-30 23:45:00 发布

阅读量998

点赞数

文章标签：流程图 Mermaid

本文链接：https://blog.csdn.net/Scarlett2025/article/details/130506466

版权

所有流程图都由节点，几何形状和边缘，箭头或线条组成。mermaid代码定义了这些节点和边缘的制作和交互方式。
它还可以容纳不同的箭头类型、多方向箭头以及与子图之间的链接。

1、流程图的方向

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

flowchart TD
    Start --> Stop

flowchart LR
    Start --> Stop

2、节点形状

具有圆边的节点

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

体育场形节点

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

子例程形状中的节点

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

圆柱形节点

flowchart LR
    id1[(Database)]

圆形节点

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

不对称形状的节点

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

菱形

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

六边形节点

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

平行四边形

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

平行四边形替代

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

梯形

flowchart TD
    A[/Christmas\]

梯形替代

flowchart TD
    B[\Go shopping/]

3、节点之间的链接

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

带箭头的链接

flowchart LR
    A-->B

打开的链接

flowchart LR
    A --- B

链接上的文字

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

或

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

带有箭头和文本的链接

flowchart LR
    A-->|text|B

或

flowchart LR
    A-- text -->B

虚线链接

flowchart LR
   A-.->B;

带文本的虚线链接

flowchart LR
   A-. text .-> B

粗链接

flowchart LR
   A ==> B

包含文本的粗链接

flowchart LR
   A == text ==> B

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

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

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

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

以一种非常富有表现力的方式描述依赖项。就像下面的一行：

flowchart TB
    A & B--> C & D

使用基本语法描述相同的关系图，则需要四行

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

新的箭头类型

flowchart LR
    A --o B
    B --x C

多方向箭头

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]

长度	1	2	3
正常	—	----	-----
正常箭头	–>	—>	---->
粗	===	====	=====
粗箭头	==>	===>	====>
点	-.-	-. .-	-…-
带点的箭头	-.->	-…->	-…->

4、破坏语法的特殊字符

可以将文本放在引号内，以便呈现更复杂的字符。如下例所示：

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

用于转义字符的实体代码

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

5、子图

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

还可以为子图设置显式 ID

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

使用graphtype流程图，还可以设置子图的边，如下图所示。

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 流程图，您可以使用方向语句来设置子图将呈现的方向，如本例所示

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

6、注释

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

flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

7、样式和类

7.1 设置节点样式

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

8、顶点和链接之间有空格且不带分号的图形声明

在图形声明中，语句现在也可以不带分号结尾。在 0.2.16 版本之后，用分号结束图形语句只是可选的。因此，下面的图形声明与图形的旧声明一起也是有效的。
顶点和链接之间允许使用单个空格。但是，顶点与其文本以及链接与其文本之间不应有任何空格。图形声明的旧语法也可以使用，因此这个新功能是可选的，引入以提高可读性。

flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

参考：流程图 - 基本语法