Markdown语法-流程图

发表于 更新于 分类于 ， ， 阅读次数： 评论： 本文字数： 16k 阅读时长 ≈ 44 分钟

前言

Markdown 的原生语法不支持绘制图形，但通过 ==Mermaid 扩展==，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、"饼图" 等。

Mermaid 是一个方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。

Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更（缺乏更新），它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。

Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。

Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。

Mermaid | Github 、mermaid | 官方文档

注意：

由于Markdown并没有自带Mermaid，所以在使用流程图的时候，请确保你的编辑器、博客等地方，正确安装了 ==Mermaid 扩展==！

语法

基本语法

要在 Markdown 中添加 Mermaid 图形，需要声明 Mermaid 类型的代码块，代码如下：

1
2
3
```mermaid
<!-- 此处的内容根据你设置的类型，会被渲染成不同的 mermaid 图形 -->
```

流程图

flowchart TD
    开始 --> 结束
1
2
3
4
```mermaid
flowchart TD
    开始 --> 结束
```

或

1
2
3
4
```mermaid
graph TD
    开始 --> 结束
```

冒泡排序流程图:

flowchart TB
    执行1[i = 1]
    执行2[j = 0]
    执行3[i ++]
    执行4["a = arr[j], b = arr[j + 1]"]
    执行5[交换 a, b]
    执行6[j ++]
    判断1["i < n"]
    判断2["j < n - i"]
    判断3["a > b"]

    开始 --> 执行1
    执行1 --> 判断1
    判断1 --Y--> 执行2
    执行2 --> 判断2
    判断2 --Y--> 执行4
    判断2 --N--> 执行3
    执行3 --> 判断1
    执行4 --> 判断3
    判断3 --N--> 判断2
    判断3 --Y--> 执行5
    执行5 --> 执行6
    执行6 --> 判断2
    判断1 --N--> 结束
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
flowchart TB
    执行1[i = 1]
    执行2[j = 0]
    执行3[i ++]
    执行4["a = arr[j], b = arr[j + 1]"]
    执行5[交换 a, b]
    执行6[j ++]
    判断1["i < n"]
    判断2["j < n - i"]
    判断3["a > b"]

    开始 --> 执行1
    执行1 --> 判断1
    判断1 --Y--> 执行2
    执行2 --> 判断2
    判断2 --Y--> 执行4
    判断2 --N--> 执行3
    执行3 --> 判断1
    执行4 --> 判断3
    判断3 --N--> 判断2
    判断3 --Y--> 执行5
    执行5 --> 执行6
    执行6 --> 判断2
    判断1 --N--> 结束

节点ID

在相对复杂的场景中，不同节点的内容可能会重复。这种情况就需要用ID来区分不同的节点。

flowchart LR
    a1[a] --> b
    a2[a] --> b
1
2
3
4
5
```mermaid
flowchart LR
    a1[a] --> b
    a2[a] --> b
```

更改流程图方向

支持的方向有：

标志 方向
TD 等同于 TB
TB top bottom - 从上到下
BT bottom top - 从下到上
LR left right - 从左到右
RL right left - 从右到左

节点形状

在 Mermaid 语法中，不加任何修饰的文字内容会被渲染成默认的几何图形节点（方框）。

在 Mermaid 中可以使用一些基本符号定义节点的形状，例如：

形状 语法
圆角形状 id1(圆角形状)
体育场形状 id2([体育场形状])
子例程形状 id3[[子例程形状]]
圆柱形状 id4[(圆柱形状)]
圆形 id5((圆形))
不对称形状 id6>不对称形状]
菱形 id7{菱形}
六边形 id8
平行四边形 id9[/平行四边形/]
反向平行四边形 id10[\反向平行四边形\]
梯形 id11[/梯形\]
反向梯形 id12[\反向梯形/]
双圆形 id13(((Text))) 
flowchart TD
  id1(圆角形状)
    id2([体育场形状])
    id3[[子例程形状]]
    id4[(圆柱形状)]
    id5((圆形))
    id6>不对称形状]
flowchart TD
    id7{菱形}
    id8{{六边形}}
    id9[/平行四边形/]
    id10[\反向平行四边形\]
    id11[/梯形\]
    id12[\反向梯形/]
flowchart TD
    id13(((双圆形)))

连接线

在流程图中，不同节点之间需要通过连接线来描述其相关性，Mermaid同样可以做到。

种类 语法
有向线段 A --> B
无向线段 A --- B
虚线 A -.- B
带箭头虚线 A -.-> B
有向粗线 A ==> B
无向粗线 A === B
隐形连接线 A ~~~ B
实心圆连接线 A --o B
叉号连接线 A --x B 
flowchart LR
  A --> B --- C -.- D -.-> E ==> F === G ~~~ H --o I --x J

多方向箭头连接线

1
2
flowchart LR
  A o--o B <--> C x--x D
flowchart LR
  A o--o B <--> C x--x D

连接线上的文字

有两种方式：

  • 在连接线中间插入文本
  • 在连接线后面用|Text|表示
1
2
3
A-- text -->B

A-->|text|B

连接线的长度

流程图中的每个节点最终都分配给渲染中的一个图形等级，即垂直或水平水平（取决于流程图 方向），基于它所连接线到的节点。默认情况下，连接线可以跨越任意数量的排名，但您还可以要求它更长（通过在连接线定义中添加额外的破折号来比其他连接线更长）。

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

长度 1 2 3
无向线段 --- ---- -----
有向线段 --> ---> ---->
无向粗线 === ==== =====
有向粗线 ==> ===> ====>
虚线 -.- -..- -...-
带箭头虚线 -.-> -..-> -...->

在以下示例中，在从节点 B 到节点 E 的连接线中添加了两个额外的短划线，以便它比常规连接线跨越两个等级：

1
2
3
4
5
6
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]

注意：

连接线可能仍比请求的排名数长，由呈现引擎来容纳其请求。

当连接线的文本写在连接线中间时，额外的破折号必须添加到连接线的右侧。A -- Text ----> B

破坏语法的特殊字符

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

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

用于转义字符的实体编码

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

字符 实体编码
引号 " #quot;
井号 # #35; 
1
2
flowchart LR
  A["A double quote:#quot;"] -->B["A dec char:#9829;"]
flowchart LR
  A["A double quote:#quot;"] -->B["A dec char:#35;"]

给出的数字以 10 为基数，因此可以编码为 .还支持使用 HTML 字符名称。

子图

1
2
3
subgraph title
    graph definition
end

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

1
2
3
4
5
6
7
flowchart TB
    subgraph ide1 [one]
    a1-->a2
    end
    subgraph ide2 [one]
    b1-->b2
    end

下面是一个示例：

1
2
3
4
5
6
7
8
9
10
11
flowchart TB
    c1-->a2
    subgraph 第一组
      a1-->a2
    end
    subgraph 第二组
      b1-->b2
    end
    subgraph 第三组
      c1-->c2
    end
flowchart TB
    c1-->a2
    subgraph 第一组
      a1-->a2
    end
    subgraph 第二组
      b1-->b2
    end
    subgraph 第三组
      c1-->c2
    end

设置子图的边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

子图嵌套

1
2
3
4
5
6
7
8
9
flowchart LR
  subgraph TOP
    subgraph B1
        i1 -->f1
    end
    subgraph B2
        i2 -->f2
    end
  end
flowchart LR
  subgraph TOP
    subgraph B1
        i1 -->f1
    end
    subgraph B2
        i2 -->f2
    end
  end

子图中的方向

可以使用方向语句来设置子图将呈现的方向，如direction TB。

标志 方向
TD 等同于 TB
TB top bottom - 从上到下
BT bottom top - 从下到上
LR left right - 从左到右
RL right left - 从右到左 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

方向语句会影响子图的布局，但前提是它没有任何链接进出子图。这样做的原因是，如果你有链接进出，那么节点图不再是子图中的节点集，而是实际上是父节点的集合，包括子图中的节点集。人们可以看到容器的方向通过链接注入到子图中。

单击事件

可以将单击事件绑定到节点，单击可能导致 javascript 回调或将在新的浏览器选项卡中打开的链接。

请在官方文档中查看详情。

注释

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

如：%% this is a comment A -- text --> B{node}

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

样式和类

样式链接

可以设置链接样式。例如，您可能希望设置在流中向后移动的链接的样式。作为链接 没有与节点相同的 ID，需要其他一些方法来决定链接应附加到哪种样式。 使用图形中定义链接时的顺序号代替 id，或使用 default 应用于所有链接。 在下面的示例中，linkStyle 语句中定义的样式将属于图中的第四个链接：

1
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;

样式线条曲线

如果默认方法不能满足您的需求，则可以设置用于项目之间直线的曲线类型的样式。 可用的曲线样式包括 、、、 和。basis``bump``linear``monotoneX``monotoneY``natural``step``stepAfter``stepBefore

在此示例中，从左到右的图形使用曲线样式：stepBefore

1
2
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR

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

设置节点样式

可以将特定样式（如较粗的边框或不同的背景颜色）应用于节点。

1
2
3
4
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
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

类

比每次定义样式更方便的是定义一类样式并将此类附加到节点 应该有不同的外观。

类定义如下例所示：

1
classDef className fill:#f9f,stroke:#333,stroke-width:4px;

将类附加到节点的操作如下：

1
class nodeId1 className;

也可以在一个语句中将类附加到节点列表：

1
class nodeId1,nodeId2 className;

添加类的较短形式是使用运算符将类名附加到节点，如下所示：:::

1
2
3
flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

CSS类

默认类

对fontawesome图标的基本支持

可以从==fontawesome==添加图标。

这些图标可通过语法 fa:#icon class name# 访问。

1
2
3
4
5
flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?)
flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?)

Mermaid现在仅与Font Awesome4和5版本兼容。请检查您使用的Font Awesome版本是否正确。

饼图

26 Markdown 饼图_Markdown 入门教程-慕课网 (imooc.com)

饼图（或圆形图）是一种圆形统计图形，它被分成多个切片来说明数字比例。在饼图中，每个切片的弧长（以及其中心角和面积）与其表示的数量成正比。虽然它因其与切片馅饼的相似之处而得名，但它的呈现方式有所不同。已知最早的饼图通常归功于威廉·普莱费尔（William Playfair）1801年的《统计圣经》（Statistical Breviary）。 -维基百科

美人鱼可以渲染饼图。

1
2
3
4
5
6
pie showData
    title 产品 X 中的关键要素
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
pie showData
    title 产品 X 中的关键要素
    "钙" : 42.96
    "钾" : 50.05
    "镁" : 10.01
    "铁" :  5

状态图

24 Markdown 状态图_Markdown 入门教程-慕课网 (imooc.com)

“状态图是计算机科学和相关领域用来描述系统行为的一种图。状态图要求所描述的系统由有限数量的状态组成;有时，情况确实如此，而在其他时候，这是一个合理的抽象。维基百科

美人鱼可以渲染状态图。该语法尝试与plantUml中使用的语法兼容，因为这将使用户更容易在美人鱼和plantUml之间共享图表。

在状态图中，系统根据其状态以及系统状态如何通过转换更改为另一种状态来描述。下面的示例图显示了三种状态静止、移动和崩溃。您从静止状态开始。从静止，您可以将状态更改为移动。在“移动”中，您可以将状态更改回“静止”或“崩溃”。没有从静止到崩溃的过渡。

1
2
3
4
5
6
7
8
stateDiagram-v2
    [*] --> 静止
    静止 --> [*]

    静止 --> 移动
    移动 --> 静止
    移动 --> 崩溃
    崩溃 --> [*]
stateDiagram-v2
    [*] --> 静止
    静止 --> [*]

    静止 --> 移动
    移动 --> 静止
    移动 --> 崩溃
    崩溃 --> [*]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
stateDiagram
        [*] --> 激活状态

        state 激活状态{
          direction LR
            [*] --> NumLock关
            NumLock关 --> NumLock开 : 按下 NumLock 键
            NumLock开 --> NumLock关 : 按下 NumLock 键
            --
            direction LR
            [*] --> CapsLock关
            CapsLock关 --> CapsLock开 : 按下 CapsLock 键
            CapsLock开 --> CapsLock关 : 按下 CapsLock 键
            --
            direction LR
            [*] --> ScrollLock关
            ScrollLock关 --> ScrollLock开 : 按下 ScrollLock 键
            ScrollLock开 --> ScrollLock关 : 按下 ScrollLock 键
        }
stateDiagram
        [*] --> 激活状态

        state 激活状态{
          direction LR
            [*] --> NumLock关
            NumLock关 --> NumLock开 : 按下 NumLock 键
            NumLock开 --> NumLock关 : 按下 NumLock 键
            --
            direction LR
            [*] --> CapsLock关
            CapsLock关 --> CapsLock开 : 按下 CapsLock 键
            CapsLock开 --> CapsLock关 : 按下 CapsLock 键
            --
            direction LR
            [*] --> ScrollLock关
            ScrollLock关 --> ScrollLock开 : 按下 ScrollLock 键
            ScrollLock开 --> ScrollLock关 : 按下 ScrollLock 键
        }

序列图（时序图）

22 Markdown 时序图_Markdown 入门教程-慕课网 (imooc.com)

序列图是一种交互图，它显示了进程如何相互操作以及以什么顺序运行。

美人鱼可以渲染序列图。

1
2
3
4
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
sequenceDiagram
    Alice ->> John: Hello John, how are you?
    John -->> Alice: Great!
    Alice -) John: See you later!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
sequenceDiagram
    participant a as 学生
    participant b as 教务系统
    participant c as 课程
    participant d as 成绩
    opt 认证
        a->>b: 用户名/密码
    end
    a->>+b: 请求课程列表
    b->>+c: 获取课程列表
    c-->>-b: 返回课程列表
    b->>+d: 获取成绩信息
    d-->>-b: 返回成绩信息
    b-->>-a: 显示成绩
sequenceDiagram
    participant a as 学生
    participant b as 教务系统
    participant c as 课程
    participant d as 成绩
    opt 认证
        a->>b: 用户名/密码
    end
    a->>+b: 请求课程列表
    b->>+c: 获取课程列表
    c-->>-b: 返回课程列表
    b->>+d: 获取成绩信息
    d-->>-b: 返回成绩信息
    b-->>-a: 显示成绩

类图

23 Markdown 类图_Markdown 入门教程-慕课网 (imooc.com)

“在软件工程中，统一建模语言（UML）中的类图是一种静态结构图，它通过显示系统的类，其属性，操作（或方法）以及对象之间的关系来描述系统的结构。 维基百科

类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模，以及用于将模型转换为编程代码的详细建模。类图也可用于数据建模。类图中的类表示主要元素、应用程序中的交互以及要编程的类。

美人鱼可以渲染类图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
classDiagram
    鸟 --|> 动物 : 继承
    翅膀 "2" --> "1" 鸟 : 组合
    动物 ..> 氧气 : 依赖
    动物 ..> 水 : 依赖

    class 动物 {
        <<interface>>
        +有生命
        +新陈代谢(氧气, 水)
        +繁殖()
    }

    class 鸟 {
        +羽毛
        +有角质喙没有牙齿
        +下蛋()
    }
    class 鸟 {
        +羽毛
        +有角质喙没有牙齿
        +下蛋()
    }
classDiagram
    鸟 --|> 动物 : 继承
    翅膀 "2" --> "1" 鸟 : 组合
    动物 ..> 氧气 : 依赖
    动物 ..> 水 : 依赖

    class 动物 {
        <<interface>>
        +有生命
        +新陈代谢(氧气, 水)
        +繁殖()
    }

    class 鸟 {
        +羽毛
        +有角质喙没有牙齿
        +下蛋()
    }
    class 鸟 {
        +羽毛
        +有角质喙没有牙齿
        +下蛋()
    }

实体关系图-ER图

实体关系模型（或 ER 模型）描述了特定知识领域中感兴趣的相互关联的事物。基本 ER 模型由实体类型（对感兴趣的事物进行分类）组成，并指定实体之间可以存在的关系（这些实体类型的实例）。

美人鱼可以渲染ER图

1
2
3
4
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

实体名称通常大写，尽管对此没有公认的标准，并且在美人鱼中也不是必需的。

实体之间的关系由带有表示基数的结束标记的线条表示。美人鱼使用最流行的鱼尾纹符号。鱼尾纹直观地传达了它所连接的实体的许多实例的可能性。

ER 图可用于各种目的，从没有任何实现细节的抽象逻辑模型到关系数据库表的物理模型。在 ER 图上包含属性定义以帮助理解实体的目的和含义可能很有用。这些不一定需要详尽无遗;通常，一小部分属性就足够了。美人鱼允许根据它们的类型和名称来定义它们。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }

在 ER 关系图上包括属性时，您必须决定是否将外键作为属性包括在内。这可能取决于您尝试表示关系表结构的紧密程度。如果你的图是一个逻辑模型，并不意味着关系实现，那么最好省略这些，因为关联关系已经传达了实体的关联方式。例如，JSON 数据结构可以使用数组实现一对多关系，而无需外键属性。类似地，面向对象的编程语言可以使用指向集合的指针或引用。即使对于用于关系实现的模型，您也可能认为包含外键属性会复制关系已描述的信息，并且不会为实体增加意义。最终，这是您的选择。

甘特图

甘特图是一种条形图，最初由卡罗尔·阿达米茨基于 1896 年开发，并由亨利·甘特在 1910 年代独立开发，它说明了项目时间表以及任何一个项目完成所需的时间。甘特图说明了项目的最终元素和摘要元素的开始日期和完成日期之间的天数。

给用户的说明

甘特图会将每个计划任务记录为一个从左到右延伸的连续条形图。x 轴表示时间，y 轴记录不同的任务及其完成顺序。

重要的是要记住，当特定于任务的日期、日期或日期集合被“排除”时，甘特图将通过向右扩展相等的天数来适应这些变化，而不是通过在任务内创建间隙来适应这些变化。如图所示： 甘特图

但是，如果排除的日期位于设置为连续开始的两个任务之间，则排除的日期将以图形方式跳过并留空，并且以下任务将在排除日期结束后开始。 如图所示 img

甘特图对于跟踪项目完成之前所需的时间很有用，但它也可用于以图形方式表示“非工作日”，并进行一些调整。

美人鱼可以将甘特图渲染为 SVG、PNG 或可以粘贴到文档中的 Markdown 链接。

1
2
3
4
5
6
7
8
9
gantt
    title 简单的甘特图
    dateFormat  YYYY-MM-DD
    section 分区1
    任务1-1           :a1, 2014-01-01, 30d
    任务1-2           :after a1  , 20d
    section 分区2
    任务2-1      :2014-01-12  , 12d
    任务2-2      : 24d
gantt
    title 简单的甘特图
    dateFormat  YYYY-MM-DD
    section 分区1
    任务1-1           :a1, 2014-01-01, 30d
    任务1-2           :after a1  , 20d
    section 分区2
    任务2-1      :2014-01-12  , 12d
    任务2-2      : 24d

复杂的应用

gantt
    dateFormat           :YYYY-MM-DD
    title                :甘特图实例
    excludes    weekends
    %% (' excluded '接受YYYY-MM-DD格式的特定日期，一周中的天数(“sunday”)或“weekends”，但不接受单词“weekdays”。)

    section 基本任务
    已完成任务            :done,    des1, 2014-01-06,2014-01-08
    进行中任务            :active,  des2, 2014-01-09, 3d
    未开始任务1           :         des3, after des2, 5d
    未开始任务2           :         des4, after des3, 5d

    section 紧急任务
    已完成的紧急任务 :crit, done, 2014-01-06,24h
    已完成紧急任务1       :crit, done, after des1, 2d
    进行中紧急任务2       :crit, active, 3d
    未开始紧急任务3       :crit, 5d
    未开始一般任务4       :2d
    未开始一般任务5       :1d

    section 文档编写
    进行中文档任务1       :active, a1, after des1, 3d
    未开始文档任务2       :after a1  , 20h
    未开始文档任务3       :doc1, after a1  , 48h

    section 其他部分
    其他任务1            :after doc1, 3d
    其他任务2            :20h
    其他任务3            :48h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
gantt
    dateFormat           :YYYY-MM-DD
    title                :甘特图实例
    excludes    weekends
    %% (' excluded '接受YYYY-MM-DD格式的特定日期，一周中的天数(“sunday”)或“weekends”，但不接受单词“weekdays”。)

    section 基本任务
    已完成任务            :done,    des1, 2014-01-06,2014-01-08
    进行中任务            :active,  des2, 2014-01-09, 3d
    未开始任务1           :         des3, after des2, 5d
    未开始任务2           :         des4, after des3, 5d

    section 紧急任务
    已完成的紧急任务 :crit, done, 2014-01-06,24h
    已完成紧急任务1       :crit, done, after des1, 2d
    进行中紧急任务2       :crit, active, 3d
    未开始紧急任务3       :crit, 5d
    未开始一般任务4       :2d
    未开始一般任务5       :1d

    section 文档编写
    进行中文档任务1       :active, a1, after des1, 3d
    未开始文档任务2       :after a1  , 20h
    未开始文档任务3       :doc1, after a1  , 48h

    section 其他部分
    其他任务1            :after doc1, 3d
    其他任务2            :20h
    其他任务3            :48h

需求图

需求图提供了需求及其相互之间和其他记录元素的连接可视化。建模规范遵循 SysML v1.6 定义的规范。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
requirementDiagram

   requirement test_req {
   id: 1
   text: the test text.
   risk: high
   verifymethod: test
   }

   element test_entity {
   type: simulation
   }

   test_entity - satisfies -> test_req
requirementDiagram

   requirement test_req {
       id: 1
       text: the test text.
       risk: high
       verifymethod: test
   }

   element test_entity {
     type: simulation
   }

   test_entity - satisfies -> test_req

用户旅程图

用户旅程非常详细地描述了不同用户在系统、应用程序或网站中完成特定任务所采取的步骤。此技术显示当前（按原样）用户工作流，并揭示未来工作流的改进领域。

每个用户旅程都分为几个部分，这些部分描述了任务的一部分用户正在尝试完成。

美人鱼可以呈现用户旅程图：

1
2
3
4
5
6
7
8
9
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

Git 图

Git 图是各种分支上的 git 提交和 git 操作（命令）的图形表示。

这些图表对于开发人员和 DevOps 团队共享他们的 Git 分支策略特别有帮助。例如，它使可视化 git 流的工作原理变得更加容易。

美人鱼可以渲染 Git 图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit id: "Normal" tag: "v1.0.0"
    commit
    commit id: "Reverse" type: REVERSE tag: "RC_1"
    commit
    commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
    commit
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit id: "Normal" tag: "v1.0.0"
    commit
    commit id: "Reverse" type: REVERSE tag: "RC_1"
    commit
    commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
    commit

在美人鱼中，我们支持基本的 git 操作，例如：

  • 提交 ：表示当前分支上的新提交。
  • 分支：要创建并切换到新分支，请将其设置为当前分支。
  • 签出 ：签出现有分支并将其设置为当前分支。
  • 合并 ：将现有分支合并到当前分支上。

借助这些关键的 git 命令，您将能够非常轻松快速地在美人鱼中绘制 gitgraph。 实体名称通常大写，尽管对此没有公认的标准，并且在美人鱼中也不是必需的。

C4C 图

C4C图：这是现在的实验图。语法和属性在将来的版本中可能会更改。当语法稳定时，将提供适当的文档。

思维导图

思维导图：这是现在的实验图。语法和属性在将来的版本中可能会更改。语法是稳定的，除了图标集成是实验部分。

“思维导图是一种图表，用于直观地将信息组织成层次结构，显示整体各部分之间的关系。它通常是围绕单个概念创建的，在空白页的中心绘制为图像，并添加相关的思想表示，例如图像，单词和单词的一部分。主要思想与中心概念直接相关，其他思想则从这些主要思想中分支出来。

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and eatures
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and eatures
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid